Material Design控件 之 CardView

1. 简介

        CardView 是继承于 FrameLayout，官方说明它是一个带有圆角背景和阴影的Framelayout。

从英文解释它是一个卡片视图，CardView 可以作为一个子布局，也可以作为一个父布局里面在填

充子视图（因为它本身是一个Framelayout容器）。

2. CardView属性

        我们看看它的属性:

<resources>
    <declare-styleable name="CardView">
        <!-- Background color for CardView. -->
        <!-- 设置背景色 -->
        <attr name="cardBackgroundColor" format="color" />
        <!-- Corner radius for CardView. -->
        <!-- 设置圆角大小 -->
        <attr name="cardCornerRadius" format="dimension" />
        <!-- Elevation for CardView. -->
        <!-- 设置Z轴阴影高度 -->
        <attr name="cardElevation" format="dimension" />
        <!-- Maximum Elevation for CardView. -->
        <!-- 设置Z轴阴影最大高度 -->
        <attr name="cardMaxElevation" format="dimension" />
        <!-- Add padding in API v21+ as well to have the same measurements with previous versions. -->
        <!-- 设置内边距，v21+的版本和之前的版本仍旧具有一样的计算方式 -->
        <attr name="cardUseCompatPadding" format="boolean" />
        <!-- Add padding to CardView on v20 and before to prevent intersections between the Card content and rounded corners. -->
        <!-- 在v20和之前的版本中添加内边距，这个属性是为了防止卡片内容和边角的重叠 -->
        <attr name="cardPreventCornerOverlap" format="boolean" />
        <!-- 下面是卡片边界距离内部的距离-->
        <!-- Inner padding between the edges of the Card and children of the CardView. -->
        <attr name="contentPadding" format="dimension" />
        <!-- Inner padding between the left edge of the Card and children of the CardView. -->
        <attr name="contentPaddingLeft" format="dimension" />
        <!-- Inner padding between the right edge of the Card and children of the CardView. -->
        <attr name="contentPaddingRight" format="dimension" />
        <!-- Inner padding between the top edge of the Card and children of the CardView. -->
        <attr name="contentPaddingTop" format="dimension" />
        <!-- Inner padding between the bottom edge of the Card and children of the CardView. -->
        <attr name="contentPaddingBottom" format="dimension" />
    </declare-styleable>
</resources>

用表格来描述更简洁：

属性	说明
app:cardBackgroundColor	卡片背景颜色
app:cardCornerRadius	卡片的圆角大小
app:cardElevation	阴影的大小
app:cardMaxElevation	阴影最大高度
app:contentPadding	卡片内容与边距的间隔

我们来写一个布局文件：activity_cardview.xml

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

    <androidx.cardview.widget.CardView
        android:clickable="true"
        android:foreground="?android:attr/selectableItemBackground"
        app:cardBackgroundColor="#FFC0CB"
        app:cardCornerRadius="10dp"
        app:cardElevation="7dp"
        app:contentPadding="3dp"
        android:layout_gravity="center"
        android:layout_height="wrap_content"
        android:layout_width="400dp">

        <RelativeLayout

            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/image"
                android:layout_height="280dp"
                android:layout_width="match_parent"
                android:src="@drawable/xiaoqingxin"
                android:scaleType="fitCenter"
                />

            <TextView
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:textSize="14dp"
                android:text="夏天的风,暖暖的。吹到身上,舒舒服服的。夏天的风,有的不仅仅是泥土的芬芳,花鸟的姿色,还有一份独特而又朴实的青涩。"
                android:layout_below="@id/image"
                android:layout_marginTop="1dp"
                android:fontFamily="sans-serif-black"
                />
        </RelativeLayout>
    </androidx.cardview.widget.CardView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

CardView作为父布局CoordinatorLayout的子控件
自身内部又包含了一个RelativeLayout子控件：包含一张图片和文字说明

2.1 添加水波纹点击效果

CardView默认是没有点击效果的，如果要添加，如下方法：

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

1. 配置可点击   2. 设置 android:foreground 属性

2.2 设置背景颜色

      app:cardBackgroundColor="#FFC0CB"

      设置为粉红色背景

2.3 设置圆角

      app:cardCornerRadius="10dp"

       卡片的四周圆角

2.4 设置背景阴影

        app:cardElevation="7dp" 

        就是Z轴坐标大小，卡片有个背景阴影效果

2.5 设置内容与边框的距离

        app:contentPadding="3dp"

        内容与边框的距离大小

3. 效果图