【MaterialDesign】CardView

CardView是用于实现卡片式布局效果的重要控件，由appcompat-v7库提供。实际上CardView也是一个FrameLayout，只是额外提供圆角和阴影等效果。

1、使用方法

在app的build.gradle文件中添加依赖。

implementation 'com.android.support:appcompat-v7:26.1.0'
implementation 'com.android.support:cardview-v7:26.1.0'

在xml布局文件中使用CardView。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="5dp"
    app:cardElevation="2dp"
    app:cardPreventCornerOverlap="true"
    app:cardUseCompatPadding="true"
    app:contentPadding="5dp"
    app:contentPaddingBottom="8dp"
    app:contentPaddingLeft="16dp"
    app:contentPaddingRight="16dp">

    <TextView
        android:id="@+id/tv_list_item_list_name"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginLeft="5dp"
        android:layout_toRightOf="@id/v_list_item_priority"
        android:gravity="center_vertical"
        android:text="清单名"
        android:textSize="20sp" />
</android.support.v7.widget.CardView>

2、CardView常用属性

app:cardBackGroundColor 设置背景颜色
app:cardCornerRadius 设置圆角大小
app:cardElevation 设置z轴阴影效果
app:cardMaxElevation 设置z轴的最大高度值
app:contentPadding 内容距离边界的距离
app:contentPaddingXXX 设置局部的内边距，代替Padding，在CardView中设置padding不起作用
app:cardUseCompatPadding 是否使用CompatPadding，如果需要将CardView与其他视图对齐，在21以下，可以将此标记为true，在21以上平台，添加相同的填充值。
app:cardPreventCornerOverlap 是否裁剪边界以防止重叠

CardView常用属性就是这些，看似不多，实质很多坑。

3、API版本带来的影响

CardView是在Android 5.0（Lollipop）也就是API 21时推出的控件，因此在Android 5.0前使用CardView要考虑适配的问题。

1. 阴影Padding

在Android 5.0之前的系统，CardView会自动添加一些额外的Padding控件来绘制阴影部分，导致了Android 5.0前后的不同系统上CardView的大小会不一样。为了解决这个问题，可以有如下方法：

①使用不同API版本的dimension资源匹配，也就是借助vales和values-21文件夹中不同的dimens.xml文件
②使用setUseCompadding熟悉，设置为ture，可以让CardView在不同系统中使用相同的padding值。

2. 圆角覆盖

在API21前CradView不会裁剪内容来满足圆角的需求，而是使用了padding的代替方案，设置了内边距，免得裁剪内容。API21以后，CardView会自动裁剪内容元素以适应圆角。
在CardView中，有个app:cardPreventCornerOverlap 的属于，设置该属性为true后，CardView将不会添加Padding。
【MaterialDesign】CardView

3. lift-on-touch

在Material Design中有一个叫触碰抬起的交互效果，也就是在z轴上发生位移，产生一个阴影加深的效果。lift-on-touch触碰抬起效果是通过改变translationZ值，沿着Z轴发生变化，就会导致阴影效果的变化：
【MaterialDesign】CardView
因为在API21中有个新的属性android:stateListAnimator，可以在API21以上系统实现lift-on-touch效果。
在CardView属性中添加：

android:stateListAnimator="@drawable/lift_on_touch"

在drawable中添加lift-on-touch.xml文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_enabled="true"
        android:state_pressed="true">
        <set>
            <objectAnimator
                android:duration="@android:integer/config_shortAnimTime"
                android:propertyName="translationZ"
                android:valueTo="6dp"
                android:valueType="floatType"/>
        </set>
    </item>
    <item>
        <set>
            <objectAnimator
                android:duration="@android:integer/config_shortAnimTime"
                android:propertyName="translationZ"
                android:valueTo="0"
                android:valueType="floatType"/>
        </set>
    </item>
</selector>