Diese Seite wurde von der Cloud Translation API übersetzt.

Kartenbasiertes Layout erstellen

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 werden auf Karten angezeigt, die auf der gesamten Plattform einheitlich aussehen. Für Beispiel: Karten haben eine Standardhöhe über der Ansichtsgruppe, in der sie enthalten sind. darunter Schatten. Mithilfe von Kacheln können Sie und gleichzeitig einen einheitlichen Stil für den Container zur Verfügung stellen.

Ein Bild, das anhand von Karten einen Einblick in die Benutzeroberfläche einer App zeigt — </ph> **Abbildung 1**: Eine auf Karten basierende Benutzeroberfläche.

Abhängigkeiten hinzufügen

Das CardView-Widget ist Teil von AndroidX. Zur Verwendung in deinem Projekt die folgende Abhängigkeit zum build.gradle deines App-Moduls hinzu Datei:

Groovig

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. Sie können es als Datenansichtsgruppe verwenden, andere Ansichten enthalten. Im folgenden Beispiel enthält CardView einen ImageView und einige TextViews, um dem Nutzer einige 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, es wird davon ausgegangen, verwenden Sie dasselbe Android-Logobild:

Ein Bild, das eine einzelne Karte zeigt — </ph> **Abbildung 2**: Ein einfaches Beispiel für ein CardView-basiertes Layout.

Die Karte in diesem Beispiel wird auf dem Bildschirm mit einer Standardhöhe gezeichnet, zeichnet das System einen Schatten. Sie können eine benutzerdefinierte Höhe für eine Karte mit dem Attribut card_view:cardElevation. 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 die Darstellung des CardView-Widgets anpassen:

Verwenden Sie zum Festlegen des Eckenradius in Ihren Layouts den card_view:cardCornerRadius. .
Verwenden Sie die Methode CardView.setRadius, um den Eckenradius im Code festzulegen.
Um die Hintergrundfarbe einer Karte festzulegen, verwende das card_view:cardBackgroundColor .