Erstellen eines kartenbasierten Layouts

Apps müssen oft Daten in ähnlich gestalteten Containern anzeigen. Diese Container werden oft in Listen verwendet, um die Informationen der einzelnen Elemente zu speichern. Das System bietet mit derCardView API eine einfache Möglichkeit, Informationen in Karten darzustellen, die plattformübergreifend ein einheitliches Aussehen haben. Diese Karten sind standardmäßig höher als die sie enthaltende Ansichtsgruppe, so dass das System einen Schatten unter sie zeichnet. Karten bieten eine einfache Möglichkeit, eine Gruppe von Ansichten zu enthalten und gleichzeitig einen konsistenten Stil für den Container bereitzustellen.

Abbildung 1. Kartenbeispiele

Hinzufügen der Abhängigkeiten

Das CardViewWidget ist Teil von AndroidX. Um es in Ihrem Projekt zu verwenden, fügen Sie die folgende Abhängigkeit zur build.gradle-Datei Ihres App-Moduls hinzu:

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

Create Cards

Um das CardView zu verwenden, müssen Sie es zu Ihrer Layout-Datei hinzufügen. Verwenden Sie es als eine Ansichtsgruppe, die andere Ansichten enthält. In diesem Beispiel enthält CardView eine einzelne TextViewKarte, die dem Benutzer einige Informationen anzeigt.

Die Karten werden auf dem Bildschirm mit einer Standarderhebung gezeichnet, was dazu führt, dass das System einen Schatten unter sie zeichnet. Sie können mit dem Attributcard_view:cardElevation eine eigene Höhe für eine Karte angeben. Dadurch wird ein ausgeprägterer Schatten mit einer größeren Höhe gezeichnet, und eine geringere Höhe führt zu einem helleren Schatten.CardView verwendet echte Höhe und dynamische Schatten auf Android 5.0 (API-Level 21) und höher und fällt auf eine programmatische Schattenimplementierung auf früheren Versionen zurück.

Verwenden Sie diese Eigenschaften, um das Aussehen des Widgets CardView anzupassen:

  • Um den Eckenradius in Ihren Layouts einzustellen, verwenden Sie das Attribut card_view:cardCornerRadius.
  • Um den Eckenradius in Ihrem Code einzustellen, verwenden Sie die Methode CardView.setRadius.
  • Um die Hintergrundfarbe einer Karte einzustellen, verwenden Sie das Attribut card_view:cardBackgroundColor.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.