创建卡片式布局

应用通常需要以样式一致的容器来显示数据，例如用于存放列表中各项信息的容器。系统提供了 CardView API，供您在“卡片”中显示信息，从而在整个平台中保持外观一致。例如，卡片在其所在的视图组上方具有默认的海拔高度 (elevation)，因此系统会在其下方绘制阴影。卡片提供了一种包含一组视图的方式，同时为容器提供了一致的样式。

A image showing a glimpse of an app UI based on cards — **图 1.** 基于卡片的应用程序界面。

添加依赖项

CardView 组件是 AndroidX 的一部分。要在项目中使用它，请将以下依赖项添加到应用模块的 build.gradle 文件中

Groovy

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

Kotlin

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

创建卡片

要使用 CardView，请将其添加到您的布局文件中。将其作为视图组来包含其他视图。在以下示例中，CardView 包含一个 ImageView 和几个 TextView，用于向用户显示一些信息

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:padding="16dp"
    android:background="#E0F7FA"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:padding="4dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/header_image"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:src="@drawable/logo"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/title"
                style="@style/TextAppearance.MaterialComponents.Headline3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:text="I'm a title"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/header_image" />

            <TextView
                android:id="@+id/subhead"
                style="@style/TextAppearance.MaterialComponents.Subtitle2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:text="I'm a subhead"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/title" />

            <TextView
                android:id="@+id/body"
                style="@style/TextAppearance.MaterialComponents.Body1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:text="I'm a supporting text. Very Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/subhead" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

假设您使用相同的 Android Logo 图片，上述代码片段生成的效果类似于下图

An image showing a single card — **图 2.** 基于 CardView 的布局基本示例。

此示例中的卡片以默认的海拔高度绘制在屏幕上，这会导致系统在其下方绘制阴影。您可以使用 card_view:cardElevation 属性为卡片提供自定义的海拔高度。海拔较高的卡片阴影更明显，海拔较低的卡片阴影则较淡。CardView 在 Android 5.0（API 级别 21）及更高版本上使用真实的海拔高度和动态阴影。

使用以下属性自定义 CardView 组件的外观

要在布局中设置圆角半径，请使用 card_view:cardCornerRadius 属性。
要在代码中设置圆角半径，请使用 CardView.setRadius 方法。
要设置卡片的背景颜色，请使用 card_view:cardBackgroundColor 属性。