Ta strona została przetłumaczona przez Cloud Translation API.

Utwórz układ oparty na kartach

Aplikacje często muszą wyświetlać dane w kontenerach o podobnej stylistyce, np. w kontenerach zawierających 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ą podzielenie grupy przy zachowaniu spójnego stylu kontenera.

Obraz przedstawiający interfejs użytkownika aplikacji oparty na kartach — **Rysunek 1.** Interfejs aplikacji oparty na kartach.

Dodawanie zależności

Widżet CardView jest częścią AndroidX. Do użytku w w projekcie, dodaj następującą zależność do parametru build.gradle modułu aplikacji plik:

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. Użyj go jako grupy widoków, aby zawierać inne widoki. W poniższym przykładzie CardView zawiera element ImageView i kilka 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:

Obraz przedstawiający jedną kartę — **Rysunek 2.** Podstawowy przykład układu opartego na CardView

W tym przykładzie karta jest rysowana na ekranie z domyślną wysokością, która powoduje, że system rysuje pod nim cień. Możesz podać niestandardową wysokość, dla karty z atrybutem card_view:cardElevation. Kartę o wyższej wartości na wysokości jest bardziej wyraźnie widoczny cień, a karta na niższej jaśniejszy cień. Aplikacja CardView używa rzeczywistej wysokości i dynamicznych cieni na Androidzie 5.0 (poziom interfejsu API 21) lub nowszy.

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 funkcji 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.