Material Design系列教程（12） - CardVi

简介

CardView 是 Android 5.0 引进的一种卡片式布局控件，是一个带有圆角和阴影效果的FrameLayout。

CardView

从 CardView 的文档中可以看到，它是存在于 support.v7 包中的，因此引进方式为：

implementation 'com.android.support:cardview-v7:<version>'

CardView 具备 材料设计特性，阴影（Elevation）和 Z轴位移，目的就是突出不同元素之间的层次关系，看起来有立体的感觉。因此其使用场景一般是用在需要凸显层次性内容布局，比如在显示列表或网格布局时，使用 CardView 就可以方便用户依据这些边缘特征更容易去区分内容主体。

CardView 属性简析

下面列举一些 CardView 的属性特性：

属性	释义
CardView_cardBackgroundColor	设置背景颜色
CardView_cardCornerRadius	设置圆角大小
CardView_cardElevation	设置z轴的阴影
CardView_cardMaxElevation	设置z轴阴影的最大高度值
CardView_contentPadding	设置内容的内边距
CardView_contentPaddingBottom	设置内容的底内边距
CardView_contentPaddingLeft	设置内容的左内边距
CardView_contentPaddingRight	设置内容的右内边距
CardView_contentPaddingTop	设置内容的上内边距
CardView_cardUseCompatPadding	是否使用CompatPadding
CardView_cardPreventCornerOverlap	是否取消圆角覆盖

这里着重对 CardView 的两个属性讲解一下：

• CardView_cardUseCompatPadding - 阴影内边距：
  如果你为 CardView 指定了具体的大小，在 Android Lollipop 之前的系统，CardView 会自动添加一些额外的padding空间来绘制阴影部分，导致内容元素在 Lollipop 之前与之后的系统中大小可能不同。
  要解决这个问题，一个方法是使用不同 AP I版本的 dimension 资源适配（也就是借助 values 和 values-21 文件夹中不同的 dimens.xml 文件），或者，如果你想要为 CardView 在 Lollipop 及其之后的系统上同样增加一个内边距，可以通过设置CardView_cardUseCompatPadding="true"（其默认值为false）。

• CardView_cardPreventCornerOverlap - 圆角覆盖：
  在 pre-Lollipop 平台（API 21版本）之前，CardView 不会裁剪内容元素以满足圆角需求，而是增加一个padding，从而使内容元素不会覆盖 CardView 的圆角。而控制这个行为的属性就是cardPreventCornerOverlap，默认值为true。
  注：该属性在 Lollipop 及以上版本的系统中没有任何影响，除非设置了cardUseCompatPadding="true"。通常为了兼容低版本，让 CardView 在所有系统版本表现一致，则需要把CardView_cardPreventCornerOverlap设置为false，取消（低版本）自动添加padding效果。但是这样设置后，内容元素与 CardView 的圆角就会重叠到一起，导致圆角消失（被内容元素覆盖）。因此，如果还想要有圆角效果，考虑对内容元素进行圆角裁剪。

综上，为了系统兼容，使得高低版本系统中，CardView 的表现具备一致性，通常要添加如下两个配置：

//为 Lollipop 及其以上版本增加一个阴影padding
CardView_cardUseCompatPadding="true"
//取消 Lollipop 以下版本的padding
CardView_cardPreventCornerOverlap="false"

其他注意事项：

• CardView 无法使用android:background设置背景，可以通过app:cardBackgroundColor属性进行设置。

• 在 Android Lollipop之前的系统中，CardView 自动为内容元素添加一个padding作为阴影效果。这个padding的大小为：
    左右内边距：maxCardElevation + (1 - cos45) * cornerRadius
   上下内边距：maxCardElevation * 1.5 + (1 - cos45) * cornerRadius

由于padding已被用作阴影效果，因此，你无法使用android:padding为 CardView 增加一个内边距，而是应当通过配置XML方式：CardView_contentPaddingXXX或者代码调用setContentPadding(int,int,int,int)进行设置。

CardView 使用

首先给出 CardView 最简布局：

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <android.support.v7.widget.CardView
        android:layout_width="300dp"
        android:layout_height="300dp"
        app:cardPreventCornerOverlap="false"
        app:cardUseCompatPadding="true">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#FFFF00"
            android:gravity="center"
            android:text="I am in CardView"
            android:textSize="20sp" />
    </android.support.v7.widget.CardView>

</LinearLayout>

效果如下：

CardView

因为没有对 CardView 进行特殊设置，这里它表现出来的就是一个ViewGroup的效果，只能用来容纳子控件。

下面我们为 CardView 增加一些属性设置，来看下效果：

• 圆角效果：app:cardCornerRadius="10dp"，效果如下：

CardView_radius

• 阴影效果：app:cardElevation="10dp"，效果如下：

CardView_elevation

• 涟漪效果（Ripple）:

android:clickable="true"
android:foreground="?attr/selectableItemBackground"

涟漪效果需要点击产生，因此这里首先要求 Cards 是可点击的（clickable="true"）。

效果如下图所示：

CardView_ripple

涟漪效果（Ripple）只在 Android 5.0 之后有效，在pre-Lollipop版本中，则是一个普通的点击变暗的效果。

如果想同时实现高低版本的涟漪效果（Ripple），可以通过自定义 CardView 前景：具体原理是，在 Android 5.0 及其之后版本，直接使用ripple即可。在 Android 5.0 之前，没有ripple，则采用inset进行代替。

具体做法如下：

• Android 5.0 及其之后版本：

1. 首先创建一个 selector，位置：drawable-v21/card_foreground_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#18ffc400"/>
        </shape>
    </item>
    <item android:state_focused="true" android:state_enabled="true">
        <shape android:shape="rectangle">
            <solid android:color="#0f000000"/>
        </shape>
    </item>
</selector>

2. 然后创建一个ripple，引用上面的 selector，位置：drawable-v21/card_foreground.xml：

<ripple xmlns:android="http://schemas.android.com/apk/res/android" 
android:color="#20000000"
android:drawable="@drawable/card_foreground_selector" />

• Android 5.0 之前版本：

1. 同样首先创建一个 selector，位置：drawable/card_foreground_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#1838f508"/>
            <corners android:radius="@dimen/card_radius" />
        </shape>
    </item>
    <item android:state_focused="true" android:state_enabled="true">
        <shape android:shape="rectangle">
            <solid android:color="#0f000000"/>
            <corners android:radius="@dimen/card_radius" />
        </shape>
    </item>
</selector>

2. 然后创建一个inset，引用上面的 selector，位置：drawable/card_foreground.xml：

<inset xmlns:android="http://schemas.android.com/apk/res/android" 
    android:drawable="@drawable/card_foreground_selector"
    android:insetLeft="2dp"
    android:insetRight="2dp"
    android:insetTop="4dp"
    android:insetBottom="4dp"/>

• 动画效果：根据官网 Material motion 部分对交互动作规范的指导，Cards、Button 等视图应该有一个触摸抬起（ lift-on-touch）的交互效果，也就是在三维立体空间上的Z轴发生位移，从而产生一个阴影加深的效果，与Ripple效果共同使用。
  要实现 lift-on-touch 动画效果，首先需要设置一个 selector，位于：res/drawable：

<?xml version="1.0" encoding="utf-8"?>
<!-- animate the translationZ property of a view when pressed -->
<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>

其实就是通过属性动画动态改变translationZ值，沿着Z轴，从0dp到6dp变化。

最后通过android:stateListAnimator="@drawable/lift_on_touch"设置给 CardView。

效果如下：

lift_on_touch

总结

一般使用 CardView 时，通常都会设置其涟漪效果（Ripple），lift_on_touch 动画效果以及高低版本系统兼容性等等，这些基本上算是标准配置属性，那么我们就可以将这些属性配置放入到一个 style 中，直接提供给 CardView 使用即可。

    <style name="AppCardView" parent="@style/CardView.Light">
        <item name="cardPreventCornerOverlap">false</item>
        <item name="cardUseCompatPadding">true</item>
        <item name="android:clickable">true</item>
        <item name="android:foreground">?attr/selectableItemBackground</item>
        <item name="android:stateListAnimator" tools:targetApi="lollipop">@drawable/lift_on_touch</item>
    </style>

最后通过style="@style/AppCardView"设置给 CardView 即可。

示例

最后结合一个例子，来看下 CardView 的显示效果。

例子：使用 RecyclerView 结合 CardView 进行图片展示，效果如下所示：

参考

• 官方文档 - CardView

• Cards 设计规范

• Android 使用CardView轻松实现卡片式设计

• 卡片式控件CardView&源码分析

• Android面试题-CardView 设置水波纹效果