本文介紹CardView這個控件的使用，CardView繼承至FrameLayout類，是support-v7包下的一個類，使用時必須引入cardview依賴包。可在下載的sdk目錄中找到。。

。

使用CardView能夠實現卡片式布局效果，很好看。卡片還能夠包括圓角、陰影、背景。

CardView是一個ViewGroup，布局時包括其他的View從而實現優雅界面效果。

首先來看看個界面效果：

是不是非常美麗啊！事實上使用起來非常easy。把它作為一個普通的Layout使用就可以。

例如以下：

 <android.support.v7.widget.CardView
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        app:cardBackgroundColor="#ffffff"
        app:cardCornerRadius="10dp"
        app:cardElevation="8dp">
        <TextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="40dp"
            android:text="CardView"
            android:textSize="20sp" />
    </android.support.v7.widget.CardView>

其他的亦是如此，就不多說了。這裏為了看看CardView效果就僅僅簡單的加了一個TextView作為演示。

整個布局activity_main.xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <android.support.v7.widget.CardView
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        app:cardBackgroundColor="#ffffff"
        app:cardCornerRadius="10dp"
        app:cardElevation="8dp">
        <TextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="40dp"
            android:text="CardView"
            android:textSize="20sp" />
    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView
        android:id="@+id/card_view2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        app:cardBackgroundColor="#303069"
        app:cardCornerRadius="10dp"
        app:cardElevation="8dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="40dp"
            android:text="CardView"
            android:textSize="20sp" />
    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView
        android:id="@+id/card_view3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        app:cardBackgroundColor="#ffffff"
        app:cardCornerRadius="8dp"
        app:cardElevation="5dp">
        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="fitXY"
            android:src="@mipmap/bg" />
    </android.support.v7.widget.CardView>

</LinearLayout>

CardView mCardView = (CardView) findViewById(R.id.card_view);
        mCardView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this,"點擊了CardView",Toast.LENGTH_LONG).show();
            }
 });

• app:cardElevation 陰影的高度
• app:cardMaxElevation 陰影最大高度
• app:cardBackgroundColor 卡片的背景色
• app:cardCornerRadius 卡片的圓角大小
• app:contentPadding 卡片內容於邊距的間隔
  • app:contentPaddingBottom
  • app:contentPaddingTop
  • app:contentPaddingLeft
  • app:contentPaddingRight
  • app:contentPaddingStart
  • app:contentPaddingEnd
• app:cardUseCompatPadding 設置內邊距。V21+的版本號和之前的版本號仍舊具有一樣的計算方式
• app:cardPreventConrerOverlap 在V20和之前的版本號中加入內邊距，這個屬性為了防止內容和邊角的重疊

contentPadding 這個意思我們來看一張效果圖你就明確了:

設置：

app:contentPadding="20dp"

cardUseCompatPadding

設置：

app:cardUseCompatPadding="true"

我們從布局預覽中能夠看出。設置這個後布局往裏面縮小了一點。即有一點填充。

好了，CardView就是那麽簡單！

。！

Material Design之CardView的使用