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

Uwaga: aby zadbać o wygodę użytkowników, zapoznaj się z artykułem Karty Material Design.

Aplikacje często muszą wyświetlać dane w kontenerach o podobnym stylu, takich jak kontenery z informacjami o elementach na liście. System zapewnia interfejsu API CardView, wyświetlają informacje na kartach, które są spójne na całej platformie. Dla: kart mają domyślną wysokość nad grupą, na której ją znajdują, więc system rysuje pod nimi cienie. Karty umożliwiają podzielenie grupy przy zachowaniu spójnego stylu kontenera.

Rysunek 1. Interfejs aplikacji oparty na kartach.

Dodaj zależności

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

Odlotowy

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

Kotlin

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

Utwórz karty

Aby użyć elementu CardView, dodaj go do pliku układu. Użyj jej 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 generuje coś podobnego do poniższego, przy założeniu, Użyj tego samego obrazu logo Androida:

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 korzysta z 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ń narożnika w kodzie, użyj metody CardView.setRadius.
• Aby ustawić kolor tła karty, użyj opcji card_view:cardBackgroundColor .