使用CardView实现漂亮的卡片式UI效果

本节引言

CardView适用于实现卡片式布局效果的重要控件，由Appcompat-v7库提供，实际上CardView也是一个FrameLayout，只是额外提供了圆角和阴影效果，看上去有立体的感觉。一般CardView都用在ListView的item布局中。

1.CardView自定义属性

CardView 继承自 FrameLayout，并在其基础上添加了圆角和阴影等效果。为了更方便地使用这些效果，Google 提供了一系列的自定义属性，这些属性的作用和用法如下：

CardView_cardBackgroundColor　　　　设置背景色

CardView_cardCornerRadius　　　　　　设置圆角大小

CardView_cardElevation　　　　　　　设置z轴阴影

CardView_cardMaxElevation　　　　　　设置z轴最大高度值

CardView_cardUseCompatPadding　　　　是否使用CompadPadding

设置内边距，V21+的版本和之前的版本具有一样的计算方式。

部分机器不开这个属性会导致卡片效果“消失”，如荣耀6（6.0系统）。

CardView_cardPreventCornerOverlap　　是否使用PreventCornerOverlap

在V20和之前的版本中添加内边距，这个属性为了防止内容和边角的重叠。

CardView_contentPadding　　　　　　　内部边距，子View与CardView的距离

CardView_contentPaddingLeft　　　　　内部左侧边距

CardView_contentPaddingTop　　　　　内部顶部边距

CardView_contentPaddingRight　　　　内部右侧边距

CardView_contentPaddingBottom　　　　内部底部边距

2.CardView使用(www.xing528.com)

（1）添加依赖库

CardView是随MD推出的补充库，并非SDK的内容，因此在使用CardView时，必须先引入依赖库：

implementation 'com.android.support：cardview-v7：××.×.×'

（2）使用CardView布局

前面已经介绍了，CardView继承自FrameLayout，那么用户就可以直接在布局中，将CardView作为容器，放入其他控件即可。如果已有现成的布局，想再引入卡片效果，也只需要在已有布局最外层添加CardView即可。

3.使用CardView案例

（1）新建一个module，命名为CardViewDemo。

（2）为CardView的使用添加依赖。在module的build.gradle中的dependencies {}中添加：

implementation 'com.android.support：cardview-v7：28.0.0'

注意：必须和implementation 'com.android.support：appcompat-v7：28.0.0'保持版本一致（本案例因需要使用RecyclerView也添加了RecyclerView的依赖）。

（3）准备12个头像图片，并导入至drawable文件夹中，见图2.30。

图2.30

（4）为项目增加相关资源，strings.xml参考代码如下：

（5）新建一个自定义布局文件item_layout.xml（注意cardview的使用）。

（6）布局文件activity_main.xml（注意非android核心控件的使用方法）。

（7）MainActivity.java代码如下：

（8）运行效果，见图2.31。

图2.31