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

Material design中有一种很个性的设计概念：卡片式设计（Cards），这种设计与传统的List Item有所区别，Cards包含更多的内容元素和拥有本身的UI特征，关于Cards的设计规范能够参考官网介绍：

material.google.com/components/…

为了更好地实现这种 Cards UI 的设计，Google在v7包中引进了一种全新的控件：CardVew，本文将从开发的角度介绍CardView的一些常见使用细节。

Google用一句话介绍了CardView：一个带圆角和阴影背景的FrameLayout。CardView在Android Lollipop（API 21）及以上版本的系统中适配较好，本文咱们以一个具体的例子来学习CardView的基本使用和注意事项，效果图以下：

CardView-samples-01.png

上图展现的是一个list列表，列表中的item使用了卡片式设计，主要利用CardView控件实现，为了精简文章内容，这里咱们将item布局中的核心代码罗列出来，加以分析：

<?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" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">

    <android.support.v7.widget.CardView tools:targetApi="lollipop" android:layout_width="match_parent" android:layout_height="wrap_content" android:stateListAnimator="@drawable/lift_on_touch" android:layout_marginLeft="@dimen/dp_8" android:layout_marginRight="@dimen/dp_8" android:layout_marginBottom="@dimen/dp_8" android:clickable="true" android:foreground="?android:attr/selectableItemBackground" app:cardCornerRadius="@dimen/dp_4" app:cardUseCompatPadding="true" app:cardPreventCornerOverlap="false">

        <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content">

            <!-- image、text等其余内容 -->
            ......

        </RelativeLayout>

    </android.support.v7.widget.CardView>

</LinearLayout>复制代码

能够看出，核心部分在于CardView的属性使用，下面咱们针对几个特殊的属性逐一分析，深化了解。

排版技巧

---

前面咱们说过，CardView从本质上属于FrameLayout，而CardView一般包含了较多的内容元素，为了方便地排版布局中的各个元素，通常借助于其余基本布局容器，好比这里咱们使用了一个RelativeLayout做为CardView的惟一Child。

阴影Padding

---

在Android Lollipop以前的系统，CardView会自动添加一些额外的padding空间来绘制阴影部分，这也致使了以Lollipop为分界线的不一样系统上CardView的尺寸大小不一样。为了解决这个问题，有两种方法：第一种，使用不一样API版本的dimension资源适配（也就是借助values和values-21文件夹中不一样的dimens.xml文件）；第二种，就是使用setUseCompatPadding属性，设置为true（默认值为false），让CardView在不一样系统中使用相同的padding值。

圆角覆盖

---

这也是一个解决系统兼容的问题。在pre-Lollipop平台（API 21版本以前）上，CardView不会裁剪内容元素以知足圆角需求，而是使用添加padding的替代方案，从而使内容元素不会覆盖CardView的圆角。而控制这个行为的属性就是cardPreventCornerOverlap，默认值为true。在本例中咱们设置了该属性为false。这里咱们看一下，在pre-Lollipop平台中，不一样cardPreventCornerOverlap值的效果对比图（左false，右true）：

CardView-samples-02.png

显然，默认值下自动添加padding的方式不可取，因此须要设置该属性值为false。须要注意的一点是，该属性的设置在Lollipop及以上版本的系统中没有任何影响，除非cardUseCompatPadding的值为true。

Ripple效果

---

Cards通常都是可点击的，为此咱们使用了foreground属性并使用系统的selectableItemBackground值，同时设置clickable为true（若是在java代码中使用了cardView.setOnClickListener，就能够不用写clickable属性了），从而达到在Lollipop及以上版本系统中实现点击时的涟漪效果（Ripple），如图：

CardView-samples-03.gif

在pre-Lollipop版本中，则是一个普通的点击变暗的效果，这里就不截图展现了，若是想改变老版本的点击效果，也能够经过版本兼容的方式另行修改。

lift-on-touch

---

根据官网Material motion部分对交互动做规范的指导，Cards、Button等视图应该有一个触摸抬起（lift-on-touch）的交互效果，也就是在三维立体空间上的Z轴发生位移，从而产生一个阴影加深的效果，与Ripple效果共同使用，官网给了一个很好的示例图：

CardView-samples-04.gif

在实现这个效果也很简单，能够在res/drawable目录下创建一个lift_on_touch.xml文件，内容以下：

<?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变化。这里的6dp值也是有出处的，参考Google I/O 2014 app和Assign Elevation to Your Views。而后将其赋值给android:stateListAnimator属性便可。因为stateListAnimator属性只适用于Lollipop及以上版本，为了隐藏xml中的版本警告，能够指定tools:targetApi="lollipop"。

关于这个功能，须要补充说明一点。这里的lift_on_touch.xml，严格意义上来说，属于anim资源，同时适用于API 21及以上版本，因此按道理上来说应该将其放置在res/anim-v21目录下，而后使用@anim/lift_on_touch赋值给stateListAnimator属性，而不是例子中的@drawable/lift_on_touch方法。可是放置在res/anim-v21目录下会产生一个“错误”提示：

XML file should be in either "animator" or "drawable",not "anim"

虽然这个“错误”不影响编译运行，可是对于追求完美主义的程序员们来讲仍是碍眼，因此本例中我选择将其放在了res/drawable目录下，你们能够自行斟酌使用。

关于对lift-on-touch效果的理解，YouToBe网站有个视频解说，感兴趣的话能够参看看，地址以下：

DesignBytes: Paper and Ink: The Materials that Matter

总结说明

---

CardView还有一些其余属性可供使用，好比cardElevation设置阴影大小，contentPadding代替普通android:padding属性等，比较基础，本文就不一一介绍了，你们能够在官网上参考学习。从上面的介绍能够看出，在使用CardView时基本上都会用到一些标准配置的属性，咱们能够借助style属性，将其封装到styles.xml文件中，统一管理，好比：

<style name="AppCardView" parent="@style/CardView.Light"> <item name="cardPreventCornerOverlap">false</item> <item name="cardUseCompatPadding">true</item> <item name="android:foreground">?attr/selectableItemBackground</item> <item name="android:stateListAnimator" tools:targetApi="lollipop">@anim/lift_up</item> ...... </style>复制代码

最后，附上本文案例项目的GitHub地址：

github.com/Mike-bel/MD…

欢迎关注我

---

本文由 亦枫 创做并首发于 亦枫的我的博客 ，同步受权微信公众号：技术鸟（NiaoTech），欢迎关注。