CardView是Material Design的一種卡片檢視, 以卡片形式顯示內容, 邊緣包含陰影效果, 吸引使用者點選. CardView提供了v7的支援庫, 相容低版本. 本文主要介紹CardView的使用方法.
Maven庫
|
1 |
compile 'com.android.support:cardview-v7:+' |
需要額外新增Design的支援庫, 如compile ‘com.android.support:design:23.1.0’
資原始檔
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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表示陰影的深度.
點選事件
|
1 2 3 4 5 6 7 |
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(); } }); |
波紋型的選中效果.
|
1 |
android:foreground="?attr/selectableItemBackground" |
陰影加深的選中效果
|
1 2 3 |
android:stateListAnimator="@anim/item_raise" 陰影動畫item_raise |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?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!
打賞支援我寫出更多好文章，謝謝！
打賞作者
打賞支援我寫出更多好文章，謝謝！
