CardView控件的使用方式
CardView是Material Design的一种卡片视图, 以卡片形式显示内容, 边缘包含阴影效果, 吸引用户点击. CardView提供了v7的支持库, 兼容低版本. 本文主要介绍CardView的使用方法.
更多: http://www.wangchenlong.org/
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"
阴影动画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!
生活
有技术又要有生活, 美让生活更精彩!
女生, 让自己更职业受欢迎! 好物
正文到此结束
热门推荐
相关文章
Loading...
![[HBLOG]公众号](http://www.liuhaihua.cn/img/qrcode_gzh.jpg)
