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

Попробуйте способ Compose
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 .