Создайте макет на основе карточек

Попробуйте способ создания
Jetpack Compose — рекомендуемый набор инструментов пользовательского интерфейса для Android. Узнайте, как работать с макетами в Compose.
Карточка в Материале 3 →

Приложениям часто необходимо отображать данные в контейнерах с одинаковым стилем, например в контейнерах, содержащих информацию об элементах списка. Система предоставляет API CardView , позволяющий отображать информацию в карточках , которые имеют единообразный вид на всей платформе. Например, карточки имеют высоту по умолчанию над содержащей их группой представлений, поэтому система рисует тени под ними. Карточки позволяют содержать группу представлений, обеспечивая при этом единообразный стиль контейнера.

Изображение, демонстрирующее пользовательский интерфейс приложения на основе карточек.
Рисунок 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 и несколько TextViews для отображения некоторой информации пользователю:

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

Изображение, показывающее одну карту
Рисунок 2. Базовый пример макета на основе CardView.

Карточка в этом примере отображается на экране с высотой по умолчанию, в результате чего система рисует под ней тень. Вы можете предоставить пользовательское повышение уровня карты с помощью атрибута card_view:cardElevation . Карта на более высоком уровне имеет более выраженную тень, а карта на более низком уровне имеет более светлую тень. CardView использует реальную высоту и динамические тени на Android 5.0 (уровень API 21) и выше.

Используйте эти свойства, чтобы настроить внешний вид виджета CardView :

  • Чтобы установить радиус угла в макетах, используйте атрибут card_view:cardCornerRadius .
  • Чтобы установить угловой радиус в вашем коде, используйте метод CardView.setRadius .
  • Чтобы установить цвет фона карточки, используйте атрибут card_view:cardBackgroundColor .