一、CardView簡介

CardView是Android 5.0系統引入的控件，相當於FragmentLayout佈局控件然後添加圓角及陰影的效果。

CardView繼承自Framelayout，所以FrameLayout所有屬性CardView均可以直接拿來用，不過CardView還有自己獨有的屬性，常用屬性如下：

app:cardElevation：設置陰影的大小。
app:cardMaxElevation：設置陰影最大高度。
app:cardBackgroundColor：設置卡片的背景色。
app:cardCornerRadius：設置卡片的圓角大小。
app:contentPadding：設置內容的padding。
app:contentPaddingTop：設置內容的上padding。
app:contentPaddingLeft：設置內容的左padding。
app:contentPaddingRight：設置內容的右padding。
app:contentPaddingBottom：設置內容的底padding。
app:cardUseCompatPadding：是否使用CompatPadding。
app:cardPreventConrerOverlap：是否使用PreventCornerOverlap。

這裏有一點需要值得注意，之前學習到的控件屬性都是android:開頭的，而這裏所列的屬性是app:開頭的，如果繼續使用默認的會提示找不見對應屬性，需要我們定義一個app命名空間，在佈局文件中需要加入xmlns:app="http://schemas.android.com/apk/res-auto"語句，具體見後續案例，這裏不作過多介紹，後續再詳細學習。

二、CardView示例1

接下來通過幾個簡單的小示例程序來進一步學習CardView。

繼續使用WidgetSample工程的advancedviewsample模塊，首先需要添加支持庫，具體操作步驟同之前分享的揭開RecyclerView廬山真面目，這裏不再重複分享。這次輸入的關鍵字是cardview，即可完成CardView依賴庫的添加。

在src/main/res/layout/目錄下創建cardview_layout.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"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:text="正常使用效果"
            android:gravity="center_horizontal|center_vertical"
            android:textSize="20sp"
            android:padding="10dp"
            android:layout_margin="10dp"/>
    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        app:cardBackgroundColor="#669900"
        app:cardCornerRadius="10dp">
    <TextView
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:text="設置背景和標籤"
            android:gravity="center_horizontal|center_vertical"
            android:textSize="20sp"
            android:padding="20dp"
            android:layout_margin="10dp"/>
    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        app:cardBackgroundColor="#874528"
        app:cardElevation="20dp"
        app:cardCornerRadius="10dp">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:text="設置陰影"
            android:gravity="center_horizontal|center_vertical"
            android:textSize="20sp"
            android:padding="10dp"
            android:layout_margin="10dp"/>
    </android.support.v7.widget.CardView>
</LinearLayout>

然後新建CardViewActivity.java文件，加載上面的佈局文件，填充的代碼如下：

public class CardViewActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.cardview_layout);
    }
}

修改啓動的Activity，運行程序可以看到下圖所示效果。

三、CardView示例2

CardView被包裝爲一種佈局，並且經常在ListView和RecyclerView的Item佈局中，作爲一種容器使用。CardView應該被使用在顯示層次性的內容時；在顯示列表或網格時更應該被選擇，因爲這些邊緣可以使得用戶更容易去區分這些內容。

接下來簡單定義一個CardView的item項，並在Java代碼中修改CardView的屬性，關於結合ListView和RecyclerView的部分比較簡單，這裏不做過多介紹。

繼續再上一個案例的基礎上進行修改，修改後的cardview_layout.xml文件代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/cardview"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_margin="15dp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:scaleType="centerCrop"
        android:src="@drawable/image_01"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="10dp"
        android:layout_marginRight="10dp"
        android:clickable="true"
        android:gravity="right|bottom"
        android:text="CardView作爲item使用"
        android:textColor="@android:color/white"
        android:textSize="24sp"/>
</android.support.v7.widget.CardView>

繼續修改CardViewActivity.java文件，獲得CardView組件並動態修改其屬性，修改後的代碼如下：

package com.jinyu.cqkxzsxy.android.advancedviewsample;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.CardView;

/**
 * @創建者 鑫鱻
 * @描述 Android零基礎入門到精通系列教程，歡迎關注微信公衆號ShareExpert
 */
public class CardViewActivity extends AppCompatActivity {
    private CardView mCardView = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.cardview_layout);

        mCardView = (CardView) findViewById(R.id.cardview);

        // 設置卡片圓角的半徑大小
        mCardView.setRadius(20);
        // 設置卡片背景的顏色
        mCardView.setCardBackgroundColor(Color.RED);
        // 設置陰影部分大小
        mCardView.setCardElevation(10);
        // 設置卡片距離陰影大小
        mCardView.setContentPadding(10, 10, 10, 10);
    }
}

重新運行程序，可以得到下圖所示效果。