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.
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:
<ph type="x-smartling-placeholder">![Ein Bild, das eine einzelne Karte zeigt](https://developer.android.com/static/images/cards/card_basic_example.png?authuser=9&hl=de)
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
.