Android MD控件之CardView

一、前言

CardView是Android5.0中的一个全新控件，是一种卡片的视图，就是知乎日报首页的风格（下图），从本质上看，可以将CardView看做是FrameLayout在自身之上添加了圆角和阴影效果。有了它，我们即便没有特别好的美感，也可以做出效果很不错的界面。

二、效果展示

一般来说，CardView是配合RecyclerView作为Item来使用的，用来显示有层次的内容，或者列表和网格。那么，想来看一下这个展示demo 的效果，还是很不错的吧。

---

三、使用方法

Android Studio添加CardView引用

dependencies {  compile 'com.android.support:cardview-v7:23.1.1'}

Demo的item.xml布局代码

<android.support.v7.widget.CardView 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="wrap_content"                                    android:layout_marginBottom="2dp"                                    android:layout_marginLeft="5dp"                                    android:layout_marginRight="5dp"                                    android:layout_marginTop="2dp"                                    app:cardBackgroundColor="#FFF"                                    app:cardCornerRadius="10dp"                                    app:cardUseCompatPadding="true"                                    app:contentPadding="10dp"                                    app:elevation="1dp">    <LinearLayout        android:id="@+id/ll_item_container"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="horizontal">        <ImageView            android:id="@+id/iv_item_icon"            android:layout_width="50dp"            android:layout_height="50dp"            android:layout_gravity="center_vertical|left"            android:layout_marginRight="15dp"            android:background="@drawable/img1"            />        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:orientation="vertical"            android:layout_gravity="right"            >            <TextView                android:id="@+id/tv_item_content"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:text="CardView挺好看"                android:singleLine="true"                android:ellipsize="end"                android:layout_marginTop="5dp"                android:textColor="#000"                android:textSize="18sp"                />            <TextView                android:id="@+id/tv_item_duration"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:gravity="center_vertical"                android:text="15sec"                android:layout_marginTop="2dp"                android:textColor="#FFFA7777"                android:textSize="15sp"                />        </LinearLayout>    </LinearLayout></android.support.v7.widget.CardView>

其他可以暂时不用管它，这里讲一下使用到的CardView的几个属性：基本都是看到名字就知道意思了，剩下的后面会统一讲。
cardBackgroundColor：设置card背景颜色
cardCornerRadius：设置卡片的圆角大小
contentPadding：设置卡片内容于边距的间隔
cardUseCompatPadding：最需要注意的属性,它在5.0以下的系统中默认是true, 但在5.0系统中默认为false,如果不设置 app:cardUseCompatPadding=”true”的话会造成在5.0系统的Android手机上不能看到阴影效果。

四、CardView属性介绍

属性名 功能 android:cardCornerRadius 设置card圆角的大小 android:cardBackgroundColor 设置card背景颜色 android:elevation 设置阴影的大小 card_view:cardElevation 设置card背景颜色 card_view:cardMaxElevation 设置card背景颜色 card_view:contentPadding 设置card背景颜色 card_view:contentPaddingBottom 设置卡片内容于下边距的间隔 card_view:contentPaddingTop 设置卡片内容于上边距的间隔 card_view:contentPaddingLeft 设置卡片内容于左边距的间隔 card_view:contentPaddingRight 设置卡片内容于右边距的间隔 card_view:contentPaddingStart 设置卡片内容于边距的间隔起始 card_view:contentPaddingEnd 设置卡片内容于边距的间隔终止 card_view:cardUseCompatPadding 设置内边距，V21+的版本和之前的版本仍旧具有一样的计算方式 card_view:cardPreventConrerOverlap 设置内边距，在V20和之前的版本中添加内边距，这个属性为了防止内容和边角的重叠

波纹点击效果：

开发中你可能需要使用到点击的波纹效果，默认情况，CardView是不可点击的，并且没有任何的触摸反馈效果。
实现这种行为，必须提供一下属性:android:clickable和android:foreground。

<android.support.v7.widget.CardView  xmlns:android="http://schemas.android.com/apk/res/android"  xmlns:card_view="http://schemas.android.com/apk/res-auto"  ...  android:clickable="true"  android:foreground="?android:attr/selectableItemBackground">  ...</android.support.v7.widget.CardView>

使用的注意实现：

• 对于在低版本中，设置了CardElevation后，CardView会自动留出空间供阴影显示，但对于Android L版本，就需要手动设置Margin边距来预留空间，这样的结果就是在Android 5.0以上的手机上可以正常显示，但对于Android 4.4.x的手机上就发现边距很大，导致浪费了屏幕空间。

• 解决上面问题，需要我们做适配。可以在/res/value和/res/value-v21分别创建dimens.xml文件，在dimens.xml里，随意命名，对于Android 5.0以上的设置数值0dp，对于Android 5.0以下的设置数值（根据实际需求）。这样就解决低版本中边距过大或者视觉效果不好的问题了。

五、总结和源码下载：

基本上CardView的使用就到这里了，至于这里用到的RecyclerView的使用会在后面的文章中继续更新，敬请期待！
源码下载