控件介绍

CardView是个Group,继承自FrameLayout,实际上是在FrameLayout的基础上提供了圆角,阴影等效果,看上去更立体。由appcompat-v7库提供,可以设置圆角弧度,还可以设置z轴高度,显示阴影效果。

属性介绍

  • CardView的属性设置都是”app:”开头的,如果使用”android:”开头的是没有效果的。
  • app:cardBackgroundColor:设置背景色。
  • app:cardCornerRadius:设置角的弧度,MD设计要求统一为2dp,但是2dp感官上不太明显。
  • app:contentPadding:内容填充。
  • app:cardElevation:设置z轴高度。

注意事项

圆角弧度统一要求2dp。
卡片最多包涵两块操作区域,辅助操作区至多包含两个操作项,更多操作需要使用下拉菜单。其余部分都是主操作区。

例子效果

安卓Material Desigh常用代码介绍3——卡片控件CardView的介绍和使用例子_控件

设计思路

1.在app/build.gradle文件声明库的依赖:
compile’com.android.support:cardview-v7:24.2.1’
然后sync。
2.写入代码

代码如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.v7.widget.CardView
android:layout_width="300dp"
android:layout_height="200dp"
android:layout_marginTop="30dp"
android:layout_gravity="center"
app:cardBackgroundColor="@color/colorPrimary"
app:cardCornerRadius="20dp"
android:elevation="5dp">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="我在卡片控件里"
android:textColor="#ffffff"/>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:text="我也在卡片控件里"/>

</android.support.v7.widget.CardView>

</LinearLayout>