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 funkcji Utwórz

Karta w Material 3 →

Aplikacje często muszą wyświetlać dane w kontenerach o podobnym stylu, takich jak kontenery z informacjami o elementach na liście. System udostępnia interfejs API CardView, który umożliwia wyświetlanie informacji na kartach, które wyglądają w spójny sposób 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 pozwalają na grupowanie widoków, zachowując przy tym spójny styl kontenera.

Dodaj zależności

Widżet CardView jest częścią AndroidaX. 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")
}

Utwórz karty

Aby użyć elementu CardView, dodaj go do pliku układu. Może ona służyć jako grupa widoków zawierająca inne widoki. W poniższym przykładzie pole CardView zawiera elementy ImageView i kilka TextViews, które pozwalają 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>

Przy założeniu, że używasz tego samego obrazu logo Androida, poprzedni fragment kodu generuje podobny efekt jak poniżej:

Karta w tym przykładzie jest rysowana na ekranie z domyślną wysokością, przez co system rysuje pod nią cień. Za pomocą atrybutu card_view:cardElevation możesz podać niestandardową wysokość karty. Na wyższej wysokości cień jest wyraźniejszy, a na niższej – jaśniejszy. Funkcja CardView korzysta z rzeczywistej wysokości i dynamicznych cieni na Androidzie 5.0 (poziom interfejsu API 21) i nowszych.

Za pomocą tych właściwości możesz dostosować wygląd widżetu CardView:

• Aby ustawić promień narożnika 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.