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的使用会在后面的文章中继续更新，敬请期待！
源码下载