Kartenbasiertes Layout erstellen

Funktion „Schreiben“ ausprobieren

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

Karte in Material 3 →

Anwendungen müssen oft Daten in ähnlich gestalteten Containern anzeigen, z. B. Container mit Informationen zu den Elementen in einer Liste. Das System bietet die CardView API, mit der du Informationen auf Karten anzeigen kannst, die auf der gesamten Plattform einheitlich aussehen. Karten haben beispielsweise eine Standardhöhe über der enthaltenden Ansichtsgruppe, sodass das System Schatten darunter zeichnet. Kacheln bieten die Möglichkeit, eine Gruppe von Ansichten aufzunehmen und gleichzeitig einen einheitlichen Stil für den Container zu schaffen.

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:

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

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

Karten erstellen

Wenn Sie ein CardView verwenden möchten, fügen Sie es der Layoutdatei hinzu. Verwenden Sie es als Ansichtsgruppe, um andere Ansichten einzubeziehen. Im folgenden Beispiel enthält CardView einen 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 etwas Ähnliches wie das folgende, vorausgesetzt, Sie verwenden dasselbe Android-Logobild:

Die Karte in diesem Beispiel wird mit einer Standardhöhe auf dem Bildschirm dargestellt, was dazu führt, dass das System einen Schatten darunter zeichnet. Mit dem Attribut card_view:cardElevation kannst du eine benutzerdefinierte Höhe für eine Karte angeben. Eine Karte mit einer höheren Höhe hat einen ausgeprägteren Schatten und eine Karte mit einer niedrigeren Höhe einen helleren Schatten. CardView verwendet unter Android 5.0 (API-Level 21) und höher die tatsächliche Höhe und dynamische Schatten.

Mit diesen Eigenschaften kannst du die Darstellung des CardView-Widgets anpassen:

• Verwenden Sie das Attribut card_view:cardCornerRadius, um den Eckenradius in Ihren Layouts festzulegen.
• Verwenden Sie die Methode CardView.setRadius, um den Eckenradius in Ihrem Code festzulegen.
• Die Hintergrundfarbe einer Karte lässt sich mit dem Attribut card_view:cardBackgroundColor festlegen.