安卓CardView使用

---

前言

CardView是Android支持库中提供的一个视图容器，用于在界面中显示卡片式布局。它可以让开发者轻松地创建具有阴影效果和圆角边框的卡片，使界面看起来更加美观和现代化。

一、基础使用

1.1 依赖导入

要在项目中使用CardView，首先需要在build.gradle文件中添加支持库的依赖：

implementation 'androidx.cardview:cardview:1.0.0'

或者

implementation 'com.google.android.material:material:1.10.0'

com.google.android.material:material:1.10.0: 这个支持库提供了 Material Design 风格的 UI 组件，包括按钮、文本框、菜单、底部导航栏等。Material Design 是 Google 推出的一种设计语言，旨在提供一致、直观、美观的用户界面体验。使用这个支持库可以快速构建符合 Material Design 标准的界面。
androidx.cardview:cardview:1.0.0: 这个支持库提供了 CardView 视图容器，用于创建卡片式布局。
material包含cardview。

1.2 CardView的常用属性

XML 属性	方法	描述
app:cardBackgroundColor	setCardBackgroundColor(int color)	设置背景颜色
app:cardCornerRadius	setRadius(float radius)	设置圆角大小
app:cardElevation	setCardElevation(float elevation)	设置 z 轴的阴影
app:cardMaxElevation	setMaxCardElevation(float maxElevation)	设置 z 轴的最大高度值
app:cardUseCompatPadding	setUseCompatPadding(boolean useCompatPadding)	是否使用 CompatPadding 默认值为 false
app:cardPreventCornerOverlap	setPreventCornerOverlap(boolean preventCornerOverlap)	是否给 content 添加 padding，来阻止与圆角重叠，默认值为 true
app:contentPadding	setContentPadding(int left, int top, int right, int bottom)	设置内容的内边距 padding
app:contentPaddingLeft	setContentPadding(int left, int top, int right, int bottom)	设置内容的左边距 padding
app:contentPaddingTop	setContentPadding(int left, int top, int right, int bottom)	设置内容的上边距 padding
app:contentPaddingRight	setContentPadding(int left, int top, int right, int bottom)	设置内容的右边距 padding
app:contentPaddingBottom	setContentPadding(int left, int top, int right, int bottom)	设置内容的底边距 padding

需要注意的是有的前缀是 app ，而不是 android 。

1.3 CardView继承关系

在布局文件中创建 CardView 控件，使用方法跟 ViewGroup 一致，因为CardView继承自FrameLayout ,而FrameLayout 继承自ViewGroup 。

public class CardView extends FrameLayout {
    
    
public class FrameLayout extends ViewGroup {
    
    

可以在 CardView 中添加一系列的子控件。一般情况下，把 CardView 当做一个父容器，里面可以包含其他子 View，在 ListView 或者 RecyclerView 中充当 item 布局使用，使每一个item圆角化、美观。

二、关于Z轴的概念

Android5.0 引入了Z轴的概念，可以让组件呈现3D效果.
看下面这幅图：

图中的FAB（FloatingActionButton）很明显是浮在界面上的，这就是Z轴的效果.

Z属性可以通过elevation和translationZ进行修改
Z＝ elevation＋translationZ

android:elevation=" "  设置该属性使控件有一个阴影，感觉该控件像是“浮”起来一样，达到3D效果
android:translationZ=""  设置该组件阴影在Z轴（垂直屏幕方向）上的位移

像FloatingActionButton就可以通过app:elevation=" “使用Z属性，
CardView可以通过app:cardElevation=” " 来使用。

app:cardCornerRadius=" " 
圆角的半径，效果就是上面四个角的弧度

app:cardElevation=" " 
阴影大小

点击之后的涟漪效果

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

---

三、CardView效果

3.1 圆角 CardView

cardCornerRadius圆角大小，contentPadding内容内边距

<?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">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="@color/purple_200"
        app:cardCornerRadius="10dp"
        app:contentPadding="20dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="圆角 CardView "
            android:textColor="@color/black" />
    </androidx.cardview.widget.CardView>
</LinearLayout>

3.2 阴影 CardView

cardElevation的效果。

<?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">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        app:cardCornerRadius="10dp"
        app:cardElevation="60dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="20dp"
            android:text="阴影 CardView"
            android:textColor="@color/black" />
    </androidx.cardview.widget.CardView>
</LinearLayout>

3.3 设置卡片背景

cardBackgroundColor的效果

<?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">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_margin="10dp"
        app:cardBackgroundColor="@color/purple_200"
        app:cardCornerRadius="10dp"
        app:cardElevation="20dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#000"
                android:text="设置卡片背景" />
        </LinearLayout>
    </androidx.cardview.widget.CardView>
</LinearLayout>

3.4 设置卡片背景（内部颜色）

<?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">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_margin="10dp"
        app:cardCornerRadius="10dp"
        app:cardElevation="20dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/purple_200"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="设置卡片背景"
                android:textColor="#000" />

        </LinearLayout>
    </androidx.cardview.widget.CardView>
</LinearLayout>

3.5 同时设置背景颜色

同时设置 app:cardBackgroundColor 和 android:background。

<?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">


    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_margin="10dp"
        android:background="#440000ff"
        app:cardBackgroundColor="#44ff0000"
        app:cardCornerRadius="10dp"
        app:cardElevation="20dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#440000ff"
            android:text="设置卡片背景"
            android:textColor="#000" />
    </androidx.cardview.widget.CardView>
</LinearLayout>

无透明度

<?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">
    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_margin="10dp"
        app:cardBackgroundColor="#ff0000"
        android:background="#00ff00"
        app:cardCornerRadius="10dp"
        app:cardElevation="20dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#0000ff"
            android:text="设置卡片背景"
            android:textColor="#000" />
    </androidx.cardview.widget.CardView>
</LinearLayout>