Android开发之CardView使用的相关注意事项

前言：CardView是v7包下的一个控件，属于MD设计风格，今天我们就来学习一下CardView的使用以及注意事项！

-----------------------------分割线-------------------------

首先添加依赖：

 compile 'com.android.support:cardview-v7:25.2.0'

-----------------------------分割线-------------------------

特性：

1.边框圆角效果：

5.x 图片和布局都可以很好的呈现圆角效果，图片也变圆角了
4.x 图不能变成圆角，如果要做成5.x一样的效果：通过加载图片的时候自己去处理成圆角
2.阴影效果
3.5.x上有Ripple水波纹效果（低版本需要自己做自定义的）

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

4.5.x实现按下的互动效果---下沉，松开弹起---Z轴位移效果 （低版本也需要自己自定义做）
5.可以设置内容的内边距

app:contentPadding="5dp"

-----------------------------分割线-------------------------

细节：

1、5.x上面，边距阴影比较小，需要手动添加边距16dp
2、4.x上面，边距太大， 手动修改边距0dp（原因：兼容包里面设置阴影效果自动设置了margin来处理16dp）
app:cardCornerRadius="10dp" 圆角（半径值越大圆角就越明显）
app:cardElevation="10dp" 阴影效果 （值越大阴影效果越明显）

-----------------------------分割线-------------------------

来看一下在5.x运行的效果图：

布局代码：

<android.support.v7.widget.CardView
        android:id="@+id/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="20dp"
        app:cardElevation="20dp">

        <ImageView
            android:id="@+id/iv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            android:src="@drawable/tulips2" />
    </android.support.v7.widget.CardView>

stateListAnimator的属性布局：

<?xml version="1.0" encoding="utf-8"?>
<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"></objectAnimator>
    </item>

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

-----------------------------分割线-------------------------

来看一下在4.x运行的效果图：

布局代码：

<android.support.v7.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:layout_margin="0dp"
        app:cardCornerRadius="20dp"
        app:cardElevation="10dp"
        app:contentPadding="5dp">

        <ImageView
            android:id="@+id/iv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            android:src="@drawable/tulips2" />
    </android.support.v7.widget.CardView>

--------------------------------------完！-------------------------------------