Utwórz układ oparty na kartach

Wypróbuj tworzenie wiadomości

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

Karta w Materyale 3 →

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 grupą widoku, więc system rysuje cienie pod nimi. Karty umożliwiają zawieranie grupy widoków, zapewniając jednocześnie spójny styl dla kontenera.

Dodawanie zależności

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

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

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

Tworzenie kart

Aby użyć CardView, dodaj go do pliku układu. Użyj go jako grupy widoków, aby zawierać 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 spowoduje wyświetlenie czegoś podobnego do tego, o ile używasz tego samego obrazu logo Androida:

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ść. Karta na wyższym wzniesieniu ma bardziej wyraźny cień, a na niższym – 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 swoich 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.