Kartenbasiertes Layout erstellen

Schreiben Sie jetzt
Jetpack Compose ist das empfohlene UI-Toolkit für Android. Informationen zum Arbeiten mit Layouts in Compose
Karte in Material 3 →

Apps müssen Daten oft in ähnlich formatierten Containern anzeigen, z. B. Container, die Informationen zu den Elementen in einer Liste enthalten. Das System bietet die CardView API, mit der Sie Informationen in Karten anzeigen können, die auf der gesamten Plattform einheitlich aussehen. Für Beispiel: Karten haben eine Standardhöhe über der Ansichtsgruppe, in der sie enthalten sind. werden Schatten darunter gezeichnet. Karten bieten die Möglichkeit, eine Gruppe von Ansichten zu enthalten und gleichzeitig einen einheitlichen Stil für den Container zu verwenden.

Ein Bild, das einen Ausschnitt einer App-Benutzeroberfläche zeigt, die auf Karten basiert
Abbildung 1. Eine App-Benutzeroberfläche, die auf Karten basiert.

Abhängigkeiten hinzufügen

Das CardView-Widget ist Teil von AndroidX. Wenn Sie sie in Ihrem Projekt verwenden möchten, fügen Sie der Datei build.gradle Ihres App-Moduls die folgende Abhängigkeit hinzu:

Cool

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

Kotlin

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

Karten erstellen

Wenn Sie ein CardView verwenden möchten, fügen Sie es der Layoutdatei hinzu. Als Datenansichtsgruppe können Sie andere Ansichten enthalten. Im folgenden Beispiel enthält CardView ein ImageView und einige TextViews, um dem Nutzer Informationen anzuzeigen:

<?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>

Das vorherige Code-Snippet führt unter der Annahme, dass Sie dasselbe Android-Logo verwenden, zu einer Ausgabe, die in etwa so aussieht:

Ein Bild mit einer einzelnen Karte
Abbildung 2. Ein einfaches Beispiel für ein CardView-basiertes Layout.

Die Karte in diesem Beispiel wird mit einer Standardhöhe auf dem Bildschirm dargestellt, wodurch das System einen Schatten darunter zeichnet. Sie können mit dem Attribut card_view:cardElevation eine benutzerdefinierte Höhe für eine Karte angeben. Eine Karte mit einem höheren Höhe ist der Schatten ausgeprägter, der Schatten auf einer Karte einen helleren Schatten. CardView verwendet unter Android echte Erhebungen und dynamische Schatten 5.0 (API-Level 21) und höher.

Mit diesen Eigenschaften können Sie das Erscheinungsbild des CardView-Widgets anpassen:

  • Verwenden Sie das Attribut card_view:cardCornerRadius, um den Eckradius in Ihren Layouts festzulegen.
  • Verwenden Sie die Methode CardView.setRadius, um den Eckenradius im Code festzulegen.
  • Verwenden Sie das Attribut card_view:cardBackgroundColor, um die Hintergrundfarbe einer Karte festzulegen.