Kartenbasiertes Layout erstellen

Schreiben Sie jetzt

Jetpack Compose ist das empfohlene UI-Toolkit für Android. Hier erfahren Sie, wie Sie in „Compose“ mit Layouts arbeiten.

Karte in Material 3 →

Anwendungen müssen Daten häufig in ähnlich formatierten Containern anzeigen, z. B. in Containern, die Informationen zu den Elementen in einer Liste enthalten. Über die CardView API kannst du Informationen auf Karten anzeigen lassen, die auf der gesamten Plattform einheitlich aussehen. Beispielsweise haben Karten eine Standardhöhe über der Ansichtsgruppe, in der sie enthalten sind. Daher zeichnet das System Schatten unter ihnen. Mithilfe von Karten können Sie eine Gruppe von Ansichten zusammenfassen und gleichzeitig einen einheitlichen Stil für den Container bereitstellen.

Abhängigkeiten hinzufügen

Das CardView-Widget ist Teil von AndroidX. Fügen Sie der Datei build.gradle Ihres Anwendungsmoduls die folgende Abhängigkeit hinzu, um sie in Ihrem Projekt zu verwenden:

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

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

Karten erstellen

Um ein CardView zu verwenden, fügen Sie es der Layoutdatei hinzu. Verwenden Sie es als Ansichtsgruppe, um andere Ansichten enthalten zu können. Im folgenden Beispiel enthält das 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 erzeugt in etwa Folgendes, vorausgesetzt, Sie verwenden dasselbe Android-Logobild:

Die Karte in diesem Beispiel wird mit einer Standardhöhe auf dem Bildschirm gezeichnet, wodurch das System einen Schatten darunter zeichnet. Mit dem Attribut card_view:cardElevation können Sie eine benutzerdefinierte Höhe für eine Karte festlegen. Eine Karte auf einer höheren Höhe hat einen ausgeprägteren Schatten, eine Karte auf einer niedrigeren Ebene einen helleren Schatten. CardView verwendet echte Höhenunterschiede und dynamische Schatten unter Android 5.0 (API-Level 21) und höher.

Mit diesen Eigenschaften können Sie die Darstellung des CardView-Widgets anpassen:

• Verwenden Sie das Attribut card_view:cardCornerRadius, um den Eckenradius in Ihren Layouts zu definieren.
• Verwenden Sie die Methode CardView.setRadius, um den Eckenradius im Code festzulegen.
• Die Hintergrundfarbe einer Karte kannst du mit dem Attribut card_view:cardBackgroundColor festlegen.