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:
Groovig
dependencies { implementation "androidx.cardview:cardview:1.0.0" }
Kotlin
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.