目录
- 前言
- 一、基础使用
- 1.1 依赖导入
- 1.2 CardView的常用属性
- 1.3 CardView继承关系
- 二、关于Z轴的概念
- 三、CardView效果
- 3.1 圆角 CardView
- 3.2 阴影 CardView
- 3.3 设置卡片背景
- 3.4 设置卡片背景（内部颜色）
- 3.5 同时设置背景颜色
前言
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.CardViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_margin="10dp"android:background="@color/purple_200"app:cardCornerRadius="10dp"app:contentPadding="20dp"><TextViewandroid: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.CardViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_margin="10dp"app:cardCornerRadius="10dp"app:cardElevation="60dp"><TextViewandroid: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.CardViewandroid:layout_width="match_parent"android:layout_height="50dp"android:layout_margin="10dp"app:cardBackgroundColor="@color/purple_200"app:cardCornerRadius="10dp"app:cardElevation="20dp"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><TextViewandroid: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.CardViewandroid:layout_width="match_parent"android:layout_height="50dp"android:layout_margin="10dp"app:cardCornerRadius="10dp"app:cardElevation="20dp"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:background="@color/purple_200"android:orientation="vertical"><TextViewandroid: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.CardViewandroid:layout_width="match_parent"android:layout_height="50dp"android:layout_margin="10dp"android:background="#440000ff"app:cardBackgroundColor="#44ff0000"app:cardCornerRadius="10dp"app:cardElevation="20dp"><TextViewandroid: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.CardViewandroid:layout_width="match_parent"android:layout_height="50dp"android:layout_margin="10dp"app:cardBackgroundColor="#ff0000"android:background="#00ff00"app:cardCornerRadius="10dp"app:cardElevation="20dp"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:background="#0000ff"android:text="设置卡片背景"android:textColor="#000" /></androidx.cardview.widget.CardView>
</LinearLayout>
