MaterialDesign学习篇(七)，CardView卡片式

什么是CardView

CardView顾名思义就是一个卡片型的View，它是在Android5.0引入的一个控件，作为一个容器使用，它本身继承于FrameLayout，可以说它的使用和FrameLayout差不多，也是用来包裹一些子View，只不过它可以添加圆角和阴影的效果，经常在ListView或RecyclerView的item布局中作为容器使用，使内容看起来更加突出和显眼。

如何使用CardView

先看下效果，未使用CardView时:

使用CardView时的效果:

导入依赖

compile 'com.android.support:cardview-v7:26.0.0-alpha1'

布局文件中，使用CardView

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        app:contentPadding="5dp"
        app:cardElevation="5dp"
        app:cardCornerRadius="5dp"
        >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >

        <ImageView
            android:layout_width="150dp"
            android:layout_height="100dp"
            android:background="@mipmap/book"
            />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical"
            android:layout_marginLeft="5dp"
            android:padding="5dp"
            >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="特战先驱"
                android:textSize="16sp"
                android:textStyle="bold"
                />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="战争是血淋淋的，战争是实实在在的，战争中的每一个军人都是有血有肉的。本小说恰恰注重于战术层面和细节问题，通过一个个有血有肉的军人，演绎出一段段可歌可泣的具体的战争故事！"
                android:textSize="14sp"
                android:lines="4"
                android:ellipsize="end"
                android:layout_marginTop="5dp"
                />

        </LinearLayout>

    </LinearLayout>

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

</LinearLayout>

和使用FrameLayout一样，直接用CardView作为容器包裹，其中app:contentPadding="5dp"指定了卡片内容于边距的间隔为5dp，app:cardElevation="5dp"指定了卡片阴影的大小为5dp，app:cardCornerRadius="5dp"指定了卡片的圆角大小为5dp。是不是看起来有种卡片的形状，相比没有添加CardView,是不是显得比较好看。

CardView的一些属性说明

   属性                             说明

cardBackgroundColor              卡片的背景颜色

cardCornerRadius                 卡片的圆角大小

cardElevation                    阴影的大小

cardMaxElevation                 阴影最大高度

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

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

contentPadding                   卡片内容于边距的间隔

contentPaddingTop                卡片内容与顶部的边距

contentPaddingBottom             卡片内容与底部的边距

contentPaddingLeft               卡片内容与左边的边距

contentPaddingRight              卡片内容与右边的边距 

本文对CardView做了简单的介绍，并演示了它的效果，需要源码的可以查看:

https://github.com/chaychan/MaterialDesignExercise