歡迎Follow我的GitHub, 關(guān)注我的簡(jiǎn)書(shū). 其余參考Android目錄.
CardView
本文的合集已經(jīng)編著成書(shū)，高級(jí)Android開(kāi)發(fā)強(qiáng)化實(shí)戰(zhàn)锭部，歡迎各位讀友的建議和指導(dǎo)凌受。在京東即可購(gòu)買(mǎi)：https://item.jd.com/12385680.html
Android
CardView是一種卡片視圖, 主要是以卡片形式顯示內(nèi)容, 讓我們先看看效果吧. CardView目前是全版本支持的控件.
Maven庫(kù)
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表示陰影的深度.
點(diǎn)擊事件
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>
選中時(shí), Z軸逐漸升起; 未選中時(shí), Z軸恢復(fù)0. 動(dòng)畫(huà)屬性支持api21+.
注意
不同版本顯示效果不同時(shí), 定制/res/value和 /res/value-v21的資源.
設(shè)計(jì)要點(diǎn), CardView主要突出不同種類(lèi)的卡片在一起顯示, 盡量不要使用單一的模式, 如固定高度的卡片, 類(lèi)似ListView的顯示.
That's all! Enjoy it!
