高级UI-CardView

CardView是在Android 5.0推出的新控件，为了兼容之前的版本，将其放在了v7包里面，在现在扁平化设计潮流的驱使下，越来越多的软件使用到了CardView这一控件，那么这篇文章就来看看CardView怎么使用吧

CardView的特有属性

cardBackgroundColor 背景色

cardCornerRadius 边缘弧度数

cardElevation 高度

cardMaxElevation 最大高度

cardUseCompatPadding 设置内边距

cardPreventCornerOverlap 防止卡片内容和边角的重叠

contentPadding 内边距

contentPaddingLeft 内左边距

contentPaddingRight 内右边距

contentPaddingTop 内上边距

contentPaddingBottom 内下边距

CardView使用

由于CardView的使用比较简单，这里不再过多描述

使用前导入依赖

implementation 'com.android.support:cardview-v7:25.4.0'

文字

<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:gravity="center"

    tools:context=".MainActivity">

    <android.support.v7.widget.CardView

        android:layout_width="300dp"

        android:layout_height="200dp"

        app:cardBackgroundColor="@android:color/holo_green_light"

        app:cardCornerRadius="8dp"

        app:cardElevation="10dp"

        app:contentPadding="20dp"

		android:layout_margin="0dp">

        <TextView

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:background="@android:color/darker_gray"

            android:text="card view text"

            android:textColor="@android:color/white" />

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

</LinearLayout>

效果如下

图片

<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:gravity="center"

    tools:context=".MainActivity">

    <android.support.v7.widget.CardView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        app:cardCornerRadius="8dp"

        app:cardElevation="10dp"

        app:contentPadding="20dp">

        <ImageView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:scaleType="centerCrop"

            android:src="@mipmap/ic_launcher" />

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

</LinearLayout>

效果如下

适配注意点

边框圆角效果

5.x 图片和布局都可以很好的呈现圆角效果，图片也变圆角了

4.x 图不能变成圆角，如果要做成5.x一样的效果：通过加载图片的时候自己去处理成圆角
阴影效果

app:cardCornerRadius="10dp"<!--圆角（半径值越大圆角就越明显）-->

app:cardElevation="10dp" <!--阴影效果（值越大阴影效果越明显）-->

5.x上有Ripple水波纹效果（低版本自定义）

android:foreground="?attr/selectableItemBackground"

android:clickable="true"

5.x实现按下的互动效果下沉，松开弹起 - Z轴位移效果（低版本自定义）

android:stateListAnimator="@drawable/translation"

android:clickable="true"

可以设置内容的内边距

app:contentPadding="5dp"

细节：

5.x上面，边距阴影比较小，需要手动添加边距16dp

4.x上面，边距太大，手动修改边距0dp（原因：兼容包里面设置阴影效果自动设置了margin来处理16dp）

translation.xml

<?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="10dp"

           android:valueType="floatType" />

    </item>

    <item>

        <objectAnimator

           android:duration="@android:integer/config_shortAnimTime"

           android:propertyName="translationZ"

           android:valueTo="0dp"

           android:valueType="floatType" />

    </item>

</selector>