簡(jiǎn)介

CardView 是 Android 5.0 引進(jìn)的一種卡片式布局控件椅野，是一個(gè)帶有圓角和陰影效果的FrameLayout螃概。

CardView

從 CardView 的文檔中可以看到掰读，它是存在于 support.v7 包中的扁凛，因此引進(jìn)方式為：

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

CardView 具備 材料設(shè)計(jì)特性病附，陰影（Elevation）和 Z軸位移，目的就是突出不同元素之間的層次關(guān)系峰髓，看起來有立體的感覺傻寂。因此其使用場(chǎng)景一般是用在需要凸顯層次性內(nèi)容布局，比如在顯示列表或網(wǎng)格布局時(shí)携兵，使用 CardView 就可以方便用戶依據(jù)這些邊緣特征更容易去區(qū)分內(nèi)容主體疾掰。

CardView 屬性簡(jiǎn)析

下面列舉一些 CardView 的屬性特性：

這里著重對(duì) CardView 的兩個(gè)屬性講解一下：

• CardView_cardUseCompatPadding - 陰影內(nèi)邊距：
  如果你為 CardView 指定了具體的大小，在 Android Lollipop 之前的系統(tǒng)徐紧，CardView 會(huì)自動(dòng)添加一些額外的padding空間來繪制陰影部分静檬，導(dǎo)致內(nèi)容元素在 Lollipop 之前與之后的系統(tǒng)中大小可能不同炭懊。
  要解決這個(gè)問題，一個(gè)方法是使用不同 AP I版本的 dimension 資源適配（也就是借助 values 和 values-21 文件夾中不同的 dimens.xml 文件）拂檩，或者侮腹，如果你想要為 CardView 在 Lollipop 及其之后的系統(tǒng)上同樣增加一個(gè)內(nèi)邊距，可以通過設(shè)置CardView_cardUseCompatPadding="true"（其默認(rèn)值為false）广恢。

• CardView_cardPreventCornerOverlap - 圓角覆蓋：
  在 pre-Lollipop 平臺(tái)（API 21版本）之前凯旋，CardView 不會(huì)裁剪內(nèi)容元素以滿足圓角需求，而是增加一個(gè)padding钉迷，從而使內(nèi)容元素不會(huì)覆蓋 CardView 的圓角至非。而控制這個(gè)行為的屬性就是cardPreventCornerOverlap，默認(rèn)值為true糠聪。
  注：該屬性在 Lollipop 及以上版本的系統(tǒng)中沒有任何影響荒椭，除非設(shè)置了cardUseCompatPadding="true"。通常為了兼容低版本舰蟆，讓 CardView 在所有系統(tǒng)版本表現(xiàn)一致趣惠，則需要把CardView_cardPreventCornerOverlap設(shè)置為false，取消（低版本）自動(dòng)添加padding效果身害。但是這樣設(shè)置后味悄，內(nèi)容元素與 CardView 的圓角就會(huì)重疊到一起，導(dǎo)致圓角消失（被內(nèi)容元素覆蓋）塌鸯。因此侍瑟，如果還想要有圓角效果，考慮對(duì)內(nèi)容元素進(jìn)行圓角裁剪丙猬。

綜上涨颜，為了系統(tǒng)兼容，使得高低版本系統(tǒng)中茧球，CardView 的表現(xiàn)具備一致性庭瑰，通常要添加如下兩個(gè)配置：

//為 Lollipop 及其以上版本增加一個(gè)陰影padding
CardView_cardUseCompatPadding="true"
//取消 Lollipop 以下版本的padding
CardView_cardPreventCornerOverlap="false"

其他注意事項(xiàng)：

• CardView 無法使用android:background設(shè)置背景，可以通過app:cardBackgroundColor屬性進(jìn)行設(shè)置抢埋。

• 在 Android Lollipop之前的系統(tǒng)中弹灭，CardView 自動(dòng)為內(nèi)容元素添加一個(gè)padding作為陰影效果。這個(gè)padding的大小為：
  ? 左右內(nèi)邊距：maxCardElevation + (1 - cos45) * cornerRadius
  ?上下內(nèi)邊距：maxCardElevation * 1.5 + (1 - cos45) * cornerRadius

由于padding已被用作陰影效果揪垄，因此鲤屡，你無法使用android:padding為 CardView 增加一個(gè)內(nèi)邊距，而是應(yīng)當(dāng)通過配置XML方式：CardView_contentPaddingXXX或者代碼調(diào)用setContentPadding(int,int,int,int)進(jìn)行設(shè)置福侈。

CardView 使用

首先給出 CardView 最簡(jiǎn)布局：

<?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

因?yàn)闆]有對(duì) CardView 進(jìn)行特殊設(shè)置，這里它表現(xiàn)出來的就是一個(gè)ViewGroup的效果卢未，只能用來容納子控件肪凛。

下面我們?yōu)?CardView 增加一些屬性設(shè)置堰汉，來看下效果：

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

CardView_radius

• 陰影效果：app:cardElevation="10dp"伟墙，效果如下：

CardView_elevation

• 漣漪效果（Ripple）:

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

漣漪效果需要點(diǎn)擊產(chǎn)生翘鸭，因此這里首先要求 Cards 是可點(diǎn)擊的（clickable="true"）。

效果如下圖所示：

CardView_ripple

漣漪效果（Ripple）只在 Android 5.0 之后有效戳葵，在pre-Lollipop版本中就乓，則是一個(gè)普通的點(diǎn)擊變暗的效果。

如果想同時(shí)實(shí)現(xiàn)高低版本的漣漪效果（Ripple）拱烁，可以通過自定義 CardView 前景：具體原理是生蚁，在 Android 5.0 及其之后版本，直接使用ripple即可戏自。在 Android 5.0 之前邦投，沒有ripple，則采用inset進(jìn)行代替擅笔。

具體做法如下：

• Android 5.0 及其之后版本：

1. 首先創(chuàng)建一個(gè) 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. 然后創(chuàng)建一個(gè)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. 同樣首先創(chuàng)建一個(gè) 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. 然后創(chuàng)建一個(gè)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"/>

• 動(dòng)畫效果：根據(jù)官網(wǎng) Material motion 部分對(duì)交互動(dòng)作規(guī)范的指導(dǎo)绿店，Cards、Button 等視圖應(yīng)該有一個(gè)觸摸抬起（ lift-on-touch）的交互效果耳胎，也就是在三維立體空間上的Z軸發(fā)生位移惯吕，從而產(chǎn)生一個(gè)陰影加深的效果，與Ripple效果共同使用怕午。
  要實(shí)現(xiàn) lift-on-touch 動(dòng)畫效果废登，首先需要設(shè)置一個(gè) 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>

其實(shí)就是通過屬性動(dòng)畫動(dòng)態(tài)改變translationZ值郁惜，沿著Z軸堡距，從0dp到6dp變化。

最后通過android:stateListAnimator="@drawable/lift_on_touch"設(shè)置給 CardView兆蕉。

效果如下：

lift_on_touch

總結(jié)

一般使用 CardView 時(shí)羽戒，通常都會(huì)設(shè)置其漣漪效果（Ripple），lift_on_touch 動(dòng)畫效果以及高低版本系統(tǒng)兼容性等等虎韵，這些基本上算是標(biāo)準(zhǔn)配置屬性易稠，那么我們就可以將這些屬性配置放入到一個(gè) 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"設(shè)置給 CardView 即可驶社。

示例

最后結(jié)合一個(gè)例子企量，來看下 CardView 的顯示效果。

例子：使用 RecyclerView 結(jié)合 CardView 進(jìn)行圖片展示亡电，效果如下所示：

參考

• 官方文檔 - CardView

• Cards 設(shè)計(jì)規(guī)范

• Android 使用CardView輕松實(shí)現(xiàn)卡片式設(shè)計(jì)

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

• Android面試題-CardView 設(shè)置水波紋效果