目录:
- CardView简介
- CardView基本属性(xml文件中)
- 某些属性使用效果
- CardView使用方法
- 高级效果 波纹点击(像点击Button那样)
- 注意 对低版本的兼容处理
CardView简介
- CardView是API21(Android5.0)发布的卡片式控件。简单的说就是卡片视图,扁平化视图。
- 继承自FrameLayout
public class CardView extends FrameLayout
- CardView可以作为根布局使用,也可以作为ReCycleView或者ListView的Item
CardView基本属性(xml文件中)
- app:cardBackgroundColor这是设置背景颜色
app:cardCornerRadius这是设置圆角大小
app:cardElevation这是设置阴影(z轴),具体效果见下面
app:contentPadding 设置内容的padding CardView子布局与CardView边界
app:contentPaddingLeft 设置内容的左padding
app:contentPaddingTop 设置内容的上padding
app:contentPaddingRight 设置内容的右padding
app:contentPaddingBottom 设置内容的底padding
app:cardUseCompatPadding 是否使用CompatPadding, 官方说是设置内边距,个人感觉不到什么,具体效果见下面
app:cardPreventCornerOverlap 是否使用PreventCornerOverlap,设置内边距(API20及以下中),通常该属性为了避免内容和边角的重叠
某些属性使用效果
-
阴影Elevation
- app:contentPadding CardView子布局与CardView边界
-
app:cardUseCompatPadding 设置内边距
CardView使用方法
当前IDE:Android Studio 2.2正式版
jdk1.8.102
compileSdkVersion 25
buildToolsVersion "25.0.2"
gradle 导包
dependencies {
...
compile 'com.android.support:cardview-v7:25.2.0'
}
CardView是通常是定义在布局文件中:
<RelativeLayout
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:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical|center_horizontal"
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="com.minminaya.cardview_learning.MainActivity">
<android.support.v7.widget.CardView
android:id="@+id/w"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardCornerRadius="10dp"
app:cardElevation="10dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@mipmap/me"/>
</android.support.v7.widget.CardView>
</RelativeLayout>
通常情况下,只需要radius与elevation就可以达到很漂亮的卡片效果,甚至悬浮式的
当然,也可以在code中使用:
public void setRadius(float radius)
public void setContentPadding
public void setUseCompatPadding(boolean useCompatPadding)
public void setCardBackgroundColor(@ColorInt int color)
...
高级效果 波纹点击(像点击Button那样)
- 默认CardView的android:clickable属性是false的,也就是默认不可以点击,没有任何触摸反馈
实现方法:
在CardView布局文件节点添加
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground"
gif图录了看不出来就不放图了QAQ
注意 对低版本的兼容处理
CardView在API 21以下,圆角效果会丢失:
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardCornerRadius="25dp" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@mipmap/me"/>
</android.support.v7.widget.CardView>
不同安卓版本的效果:
- 可以看出很明显API19(4.4)出现很大的问题:虽然有圆角效果,但是图片四周是方的
解决方法:
- 在CardView布局里添加cardPreventCornerOverlap(默认是true)属性,值为false
cardPreventCornerOverlap官方文档的意思是说在API20及更低版本中添加内边距,其实这个属性是为了防止卡片内容和边角的重叠
加了之后变成了这样:
!!!!预警
这和以前竟然不一样了,以前是图片的直角压在了卡片圆角上,而且直角还是在CardView外面,好吧,估计是Android官方优化了一下,现在是卡片效果但是会多出一条白边,啊哈哈哈哈哈啊
大召唤术。。。。借用一张图---------
如果遇到这个问题去CardView在API 21以下的圆角效果处理
本篇完