前言

Android 5.0 版本中新增了 CardView，CardView 繼承自 FrameLayout 類，具有圓角背景和陰影的 FrameLayout，並且可以設置圓角和陰影，使得控件具有立體性，也可以包含其他的佈局容器和控件。

本文章向大家介紹 Android CardView 詳解及使用方法和實例，主要包括 Android CardView 詳解及使用方法和實例使用實例、應用技巧、基本知識點總結和需要注意事項。

一、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

二、CardView 基礎使用

1、添加依賴包

要添加 CardView 的依賴項，您必須將 Google Maven 代碼庫添加到項目中。在應用或模塊的 build.gradle 文件中添加所需工件的依賴項：

dependencies {
    implementation "androidx.cardview:cardview:1.0.0"
}

這裏順便提一下androidx，很多朋友私信我爲什麼以前依賴 v7 包。簡單理解爲androidx是 Google 將之前的v4和v7包整理後的產物，以後所有的控件都要依賴androidx

2、創建佈局

在佈局文件中創建 CardView 控件，使用方法跟 ViewGroup 一致，可以在 CardView 中添加一系列的子控件。一般情況下，把 CardView 當做一個父容器，裏面可以包含其他子 View，在 ListView 或者 RecyclerView 中充當 item 佈局使用。

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    app:contentPadding="8dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/tv_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Jaynm"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/tv_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2020-01-18"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@+id/tv_name" />

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="一個移動端了開發者，對未來的思考"
            app:layout_constraintStart_toStartOf="@+id/tv_name"
            app:layout_constraintTop_toBottomOf="@+id/tv_name" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

以上佈局文件看這並不陌生，使用方式和其他 ViewGroup 沒什麼區別，只是 CardView 引入了三維座標軸 z 軸，可以設置陰影和圓角效果，讓你的佈局像一張卡片，讓 UI 界面看起來具有立體感，展示效果如下：

三、CardView 設置陰影效果

現在 Android 系統都已經到了 10.0，所以關於 Material Design 控件本文都以 5.0 以上介紹，需要適配 5.0 以下版本的朋友，需要對 CardView 其中屬性建不同 layout 設置，這裏不做詳細區分。

app:cardElevation 或者 setCardElevation(float elevation)實現 CardView 陰影效果，直接貼上佈局文件和運行效果。

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:gravity="center"
    android:orientation="vertical">

    <androidx.cardview.widget.CardView
        android:layout_width="200dp"
        android:layout_height="60dp"
        app:cardElevation="0dp" />

    <androidx.cardview.widget.CardView
        android:layout_width="200dp"
        android:layout_height="60dp"
        android:layout_marginTop="30dp"
        app:cardElevation="10dp" />

    <androidx.cardview.widget.CardView
        android:layout_width="200dp"
        android:layout_height="60dp"
        android:layout_marginTop="30dp"
        app:cardElevation="50dp"/>

</LinearLayout>

上面在 LinearLayout 中添加了 3 個 CardView，分別設置陰影 0dp/10dp/50dp，圖片中可以很明顯的看到陰影效果的展示。

四、CardView 設置圓角效果

XML 佈局中設置app:cardCornerRadius屬性或者setRadius(float radius)方法都可以設置 CardView 圓角效果。

以下圖片展示的是分別設置app:cardCornerRadius屬性值爲 0dp/10dp/100dp 的效果。

五、CardView 設置 Ripple 效果

默認情況，CardView 是不可點擊的，並且沒有任何的觸摸反饋效果。觸摸反饋動畫在用戶點擊 CardView 時可以給用戶以視覺上的反饋。Google 爲我們提供了一個很牛 X 的點擊效果Ripple，也就是我們所說的水波紋效果，使用android:foreground屬性添加 Ripple 樣式。

1、系統自帶 Ripple 效果

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:gravity="center"
    android:orientation="vertical">

    <androidx.cardview.widget.CardView
        app:cardCornerRadius="0dp"
        app:cardBackgroundColor="@color/md_cyan_500"
        android:layout_width="200dp"
        android:layout_height="60dp"
        android:elevation="0dp" />

    <androidx.cardview.widget.CardView
        android:clickable="true"
        android:foreground="?android:attr/selectableItemBackground"
        app:cardCornerRadius="10dp"
        app:cardBackgroundColor="@color/md_cyan_500"
        android:layout_width="200dp"
        android:layout_height="60dp"
        android:layout_marginTop="30dp"
        app:cardElevation="10dp" />

    <androidx.cardview.widget.CardView
        android:clickable="true"
        android:foreground="?android:attr/selectableItemBackgroundBorderless"
        app:cardCornerRadius="100dp"
        app:cardBackgroundColor="@color/md_cyan_500"
        android:layout_width="200dp"
        android:layout_height="60dp"
        android:layout_marginTop="30dp"
        app:cardElevation="50dp"/>

</LinearLayout>

上述 XML 佈局文件中，第 2、3 分別設置了系統自帶的兩種效果：

android:background="?android:attr/selectableItemBackground" 水波紋有邊界

android:background="?android:attr/selectableItemBackgroundBorderless" 水波紋超出邊界

注意：CardView 設置android:foreground屬性後，還需設置android:clickable="true"纔會有 Ripple 效果。

2、自定義 Ripple 效果

系統自帶的 2 中默認效果在實際開發中基本上能夠滿足需求，但是往往會有奇葩的 UI 設計師，設計出自認爲很炫酷的效果(本人覺得 Google Material Design 系列控件效果原生是最漂亮的)。這個時候就不得不根據設計師的需求自定義 Ripple 效果。

1、在 drawable 文件下新建一個item_touch_bg.xml文件，選擇 ripple 標籤

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/md_grey_500">
    <item android:id="@android:id/mask"
          android:drawable="@android:color/white" />
</ripple>

2、在佈局 layout 文件 CardView 控件中設置android:foreground="@drawable/item_touch_bg"屬性即可。

<androidx.cardview.widget.CardView
    android:clickable="true"
    android:foreground="@drawable/item_touch_bg"
    app:cardCornerRadius="10dp"
    app:cardBackgroundColor="@color/md_cyan_500"
    android:layout_width="200dp"
    android:layout_height="60dp"
    android:layout_marginTop="30dp"
    app:cardElevation="10dp" />

注意：水波紋效果也是 android 5.0 以上版本纔會有效果，5.0 以下需要適配的朋友可以將 layout 和 layout-v21 分別設置。

源碼下載 源碼包含 Material Design 系列控件集合，定時更新，敬請期待！

六、總結

本文已經介紹如何使用 Android Lollipop 中引入的 CardView 和 RecyclerView 小部件。您還看到了如何在 Material Design 應用程序中使用這些小部件的示例。 CardView 在現在開發 APP 中應用場景還是比較多的，如果你的項目中還沒有用到，那就趕快嘗試一下吧。

我的微信：Jaynm888

歡迎點評，誠邀 Android 程序員加入微信交流羣，公衆號回覆加羣或者加我微信邀請入羣。

Android Material Design 系列之 CardView 開發詳解

前言

一、CardView 常用屬性

二、CardView 基礎使用

1、添加依賴包

2、創建佈局

三、CardView 設置陰影效果

四、CardView 設置圓角效果

五、CardView 設置 Ripple 效果

1、系統自帶 Ripple 效果

2、自定義 Ripple 效果

六、總結

Android Material Design 系列之 CardView 開發詳解

Android Material Design 系列之 DrawerLayout + NavigationView 使用詳解

Android Material Design 系列之 TextInputLayout 使用詳解

Flutter 基於CustomScrollView+SliverAppbar實現案例

程序員的時間管理計劃

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結