效果图

CardView是Android5.0之后出现的，用它可以实现上图所展现的圆角效果、阴影效果。实现方式直接看代码：

第一步：

compile 'com.android.support:cardview-v7:25.0.1' //gradle导入CardView支持包

第二步：

效果图

android:layout_width="match_parent"

android:layout_height="150dp"

android:layout_marginLeft="10dp"

android:layout_marginRight="10dp"

android:layout_marginTop="10dp"

app:cardBackgroundColor="#FF8800"

app:cardCornerRadius="10dp"

app:cardElevation="8dp">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_gravity="center"

android:gravity="center"

android:text="测试文本"

android:textColor="@android:color/white"

android:textSize="72sp" />

API说明

cardBackgroundColor 设置背景颜色，此处直接设置background是不生效的

cardCornerRadius 设置圆角边大小

cardElevation 阴影大小

cardMaxElevation 最大的阴影大小

cardPreventCornerOverlap 在v20和之前的版本中添加内边距，这个属性是为了防止卡片内容和边角的重叠

cardUseCompatPadding 设置内边距，v21+的版本和之前的版本仍旧具有一样的计算方式

contentPadding 内边距

contentPaddingBottom

contentPaddingLeft

contentPaddingRight

contentPaddingTop

cardUseCompatPadding 属性详解

上述代码在API21之前版本运行效果

API21之前效果图

上述代码在API21之后版本运行效果

API21之后效果图

可以看到，当我们设置了卡片阴影效果之后，在API21之前的机型上，CardView会在整体设置大小之内预留出阴影部分的位置，因此实际上的显示出来的效果会比我们想要的大小会小一圈。而API21之后的阴影是绘制在指定View大小之外的

为了兼容低版本机型，可以设置 app:cardUseCompatPadding="true" ，这样，在高版本机型上显示效果就会与低版本机型保持一直，此时你在布局时，设置View大小应该考虑到阴影部分的大小

cardPreventCornerOverlap 属性详解

我在cardView中添加了一个ImageView，代码如下

android:layout_width="match_parent"

android:layout_height="150dp"

android:layout_marginLeft="10dp"

android:layout_marginRight="10dp"

android:layout_marginTop="10dp"

app:cardCornerRadius="10dp"

app:cardBackgroundColor="@color/colorPrimary">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:src="@mipmap/ez"

android:scaleType="centerCrop"/>

在不同版本手机上运行效果是这样的

API20以前效果

API20以后效果

在Android5.0以上运行效果是很令人满意的，但是在5.0以前，CardView内容是不会自动裁切圆角边的，显示出来的效果就很LOW了

如果我在CardView上加上 app:cardPreventCornerOverlap="false" ，效果是这样的

app:cardPreventCornerOverlap="false

好吧，很明显，app:cardPreventCornerOverlap属性默认是true,若为true,这会在CardView内添加边距，防止CardView的圆角边与里面的内容重合

为CardView添加点击效果

点击浮动效果

CardView默认是不能被点击的，要添加点击效果，首先需要添加

android:clickable="true"

自定义CardView点击效果,在/res/animator下创建card_view_click.xml

android:state_enabled="true"

android:state_pressed="true">

android:duration="@android:integer/config_shortAnimTime"

android:propertyName="translationZ"

android:valueTo="3dp"

android:valueType="floatType" />

android:duration="@android:integer/config_shortAnimTime"

android:propertyName="translationZ"

android:valueTo="0dp"

android:valueType="floatType" />

在CardView上添加属性

android:stateListAnimator="@animator/card_view_click"

注意：·android:stateListAnimator·属性仅支持API21以上的Android版本，因此需要创建/layout-v21,将添加动画效果的布局文件放到layout-v21下，当Android版本大于API21时才会加载此布局文件。在layout可以添加不带动画的布局文件，或者用其他效果代替，这个我就不管了。。。

可以在API21以下为CardView添加android:foreground="?attr/selectableItemBackground"，这个是Android自带的一个点击效果，为点击区域添加高亮显示，但是实际效果很LOW，强烈不建议。。。

最后。。。侵权必究，毕竟写了一下午~

如以上内容有任何错误或补充，欢迎加QQ：1195211669 ，验证信息：简书