CardView开发中需要注意的地方

2014 年，随着 Google 推出了全新的设计语言 Material Design，还迎来了新的 Android 支持库 v7，其中就包含了 Material Design 设计语言中关于 Card 卡片概念的实现 —— CardView。经历了相当长的一段时间相信许多 Android 开发者都已经应用了这个控件，现在才写这篇文章可能有点晚，但对于刚刚开始使用的开发者以及其他已经使用了一段时间但做出来效果不好的同学应该能帮上点小忙。

1.不同SDK版本（低于 Lollipop 21）边距效果的差异
CardView立体悬浮的效果是通过设置app:cardElevation属性实现的（代码中setCardElevation）。但是，低版本中CardView会自动预留空间来显示阴影，而高版本中需要手动设置边距来显示阴影。这样就导致我们在设置CardView之间的间距时出现异常。例如，设置CardView的cardElevation = 10dp,marginTop = 20dp,那么在低版本中CardView距上方控件的大小就为30dp(预留了cardElevation来显示阴影)，而在API 21之上CardView距上方控件的大小就只为20dp。那么CardView该如何统一不同系统版本的视觉效果呢？

解决方案：我们需要自定义一个 dimen 作为 CardView 的 Margin 值：

1. 创建 /res/value 和 /res/value-v21 资源文件夹于项目对应 Module 目录下，前者放置旧版本/通用的资 源文件（了解的可以跳过），后者放置 21 及更高 SDK 版本的资源文件。
2. 在 value 内的 dimen.xml 创建一个 Dimension （ 属性），随便命个名（如 xxx_card_margin）并填入数值 0dp。
3. 接着在 value-v21 文件夹内的 dimen.xml 创建名字相同的 Dimension，并填入你期望的预留边距（一般和 CardElevation 阴影大小相同）
4. 最后，在你布局中的 CardView 中设置android:layout_marginTop=”@dimen/xxx_card_margin”

2.为你的 Card 添加点击效果
当使用 CardView 的场合是作为列表中的一个 Item 且直接单击 Item 有相应的操作，那么就有必要加上视觉反馈来告诉用户这个 Card 是可点击的。

如果你是用了 AppCompat v7 支持库,那么你可以直接给 CardView 加上 android:foreground=”?attr/selectableItemBackground” 这个属性会在 API 21上自动加上 Ripple 效果，而在旧版本则是一个变深/变亮的效果。

如果你想在点击CardView时有一个浮起的效果，即增大Z轴的位移。效果如下，

我们只需要借助 Lollipop 的一个新属性android:stateListAnimator（PS：这也意味着这个方法不可以用于旧版本系统QAQ）。具体流程：

• 创建一个 TranslationZ 的变换动画放在 /res/anim，自己取一个名（如 touch_raise.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">
    <objectAnimator
    android:duration="@android:integer/config_shortAnimTime"
    android:propertyName="translationZ"
    android:valueTo="@dimen/touch_raise"
    android:valueType="floatType" />
  </item>
  <item>
    <objectAnimator
    android:duration="@android:integer/config_shortAnimTime"
    android:propertyName="translationZ"
    android:valueTo="0dp"
    android:valueType="floatType" />
  </item>
</selector>

• 然后为你需要添加效果的 CardView（其他 View 同理）所在的 Layout XML 复制多一份到 /res/layout-v21，然后在新的那份 XML 的 CardView 中加入属android:stateListAnimator=”@anim/touch_raise”。
  这样，你的卡片按住时就会有浮起（阴影加深）的效果了。

到此，就是本篇文章所有内容。

参考文章：
关于使用 CardView 开发过程中要注意的细节