CardView详解
导读
本篇⽂章将介绍Android 5.0新增的组件CardView (继承于FrameLayout)
以及本⼈在开发中遇到的诡异问题
控件私有属性说明
属性说明
android.support.v7.cardview:cardBackgroundColor背景颜⾊
android.support.v7.cardview:cardCornerRadius边缘圆⾓⼤⼩
android.support.v7.cardview:cardElevation z轴的阴影
android.support.v7.cardview:cardMaxElevation z轴阴影的最⼤⾼度值android.support.v7.cardview:cardPreventCornerOverlap是否防⽌CardView ⾥的内容和和圆⾓重叠 (Api<=20) android.support.v7.cardview:cardUCompatPadding是否给CardView这个控件设置内边距 (
Api>=21) android.support.v7.cardview:contentPadding内容(⼦View)的padding android.support.v7.cardview:contentPaddingBottom内容(⼦View)的底部padding
android.support.v7.cardview:contentPaddingLeft内容(⼦View)的左侧padding
android.support.v7.cardview:contentPaddingRight内容(⼦View)的右侧padding
android.support.v7.cardview:contentPaddingTop内容(⼦View)的上部padding
控件使⽤说明
准备⼯作: moudle的adle 添加依赖库
汉牡丹园
compile 'com.android.support:cardview-v7:26.0.0-alpha1'
XML⽂件静态使⽤
<!--card_view:cardBackgroundColor 背景颜⾊-->
<!--card_view:cardCornerRadius 边缘圆⾓⼤⼩-->
<!--card_view:cardElevation z轴的阴影-->
<!--card_view:cardMaxElevation z轴阴影的最⼤⾼度值-->
<!--card_view:cardUCompatPadding 是否给CardView这个控件设置内边距 API>=21-->
<!--card_view:cardPreventCornerOverlap 是否防⽌内容和圆⾓重叠 API<=20-->
<!--card_view:contentPadding 内容(⼦View)的padding-->
<!--card_view:contentPaddingLeft 内容(⼦View)的左侧padding-->
<!--card_view:contentPaddingTop 内容(⼦View)的上部padding-->
<!--card_view:contentPaddingRight 内容(⼦View)的右侧padding-->
<!--card_view:contentPaddingBottom 内容(⼦View)的底部padding-->
<android.support.v7.widget.CardView
android:id="@+id/cardview_def"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardBackgroundColor="@color/colorPurple"
card_view:cardCornerRadius="30dp"
card_view:cardElevation="10dp"
card_view:cardMaxElevation="10dp"
card_view:cardPreventCornerOverlap="true"
card_view:cardUCompatPadding="true"
card_view:contentPadding="@dimen/content_padding"
card_view:contentPaddingBottom="@dimen/content_padding"
爱有多深card_view:contentPaddingLeft="@dimen/content_padding"
card_view:contentPaddingRight="@dimen/content_padding"
card_view:contentPaddingTop="@dimen/content_padding"
>
//dosomting
</android.support.v7.widget.CardView>
代码动态使⽤
在Activity类,findViewById 找到CardView组件，然后设置相应的属性即可
<!--card_view:cardCornerRadius 边缘圆⾓⼤⼩-->
mCardView.tRadius(float);
<!--card_view:cardElevation z轴的阴影-->
mCardView.tCardElevation(float); 或 mCardView.tElevation(); 为了兼容性，建议使⽤前者
<!--card_view:cardMaxElevation z轴阴影的最⼤⾼度值-->
选择遗忘mCardView.tMaxCardElevation(float);
<!--card_view:cardUCompatPadding 是否给CardView这个控件设置内边距 API>=21--> mCardView.tUCompatPadding(boolean);麦糊烧
<!--card_view:cardPreventCornerOverlap 是否防⽌内容和圆⾓重叠 API<=20--> mCardView.tPreventCornerOverlap(boolean);
<!--card_view:contentPadding 内容(⼦View)的padding-->
mCardView.tContentPadding(int,int,int,int)
上海海边==爬坑指南==
1. 在CardView中 android:padding ⽤于偏移阴影的内容，因此，要设置content(⼦View)的padding属性，需要在XML⽂件设置
card_view:contentPadding或代码中使⽤tContentPadding(int,int,int,int).
2. 如果您为CardView指定了精确尺⼨，因为阴影其内容区域在Lollipop之前和之后的平台之间不同.我们可以通过使⽤api版本特定的资源
值避免这些更改.
3. 如果希望CardView在平台Lollipop上添加内部填充，可以调⽤tUCompatPadding(true).
4. 为了兼容星要⽤tCardElevation，如果直接使⽤tElevation,
5.0之前的版本，系统会出错(api<21没有阴影效果，我们可以⾃⼰模仿写
⼀个⾃定义控件实现类似效果)
5. 在低版本中设置了Elevation之后CardView会⾃动留出空间供阴影显⽰,⽽Android 5.0之后需要⼿动设置Margin边距来预留空间，因
此如果设置Elevation稍⼤,4.0系统的边距会显得很⼤，显⽰效果不好
解决:
创建/res/value和/res/value-21资源⽂件
1./res/value设置l⽂件，参数设为0
<dimen name="cardview_margin">0dp</dimen>
2./res/value-21设置l⽂件，参数按需设置
<dimen name="cardview_margin">5dp</dimen>
3.在布局⽂件的CardView控件加上该属性
android:layout_margin="@dimen/cardview_margin"
Genymotion模拟器测试得到的⼀些奇怪现象
Api<20(Android 4.4)模拟器测试
静态设置card_view:cardElevation有效果，动态设置mCardView.tCardElevation(float)没效果
静态设置card_view:cardMaxElevation，效果类似给CardView设置了andorid:layout_magin属性
如果card_view:cardCornerRadius设置过⼤,content(⼦View)会覆盖CardView，设置
card_view:cardPreventCornerOverlap=”true”后,content(⼦View)会⾃动适配CardView，保持居中显⽰内容几个月宝宝添加辅食最好
设置了card_view:cardUCompatPadding没效果，设置card_view:MaxElevation可以实现它的效果
股权协议书范本动态设置了mCardView.tRadius(float);⼦View内容会⾃动适配CardView
Api>20 (Android 5.0+)模拟器测试
静态设置card_view:cardMaxElevation有反应，动态设置没反应(要同时设置cardUCompatPadding=”true”才⾏)
如果card_view:cardCornerRadius和mCardView.tRadius(float)；设置过⼤,CardView会覆盖content(⼦View)
胖人服饰
总结
实际开发中，在真机测试时，注意下我在Genymotion上遇到的现象，代码动态设置和XML静态设置有什么不同，如果觉得Google提供的CardView 奇怪的bug略多，或者满⾜不了⾃⼰的开发需要，强烈建议同学们⾃⾏⾃定义控件
本篇⽂章到此结束，欢迎关注，后续有补充的会即时更新，有问题也欢迎评论，共同成长
