CardView的使用

Material Design中有一种很个性的设计概念:卡片式设计(Cards),Cards拥有自己独特的UI特征,关于Cards的设计规范可以参考官网介绍:
cards-usage
Google在v7包中引进了一种全新的控件CardView,用来实现这种 Cards UI 的设计.


CardView继承自FrameLayout,它是一个带圆角背景和阴影的FrameLayout.
CardView官方文档

一、简单使用

使用前添加依赖:

compile 'com.android.support:cardview-v7:25.3.1'
1、使用

CardView本质上属于FrameLayout,不同的是,它多了很多"特效"(圆角、阴影等).

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"

        app:cardCornerRadius="12dp"
        app:cardElevation="12dp" >
       
        <ImageView
            android:layout_width="284dp"
            android:layout_height="228dp"
            android:scaleType="fitXY"
            android:src="@mipmap/zy" />
    </android.support.v7.widget.CardView>

</RelativeLayout>

可以看见,被CardView包裹的ImageView有明显的圆角和阴影,这就是CardView最重要的两条属性了.

app:cardCornerRadius=" " 
圆角的半径,效果就是上面四个角的弧度
app:cardElevation=" " 
阴影大小
2、关于Z轴的概念

Android5.0 引入了Z轴的概念,可以让组件呈现3D效果.
看下面这幅图:


图中的FAB(FloatingActionButton)很明显是浮在界面上的,这就是Z轴的效果.

Z属性可以通过elevation和translationZ进行修改
Z= elevation+translationZ

android:elevation=" "  设置该属性使控件有一个阴影,感觉该控件像是“浮”起来一样,达到3D效果
android:translationZ=""  设置该组件阴影在Z轴(垂直屏幕方向)上的位移

5.0之前,我们如果想给View添加阴影效果,以体现其层次感,通常的做法是给View设置一个带阴影的背景图片.
5.0之后,我们只需要简单的修改View的Z属性,就能让其具备阴影的层次感,不过要求版本至少5.0 Lollipop,也就是API21.

Android Design Support Librarysupport -v7中一些组件已经封装好了Z属性,不需要5.0 就可以使用.

FloatingActionButton就可以通过app:elevation=" "使用Z属性,CardView可以通过app:cardElevation=" " 来使用.
关于Z轴的更多介绍,可以观看官方:定义阴影与裁剪视图.

二、CardView的常用属性

1、设置背景颜色

app:cardBackgroundColor=" "  

2、设置padding

app:contentPadding=" "
app:contentPaddingTop=" "
app:contentPaddingBottom=" "
app:contentPaddingLeft=" "
app:contentPaddingRight=" "

Tips:上面是CardView设置背景颜色和padding的方式,如果你直接通过android:padding=" " 和android:background=" "设置,是无效的.

3、设置Z轴的最大高度

app:cardMaxElevation=" "

4、点击之后的涟漪效果

android:clickable="true"
android:foreground="?android:attr/selectableItemBackground"

Tips:如果你给CardView设置了点击事件,就不需要设置android:clickable="true"了

如果你的CardView是可点击的,可以通过foreground属性使用系统定义好的RippleDrawable: selectableItemBackground,从而达到在5.0及以上版本系统中实现点击时的涟漪效果(Ripple),如图:


这个涟漪效果在5.0以上版本中才能展示,在低版本上是一个普通的点击变暗的效果.

三、兼容性问题

1、边距问题

看下面两幅图:


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardCornerRadius="12dp"
        app:cardElevation="12dp" >

        <ImageView
            android:layout_width="284dp"
            android:layout_height="228dp"
            android:scaleType="fitXY"
            android:src="@mipmap/zy" />
    </android.support.v7.widget.CardView>
</RelativeLayout>

在5.0之前的版本中设置了 app:cardElevation=" "后 CardView 会自动留出空间供阴影显示,而5.0之后的版本中没有预留空间.
官网也介绍了这种情况:

Before Lollipop, CardView adds padding to its content and draws shadows to that area. This padding amount is equal to maxCardElevation + (1 - cos45) * cornerRadius on the sides and maxCardElevation * 1.5 + (1 - cos45) * cornerRadius on top and bottom.

所以给CardView设置 Margin时需要兼容一下,否则在低版本上每个卡片之间的距离会特别大,浪费屏幕空间.
解决方法1:
在res/values/dimens中设置一个0dp的margin,这是为5.0之前版本使用的

<dimen name="cardview_margin">0dp</dimen>

在res/values-v21/dimens中设置一个适合的margin,为阴影预留空间,这是为5.0之后版本使用的

<dimen name="cardview_margin">12dp</dimen>

最后,给CardView设置外边距android:layout_margin="@dimen/cardview_margin",这样就解决了低版本中边距过大浪费屏幕空间的问题了.
解决方法2:直接给CardView设置该属性:

app:cardUseCompatPadding="true"  
让CardView在不同系统中使用相同的padding值,为阴影预留空间
2、圆角问题

看下面两幅图:


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardBackgroundColor="@color/colorPrimary"
        app:cardCornerRadius="12dp"
        app:cardElevation="12dp" >

        <ImageView
            android:src="@mipmap/zy"
            android:scaleType="fitXY"
            android:layout_width="284dp"
            android:layout_height="228dp" />

</RelativeLayout>

>=5.0(Lollipop API 21)的版本,CardView会直接裁剪内容元素满足圆角的需求.
<5.0(Lollipop API 21)的版本,CardView为了使内容元素不会覆盖CardView的圆角,会添加一个padding,这样一来,如果CardView设置了背景颜色,就很难看了.
解决方法:给CardView设置该属性:

app:cardPreventCornerOverlap="false"

这条属性的意思是:是否阻止圆角被覆盖,默认为true
设为false后,padding效果就不存在了,同时圆角也被覆盖了
该属性对5.X设备没什么影响.
app:cardPreventCornerOverlap="false"

四、小结

总的来说,如果在高版本中使用CardView还是很舒服的,很容易实现各种效果,低版本上兼容性还不是很好.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,948评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,371评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,490评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,521评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,627评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,842评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,997评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,741评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,203评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,339评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,955评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2 349

推荐阅读更多精彩内容