Utwórz układ oparty na kartach

Wypróbuj tworzenie wiadomości

Jetpack Compose to zalecany zestaw narzędzi UI na Androida. Dowiedz się, jak pracować z układami w Compose.

Karta w Materyale 3 →

Uwaga: aby zapewnić użytkownikom lepsze wrażenia, zapoznaj się z kartami w ramach Material Design

.

Aplikacje często muszą wyświetlać dane w kontenerach o podobnej stylistyce, np. w kontenerach, które zawierają informacje o elementach na liście. System udostępnia interfejs API CardView, który umożliwia wyświetlanie informacji na kartach o spójnym wyglądzie na całej platformie. Na przykład karty mają domyślną wysokość nad ich grupą widoków, więc system rysuje pod nimi cienie. Karty umożliwiają zawieranie grupy widoków, zapewniając jednocześnie spójny styl dla kontenera.

Rysunek 1. Interfejs aplikacji oparty na kartach.

Dodawanie zależności

Widżet CardView jest częścią AndroidX. Aby użyć go w projekcie, dodaj tę zależność do pliku build.gradle modułu aplikacji:

Odlotowe

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

Kotlin

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

Utwórz karty

Aby użyć CardView, dodaj go do pliku układu. Może ona służyć jako grupa widoków zawierająca inne widoki. W tym przykładzie element CardView zawiera element ImageView i kilka elementów TextViews, aby wyświetlić użytkownikowi pewne informacje:

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

Poprzedni fragment kodu wyświetli coś podobnego do tego, o ile używasz tego samego obrazu logo Androida:

Rysunek 2. Podstawowy przykład układu opartego na CardView

W tym przykładzie karta jest wyświetlana na ekranie z domyślną wysokością, co powoduje, że system rysuje pod nią cień. W przypadku karty z atrybutem card_view:cardElevation możesz podać niestandardową wysokość. Na wyższej wysokości cień jest wyraźniejszy, a na niższej – jaśniejszy. CardView używa rzeczywistego wzniesienia i dynamicznych cieni na Androidzie 5.0 (poziom interfejsu API 21) lub nowszym.

Aby dostosować wygląd widżetu CardView, użyj tych właściwości:

• Aby ustawić promień narożnika w układach, użyj atrybutu card_view:cardCornerRadius.
• Aby ustawić promień zaokrąglenia w kodzie, użyj metody CardView.setRadius.
• Aby ustawić kolor tła karty, użyj atrybutu card_view:cardBackgroundColor.