Android CardView的使用细节

   <p>Material design中有一种很个性的设计概念：卡片式设计（Cards），这种设计与传统的List Item有所区别，Cards包含更多的内容元素和拥有自己的UI特征。</p>    <p>为了更好地实现这种 Cards UI 的设计，Google在v7包中引进了一种全新的控件： CardVew ，本文将从开发的角度介绍CardView的一些常见使用细节。</p>    <p>Google用一句话介绍了CardView：一个带圆角和阴影背景的FrameLayout。CardView在Android Lollipop（API 21）及以上版本的系统中适配较好，本文我们以一个具体的例子来学习CardView的基本使用和注意事项，效果图如下：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/d9c6f16f36247424c0a4d5d383c899d2.png"></p>    <p>上图展示的是一个list列表，列表中的item使用了卡片式设计，主要利用CardView控件实现，为了精简文章内容，这里我们将item布局中的核心代码罗列出来，加以分析：</p>    <pre>  <code class="language-xml"><?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>  </code></pre>    <p>可以看出，核心部分在于CardView的属性使用，下面我们针对几个特殊的属性逐一分析，深化了解。</p>    <h2><strong>排版技巧</strong></h2>    <p>前面我们说过，CardView从本质上属于FrameLayout，而CardView通常包含了较多的内容元素，为了方便地排版布局中的各个元素，一般借助于其他基本布局容器，比如这里我们使用了一个 RelativeLayout 作为CardView的唯一Child。</p>    <h2><strong>阴影Padding</strong></h2>    <p>在Android Lollipop之前的系统，CardView会自动添加一些额外的padding空间来绘制阴影部分，这也导致了以Lollipop为分界线的不同系统上CardView的尺寸大小不同。为了解决这个问题，有两种方法：第一种，使用不同API版本的dimension资源适配（也就是借助values和values-21文件夹中不同的dimens.xml文件）；第二种，就是使用 setUseCompatPadding 属性，设置为true（默认值为false），让CardView在不同系统中使用相同的padding值。</p>    <h2><strong>圆角覆盖</strong></h2>    <p>这也是一个解决系统兼容的问题。在pre-Lollipop平台（API 21版本之前）上，CardView不会裁剪内容元素以满足圆角需求，而是使用添加padding的替代方案，从而使内容元素不会覆盖CardView的圆角。而控制这个行为的属性就是cardPreventCornerOverlap，默认值为true。在本例中我们设置了该属性为false。这里我们看一下，在pre-Lollipop平台中，不同cardPreventCornerOverlap值的效果对比图（左false，右true）：</p>    <p><img src="https://simg.open-open.com/show/bad78408db2cd78e7ce36308e992ae42.png"></p>    <p>显然，默认值下自动添加padding的方式不可取，所以需要设置该属性值为false。需要注意的一点是，该属性的设置在Lollipop及以上版本的系统中没有任何影响，除非cardUseCompatPadding的值为true。</p>    <h2><strong>Ripple效果</strong></h2>    <p>Cards一般都是可点击的，为此我们使用了foreground属性并使用系统的selectableItemBackground值，同时设置clickable为true（如果在java代码中使用了cardView.setOnClickListener，就可以不用写clickable属性了），从而达到在Lollipop及以上版本系统中实现点击时的涟漪效果（Ripple），如图：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/2acc1ba7c459d8a2708fe24921d7e944.gif"></p>    <p>在pre-Lollipop版本中，则是一个普通的点击变暗的效果，这里就不截图展示了，如果想改变老版本的点击效果，也可以通过版本兼容的方式另行修改。</p>    <h2><strong>lift-on-touch</strong></h2>    <p>根据官网 <a href="/misc/goto?guid=4959721410959916030" rel="nofollow,noindex">Material motion</a> 部分对交互动作规范的指导，Cards、Button等视图应该有一个触摸抬起（lift-on-touch）的交互效果，也就是在三维立体空间上的Z轴发生位移，从而产生一个阴影加深的效果，与Ripple效果共同使用，官网给了一个很好的示例图：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/48cf6ec1a740fe95695805f636d69a0a.gif"></p>    <p>在实现这个效果也很简单，可以在 res/drawable 目录下建立一个 lift_on_touch.xml 文件，内容如下：</p>    <pre>  <code class="language-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>  </code></pre>    <p>即通过属性动画动态改变translationZ值，沿着Z轴，从0dp到6dp变化。然后将其赋值给 android:stateListAnimator 属性即可。由于 stateListAnimator 属性只适用于Lollipop及以上版本，为了隐藏xml中的版本警告，可以指定 tools:targetApi="lollipop" 。</p>    <p>关于这个功能，需要补充说明一点。这里的 lift_on_touch.xml ，严格意义上来讲，属于anim资源，同时适用于API 21及以上版本，所以按道理上来讲应该将其放置在 res/anim-v21 目录下，然后使用 @anim/lift_on_touch 赋值给 stateListAnimator 属性，而不是例子中的 @drawable/lift_on_touch 方法。但是放置在 res/anim-v21 目录下会产生一个“错误”提示：</p>    <p>XML file should be in either “animator” or “drawable”,not “anim”</p>    <p>虽然这个“错误”不影响编译运行，但是对于追求完美主义的程序员们来说还是碍眼，所以本例中我选择将其放在了 res/drawable 目录下，大家可以自行斟酌使用。</p>    <h2><strong>总结说明</strong></h2>    <p>CardView还有一些其他属性可供使用，比如 cardElevation 设置阴影大小， contentPadding 代替普通 android:padding 属性等，比较基础，本文就不一一介绍了，大家可以在官网上参考学习。从上面的介绍可以看出，在使用CardView时基本上都会用到一些标准配置的属性，我们可以借助style属性，将其封装到 styles.xml 文件中，统一管理，比如：</p>    <pre>  <code class="language-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>  </code></pre>    <p> </p>    <p> </p>    <p>来自：http://yifeng.studio/2016/10/18/android-cardview/</p>    <p> </p>