還記得我們一共學過了多少UI控制元件了嗎？都掌握的怎麼樣啊。

    安卓中一些常用控制元件學習得差不多了，今天再來學習一個新的控制元件CardView，在實際開發中也有非常高的地位。

一、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);
    }
}

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

    至此，CardView的學習到此告一段落，是不是發現使用起來也非常簡單，更多用法建議自己去摸索。

    今天就先到這裡，如果有問題歡迎留言一起探討，也歡迎加入Android零基礎入門技術討論微信群，共同成長！

   此文章版權為微信公眾號分享達人秀（ShareExpert）——鑫鱻所有，若需轉載請聯絡作者授權，特此宣告！

往期總結分享：

Android零基礎入門第17節：文字框TextView

Android零基礎入門第18節：輸入框EditText

Android零基礎入門第19節：按鈕Button

Android零基礎入門第37節：初識ListView

Android零基礎入門第38節：初識Adapter