CardView使用要點

CardView是一種卡片視圖, 主要是以卡片形式顯示內容, 讓我們先看看效果吧. CardView目前是全版本支持的控件.

Maven庫
compile 'com.android.support:cardview-v7:+'

資源文件

    <android.support.v7.widget.CardView
        android:id="@+id/card_view"
        android:layout_width="320dp"
        android:layout_height="180dp"
        android:layout_centerInParent="true"
        android:foreground="?attr/selectableItemBackground"
        android:stateListAnimator="@anim/item_raise"
        app:cardCornerRadius="4dp"
        app:cardElevation="4dp">

        <TextView
            android:id="@+id/info_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="CLWang"/>
    </android.support.v7.widget.CardView>

app:cardCornerRadius表示卡片的弧度.
app:cardElevation表示陰影的深度.

點擊事件

        CardView cardView = (CardView) findViewById(R.id.card_view);
        cardView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "This is a card view!", Toast.LENGTH_LONG).show();
            }
        });

波紋型的選中效果.

android:foreground="?attr/selectableItemBackground"

陰影加深的選中效果

android:stateListAnimator="@anim/item_raise"

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item  android:state_enabled="true" android:state_pressed="true">
        <objectAnimator  android:duration="@android:integer/config_shortAnimTime" android:propertyName="translationZ" android:valueTo="8dp" android:valueType="floatType"/>
    </item>
    <item>
        <objectAnimator  android:duration="@android:integer/config_shortAnimTime" android:propertyName="translationZ" android:valueTo="0dp" android:valueType="floatType"/>
    </item>
</selector>

選中時, Z軸逐漸升起; 未選中時, Z軸恢復0. 動畫屬性支持api21+.

注意
不同版本顯示效果不同時, 定制/res/value和 /res/value-v21的資源.

設計要點, CardView主要突出不同種類的卡片在一起顯示, 盡量不要使用單一的模式, 如固定高度的卡片, 類似ListView的顯示.

That’s all! Enjoy it!