Utwórz układ oparty na kartach

Wypróbuj sposób tworzenia wiadomości

Jetpack Compose to zalecany zestaw narzędzi UI na Androida. Dowiedz się, jak korzystać z układów w sekcji Utwórz

Karta w Material 3 →

Aplikacje często muszą wyświetlać dane w kontenerach o podobnym stylu, takich jak kontenery zawierające informacje o elementach listy. System udostępnia interfejs API CardView, który umożliwia wyświetlanie informacji na kartach, które zapewniają spójny wygląd na całej platformie. Na przykład karty mają domyślną wysokość nad swoją grupą widoków, na której się znajdują, dlatego system rysuje pod nimi cienie. Karty umożliwiają umieszczenie grupy widoków danych przy zachowaniu spójnego stylu kontenera.

Dodaj zależności

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

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

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

Tworzenie kart

Aby użyć elementu CardView, dodaj go do pliku układu. Używaj go jako grupy widoków, aby zawierać inne widoki. W tym przykładzie CardView zawiera elementy ImageView i kilka właściwości TextViews, które wyświetlają użytkownikowi 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 tworzy kod podobny do tego poniżej, przy założeniu, że użyjesz tego samego obrazu logo Androida:

Karta w tym przykładzie jest rysowana na ekranie z domyślną wysokością, co powoduje, że system rzuca pod nią cień. Możesz określić niestandardową wysokość karty za pomocą atrybutu card_view:cardElevation. Karty znajdujące się wyżej mają wyraźniejszy cień, a te na niższych – jaśniejszy. CardView korzysta z rzeczywistej wysokości i dynamicznych cieni na Androidzie 5.0 (poziom API 21) i nowszych.

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

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