Android UI进阶之旅10--Material Desig

CardView

CardView就是一个ViewGroup，里面可以放置子布局，例子：

<android.support.v7.widget.CardView
    android:layout_width="300dp"
    android:layout_height="200dp"
    android:layout_margin="16dp"
    android:clickable="true"
    android:foreground="?attr/selectableItemBackground"
    android:stateListAnimator="@drawable/z_translation"
    app:cardCornerRadius="10dp"
    app:cardElevation="10dp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/test"/>

</android.support.v7.widget.CardView>

其中，cardElevation是设置高度，高度越高，阴影越明显。foreground属性是设置点击水波纹效果。cardCornerRadius是设置圆角的大小。stateListAnimator是设置点击的动画效果，点击以后，往下压，z_translation如下：

<selector
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:state_pressed="true">
        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueTo="-15dp"
            android:valueType="floatType"/>
    </item>

    <item>
        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueTo="0dp"
            android:valueType="floatType"/>
    </item>

</selector>

CardView兼容性开发

我们需要创建layout、layout-v21两套布局，根据下面的差别写两份CardView的布局文件。其中尤其注意的是stateListAnimator这个属性，如果最小SDK版本低于21，AS就会警告。

一、阴影的细微差别

1. 5.x系统：边距阴影比较小，需要手动添加边距16dp，android:layout_margin="16dp"
2. 4.x系统：边距阴影比较大，手动修改边距0dp（原因：兼容包里面设置阴影效果自动设置了margin来处理16dp）

二、圆角效果的细微差别

1. 5.x系统：图片和布局都可以很好的呈现圆角效果，图片也变圆角了，因此5.x上面不需要设置app:contentPadding
2. 4.x系统：图不能变成圆角（图片的直角会顶到CardView的边上），如果要做成5.x一样的效果：通过加载图片的时候自己去处理成圆角（与CardView的圆角大小一样），因此4.x上面不需要设置app:contentPadding，从而尽量好看一些

三、水波纹效果的差别

1. 5.x系统：可以通过android:foreground="?attr/selectableItemBackground"实现
2. 4.x系统：需要自己实现

四、点击动画的差别

1. 5.x系统：可以通过android:stateListAnimator="@drawable/z_translation"设置动画
2. 4.x系统：不能设置上述的动画，因为4.x没有z轴的概念

如果觉得我的文字对你有所帮助的话，欢迎关注我的公众号：

公众号：Android开发进阶

我的群欢迎大家进来探讨各种技术与非技术的话题，有兴趣的朋友们加我私人微信huannan88，我拉你进群交（♂）流（♀）。