技术控

    今日:0| 主题:63445
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] Android CardView的使用细节

[复制链接]
稀釋回憶 发表于 2016-10-19 08:20:43
690 3
Material design中有一种很个性的设计概念:卡片式设计(Cards),这种设计与传统的List Item有所区别,Cards包含更多的内容元素和拥有自己的UI特征,关于Cards的设计规范可以参考官网介绍:
   https://material.google.com/components/cards.html#
   为了更好地实现这种 Cards UI 的设计,Google在v7包中引进了一种全新的控件: CardVew ,本文将从开发的角度介绍CardView的一些常见使用细节。
  Google用一句话介绍了CardView:一个带圆角和阴影背景的FrameLayout。CardView在Android Lollipop(API 21)及以上版本的系统中适配较好,本文我们以一个具体的例子来学习CardView的基本使用和注意事项,效果图如下:
   

Android CardView的使用细节

Android CardView的使用细节

  上图展示的是一个list列表,列表中的item使用了卡片式设计,主要利用CardView控件实现,为了精简文章内容,这里我们将item布局中的核心代码罗列出来,加以分析:
        
  1. <?xml version="1.0" encoding="utf-8"?><LinearLayout 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:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">        <android.support.v7.widget.CardView        tools:targetApi="lollipop"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:stateListAnimator="@drawable/lift_on_touch"        android:layout_marginLeft="@dimen/dp_8"        android:layout_marginRight="@dimen/dp_8"        android:layout_marginBottom="@dimen/dp_8"        android:clickable="true"        android:foreground="?android:attr/selectableItemBackground"        app:cardCornerRadius="@dimen/dp_4"        app:cardUseCompatPadding="true"        app:cardPreventCornerOverlap="false">        <RelativeLayout            android:layout_width="match_parent"            android:layout_height="wrap_content">            <!-- image、text等其他内容 -->            ......        </RelativeLayout>    </android.support.v7.widget.CardView></LinearLayout>
复制代码
      可以看出,核心部分在于CardView的属性使用,下面我们针对几个特殊的属性逐一分析,深化了解。
  排版技巧

   前面我们说过,CardView从本质上属于FrameLayout,而CardView通常包含了较多的内容元素,为了方便地排版布局中的各个元素,一般借助于其他基本布局容器,比如这里我们使用了一个 RelativeLayout 作为CardView的唯一Child。
  阴影Padding

   在Android Lollipop之前的系统,CardView会自动添加一些额外的padding空间来绘制阴影部分,这也导致了以Lollipop为分界线的不同系统上CardView的尺寸大小不同。为了解决这个问题,有两种方法:第一种,使用不同API版本的dimension资源适配(也就是借助values和values-21文件夹中不同的dimens.xml文件);第二种,就是使用 setUseCompatPadding 属性,设置为true(默认值为false),让CardView在不同系统中使用相同的padding值。
  圆角覆盖

  这也是一个解决系统兼容的问题。在pre-Lollipop平台(API 21版本之前)上,CardView不会裁剪内容元素以满足圆角需求,而是使用添加padding的替代方案,从而使内容元素不会覆盖CardView的圆角。而控制这个行为的属性就是cardPreventCornerOverlap,默认值为true。在本例中我们设置了该属性为false。这里我们看一下,在pre-Lollipop平台中,不同cardPreventCornerOverlap值的效果对比图(左false,右true):
   

Android CardView的使用细节

Android CardView的使用细节

  显然,默认值下自动添加padding的方式不可取,所以需要设置该属性值为false。需要注意的一点是,该属性的设置在Lollipop及以上版本的系统中没有任何影响,除非cardUseCompatPadding的值为true。
  Ripple效果

  Cards一般都是可点击的,为此我们使用了foreground属性并使用系统的selectableItemBackground值,同时设置clickable为true(如果在java代码中使用了cardView.setOnClickListener,就可以不用写clickable属性了),从而达到在Lollipop及以上版本系统中实现点击时的涟漪效果(Ripple),如图:
   

Android CardView的使用细节

Android CardView的使用细节

  在pre-Lollipop版本中,则是一个普通的点击变暗的效果,这里就不截图展示了,如果想改变老版本的点击效果,也可以通过版本兼容的方式另行修改。
  lift-on-touch

   根据官网 Material motion 部分对交互动作规范的指导,Cards、Button等视图应该有一个触摸抬起(lift-on-touch)的交互效果,也就是在三维立体空间上的Z轴发生位移,从而产生一个阴影加深的效果,与Ripple效果共同使用,官网给了一个很好的示例图:
   

Android CardView的使用细节

Android CardView的使用细节

   在实现这个效果也很简单,可以在 res/drawable 目录下建立一个 lift_on_touch.xml 文件,内容如下:
        
  1. <?xml version="1.0" encoding="utf-8"?><!-- animate the translationZ property of a view when pressed --><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item        android:state_enabled="true"        android:state_pressed="true">        <set>            <objectAnimator                android:duration="@android:integer/config_shortAnimTime"                android:propertyName="translationZ"                android:valueTo="6dp"                android:valueType="floatType"/>        </set>    </item>    <item>        <set>            <objectAnimator                android:duration="@android:integer/config_shortAnimTime"                android:propertyName="translationZ"                android:valueTo="0"                android:valueType="floatType"/>        </set>    </item></selector>
复制代码
       即通过属性动画动态改变translationZ值,沿着Z轴,从0dp到6dp变化。这里的6dp值也是有出处的,参考 Google I/O 2014 app 和 Assign Elevation to Your Views 。然后将其赋值给 android:stateListAnimator 属性即可。由于 stateListAnimator 属性只适用于Lollipop及以上版本,为了隐藏xml中的版本警告,可以指定 tools:targetApi="lollipop" 。
   关于这个功能,需要补充说明一点。这里的 lift_on_touch.xml ,严格意义上来讲,属于anim资源,同时适用于API 21及以上版本,所以按道理上来讲应该将其放置在 res/anim-v21 目录下,然后使用 @anim/lift_on_touch 赋值给 stateListAnimator 属性,而不是例子中的 @drawable/lift_on_touch 方法。但是放置在 res/anim-v21 目录下会产生一个“错误”提示:
  XML file should be in either “animator” or “drawable”,not “anim”
   虽然这个“错误”不影响编译运行,但是对于追求完美主义的程序员们来说还是碍眼,所以本例中我选择将其放在了 res/drawable 目录下,大家可以自行斟酌使用。
  关于对lift-on-touch效果的理解,YouToBe网站有个视频解说,感兴趣的话可以参看看,地址如下:
   DesignBytes: Paper and Ink: The Materials that Matter
  总结说明

   CardView还有一些其他属性可供使用,比如 cardElevation 设置阴影大小, contentPadding 代替普通 android:padding 属性等,比较基础,本文就不一一介绍了,大家可以在官网上参考学习。从上面的介绍可以看出,在使用CardView时基本上都会用到一些标准配置的属性,我们可以借助style属性,将其封装到 styles.xml 文件中,统一管理,比如:
        
  1. <style name="AppCardView" parent="@style/CardView.Light">        <item name="cardPreventCornerOverlap">false</item>        <item name="cardUseCompatPadding">true</item>        <item name="android:foreground">?attr/selectableItemBackground</item>        <item name="android:stateListAnimator" tools:targetApi="lollipop">@anim/lift_up</item>        ......</style>
复制代码
      最后,附上本文案例项目的GitHub地址:
   https://github.com/Mike-bel/MDStudySamples
mosenyaoye 发表于 2016-10-19 15:53:53
出来混,老婆迟早是要换的.
回复 支持 反对

使用道具 举报

橼§纷 发表于 2016-10-21 05:40:53
人是铁,范是钢,一天不装憋得慌
回复 支持 反对

使用道具 举报

超兽神 发表于 2016-10-30 11:14:01
我若安好,便是晴天。
回复 支持 反对

使用道具 举报

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/c.CoLaBug.com ( 粤ICP备05003221号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表