Material Design 入门（二）——CardView

上一章我们分享了TextInputLayout和TextInputEditText的使用方法，比较简单，下面我们再来分享一个小控件CardView的用法。

1、CardView的介绍和属性

1）官方介绍：

java.lang.Object
↳	android.view.View
	↳	android.view.ViewGroup
		↳	android.widget.FrameLayout
			↳	android.support.v7.widget.CardView

CardView是Android 5.0中新出的一个控件，从上面的继承结构树中可以看出它的父类是FrameLayout，其实CardView就是在FrameLayout的基础上添加了圆角和阴影的效果。它通常被用在ListView和RecyclerView中，作为他们的itemView出现。

2）CardView介绍：

• CardView_cardBackgroundColor 设置背景色
• CardView_cardCornerRadius 设置圆角大小
• CardView_cardElevation 设置z轴阴影
• CardView_cardMaxElevation 设置z轴最大高度值
• CardView_cardUseCompatPadding 是否使用CompadPadding
• CardView_cardPreventCornerOverlap 是否使用PreventCornerOverlap
• CardView_contentPadding 内容的padding
• CardView_contentPaddingLeft 内容的左padding
• CardView_contentPaddingTop 内容的上padding
• CardView_contentPaddingRight 内容的右padding
• CardView_contentPaddingBottom 内容的底padding

补充：

card_view:cardUseCompatPadding 设置内边距，V21+的版本和之前的版本仍旧具有一样的计算方式

card_view:cardPreventConrerOverlap 在V20和之前的版本中添加内边距，这个属性为了防止内容和边角的重叠

上面是CardView的一些常用的属性，比较容易理解，直接上代码。

2、CardView的使用

1）添加CardView依赖库：

 compile 'com.android.support:cardview-v7:24.2.1'

2）在xml中使用CardView：

<?xml version="1.0" encoding="utf-8"?>
<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="5dp"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    android:clickable="true"
    app:cardCornerRadius="10dp"
    app:cardElevation="10dp">

    <LinearLayout
        style="@style/CardView.Content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/ivBook"
            android:layout_width="109dp"
            android:layout_height="135dp"
            android:src="@mipmap/ic_launcher"
            android:transitionName="书籍"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tvTitle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textAppearance="@style/TextAppearance.AppCompat.Title"
                android:textColor="@android:color/darker_gray"/>

            <TextView
                android:id="@+id/tvDesc"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="2dp"
                android:text="描述"
                android:textColor="@android:color/darker_gray"/>
        </LinearLayout>

    </LinearLayout>

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

3）效果如图：

效果还是不错的，也比较简单，大家可以动手试一下，以后再有圆角的需求就不用那么麻烦了呢。推荐大家看下这篇文章 http://www.jianshu.com/p/20ba212a5f0c