Android-Kotlin-Grundlagen 07.3: Gitterlayout mit RecyclerView

Dieses Codelab ist Teil des Android Kotlin Fundamentals-Kurss. Sie profitieren von diesem Kurs, wenn Sie nacheinander die Codelabs durcharbeiten. Alle Kurs-Codelabs finden Sie auf der Landingpage für Kotlin-Grundlagen für Android-Entwickler.

Einführung

Eine der wichtigsten Stärken von RecyclerView ist, dass du damit deine Layoutstrategie steuern und anpassen kannst. Mithilfe von LayoutManager wird festgelegt, wie die Elemente im RecyclerView angeordnet sind.

RecyclerView verfügt über vorkonfigurierte Layoutmanager für gängige Anwendungsfälle. Du kannst beispielsweise LinearLayout für horizontale und vertikale Listen oder GridLayout für Raster verwenden. Für kompliziertere Anwendungsfälle musst du ein benutzerdefiniertes LayoutManager-Objekt implementieren.

In diesem Codelab lernen Sie, wie Sie Daten in einem Rasterlayout anstelle einer Liste anzeigen – auf Grundlage der Schlaf-Tracker-App aus dem vorherigen Codelab. Wenn Sie die App aus dem vorherigen Codelab nicht haben, können Sie den Startcode für dieses Codelab herunterladen.

Was Sie bereits wissen sollten

Sie sollten mit Folgendem vertraut sein:

  • Einfache Benutzeroberfläche mit Activity, Fragments und Views erstellen
  • Zwischen Fragmenten wechseln und safeArgs verwenden, um Daten zwischen Fragmenten zu übergeben
  • Modelle ansehen, Modellfabriken und Transformationen ansehen
  • LiveData und ihre Betrachter
  • Room-Datenbank, DAO und Entitäten erstellen
  • Koroutinen für Datenbankaufgaben und andere lang andauernde Aufgaben verwenden
  • Einfache RecyclerView mit einem Adapter-, ViewHolder- und Elementlayout implementieren
  • Datenbindung für RecyclerView implementieren
  • Bindungsadapter für die Transformation von Daten erstellen und verwenden

Lerninhalte

  • So kannst du andere LayoutManager verwenden, um die Anzeige deiner Daten in RecyclerView zu ändern
  • So erstellen Sie ein Rasterlayout für Ihre Schlafdaten

Aufgaben

  • Baue auf der Schlaf-Tracker-App aus dem vorherigen Codelab dieser Serie auf.
  • Ersetze die Liste, die von der RecyclerView in der App angezeigt wird, durch ein Raster mit Schlafdaten.

Die Schlaf-Tracker-App hat zwei Bildschirme, die als Fragmente dargestellt sind (siehe Abbildung unten).

Auf dem ersten Bildschirm auf der linken Seite finden Sie Schaltflächen zum Starten und Beenden der Aufzeichnung. Auf dem Bildschirm werden einige Schlafdaten des Nutzers angezeigt. Mit der Schaltfläche Löschen werden alle Daten gelöscht, die die App für den Nutzer erfasst hat. Auf dem zweiten Bildschirm rechts wird die Qualität des Schlafs angezeigt.

Diese App verwendet eine vereinfachte Architektur mit einem UI-Controller, Modell ansehen und LiveData sowie eine Room-Datenbank, um Schlafdaten zu speichern.

Die Schlafdaten werden in RecyclerView angezeigt. In diesem Codelab änderst du die App zu GridLayout. Der letzte Bildschirm sieht wie der folgende Screenshot aus.

Als du in einem vorherigen Codelab das RecyclerView zu fragment_sleep_tracker.xml hinzugefügt hast, hast du ohne Änderungen ein LinearLayoutManager hinzugefügt. Dieser Code zeigt die Daten als vertikale Liste an.

app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"

LinearLayoutManager ist der gängigste und unkomplizierte Layout-Manager für RecyclerView und unterstützt sowohl die horizontale als auch die vertikale Platzierung von untergeordneten Ansichten. Du kannst beispielsweise mit LinearLayoutManager ein Karussell mit Bildern erstellen, in dem der Nutzer horizontal scrollt.

Rasterlayout

Ein weiterer häufiger Anwendungsfall besteht darin, dem Nutzer eine Menge Daten anzuzeigen. Sie können dies mithilfe von GridLayout tun. Mit GridLayoutManager für RecyclerView werden die Daten als scrollbares Raster dargestellt, wie unten dargestellt.

Aus Sicht des Designes eignet sich GridLayout am besten für Listen, die als Symbole oder Bilder dargestellt werden können, z. B. Listen in einer Foto-App. In der Schlaf-Tracker-App könnte jede Nacht des Schlafs als Raster großer Symbole dargestellt werden. So sieht der Nutzer auf einen Blick, wie gut du geschlafen hast.

Rasterlayout von Elementen

In GridLayout werden Elemente in einem Raster aus Zeilen und Spalten angeordnet. Standardmäßig wird angenommen, dass jedes Element in einer Reihe ein "span&t In diesem Fall entspricht ein Span der Breite einer Spalte.

In den ersten beiden Beispielen unten ist jede Zeile aus drei Spannen bestehen. Standardmäßig gibt GridLayoutManager jedes Element in einem Span an, bis die Span-Anzahl wie angegeben angegeben wird. Wenn die Spanne erreicht ist, wird sie zur nächsten Zeile umgebrochen.

Standardmäßig nimmt jedes Element eine Spanne ein, Sie können aber ein Element breiter machen, indem Sie angeben, wie viele Spannen belegt werden sollen. Das oberste Element auf dem Bildschirm ganz rechts (siehe unten) umfasst beispielsweise drei Spans.

Für diese Aufgabe führen Sie den RecyclerView aus, den Sie in der letzten Übung abgeschlossen haben, um sie mithilfe eines GridLayoutManagers anzuzeigen. Sie können die Schlaf-Tracker-App aus dem vorherigen Codelab weiterhin verwenden oder die RecyclerViewGridLayout-Starter App von GitHub herunterladen.

Schritt 1: LayoutManager ändern

  1. Laden Sie bei Bedarf die App RecyclerViewGridLayout-Starter für dieses Codelab von GitHub herunter und öffnen Sie das Projekt in Android Studio.
  2. Öffne die fragment_sleep_tracker.xml-Layoutdatei.
  3. Entferne den Layoutmanager aus der Definition des sleep_list RecyclerView.

Code, der gelöscht werden soll:

app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager
  1. Öffnen Sie SleepTrackerFragment.kt.
  2. Erstellen Sie in OnCreateView() unmittelbar vor der return-Anweisung eine neue vertikale GridLayoutManager-Ansicht mit drei Spans von oben nach unten.

    Der GridLayoutManager-Konstruktor kann bis zu vier Argumente verwenden: einen Kontext, also die activity, die Anzahl der Spans (Spalten im Standard-Vertikallayout), eine Ausrichtung (Standard ist vertikal) und ob das umgekehrte Layout ist (Standard ist false). 
val manager = GridLayoutManager(activity, 3)
  1. Unterhalb dieser Zeile kannst du die RecyclerView bitten, diese GridLayoutManager zu verwenden. RecyclerView befindet sich im Bindungsobjekt und heißt sleepList. (Siehe fragment_sleep_tracker.xml.)
binding.sleepList.layoutManager = manager

Schritt 2: Layout ändern

Das aktuelle Layout in list_item_sleep_night.xml zeigt die Daten an, indem es eine ganze Zeile pro Nacht verwendet. In diesem Schritt legen Sie ein kompakteres Layout für ein quadratisches Element für das Raster fest.

  1. Öffnen Sie list_item_sleep_night.xml.
  2. Lösche die TextView für sleep_length, weil das neue Design sie nicht benötigt.
  3. Verschieben Sie das TextView-Objekt von quality_string so, dass es unter dem ImageView angezeigt wird. Dazu müssen Sie einige Dinge aktualisieren. Hier ist das endgültige Layout für die TextView von quality_string:
<TextView
   android:id="@+id/quality_string"
   android:layout_width="0dp"
   android:layout_height="20dp"
   android:textAlignment="center"
   app:layout_constraintBottom_toBottomOf="parent"
   app:layout_constraintEnd_toEndOf="@+id/quality_image"
   app:layout_constraintHorizontal_bias="0.0"
   app:layout_constraintStart_toStartOf="@+id/quality_image"
   app:layout_constraintTop_toBottomOf="@+id/quality_image"
   tools:text="Excellent!!!"
   app:sleepQualityString="@{sleep}" />
  1. Stellen Sie in der Designansicht sicher, dass sich der quality_string TextView unter dem ImageView befindet.

Da Sie die Datenbindung verwendet haben, müssen Sie nichts in der Adapter ändern. Der Code sollte einfach funktionieren und Ihre Liste sollte als Raster dargestellt werden.

  1. Führe die App aus und beobachte, wie die Schlafdaten in einem Raster angezeigt werden.

    Beachten Sie, dass ConstraintLayout weiterhin die gesamte Breite einnimmt. GridLayoutManager weist Ihrer Ansicht basierend auf ihrer Spanne eine feste Breite zu. GridLayoutManager ist bestrebt, alle Einschränkungen beim Gestalten des Rasters zu erfüllen und Leerzeichen oder Clips hinzuzufügen.
  1. Ändern Sie in SleepTrackerFragment im Code, der GridLayoutManager erstellt, die Anzahl der Spannen für GridLayoutManger in 1. Führen Sie die App aus. Sie erhalten eine Liste.
val manager = GridLayoutManager(activity, 1)
  1. Ändern Sie die Anzahl der Spannen für GridLayoutManager in 10 und führen Sie die App aus. Beachten Sie, dass das GridLayoutManager in 10 aufeinanderfolgenden Elementen passt, aber die Elemente jetzt gekürzt werden.
  2. Ändern Sie die Anzahl der Spannen in 5 und die Richtung in GridLayoutManager.VERTICAL. Führen Sie die App aus und beachten Sie, dass Sie horizontal scrollen können. Sie benötigen hierfür ein anderes Layout.
val manager = GridLayoutManager(activity, 5, GridLayoutManager.HORIZONTAL, false)
  1. Vergessen Sie nicht, die Spanne zurück auf 3 und die Ausrichtung auf vertikal zu setzen.

Android Studio-Projekt: RecyclerViewGridLayout
  • Layoutmanager verwalten die Anordnung der Elemente im RecyclerView.
  • RecyclerView enthält vorkonfigurierte Layoutmanager für häufige Anwendungsfälle wie eine horizontale und eine vertikale Liste und LinearLayout für Raster.
  • Für kompliziertere Anwendungsfälle solltest du ein benutzerdefiniertes LayoutManager-Objekt implementieren.
  • Aus Designsicht eignet sich GridLayout am besten für Listen von Elementen, die als Symbole oder Bilder dargestellt werden können.
  • In GridLayout werden Elemente in einem Raster aus Zeilen und Spalten angeordnet. Bei vertikalem Scrollen verwendet jedes Element in einer Reihe die sogenannte „Spannung“.
  • Sie können anpassen, wie viele Spannen ein Element in Anspruch nimmt. So lassen sich interessante Raster erstellen, ohne dass ein benutzerdefinierter Layoutmanager erforderlich ist.
  • Erstellen Sie ein Elementlayout für ein Element im Raster. Der Layoutmanager übernimmt die Anordnung.
  • Du kannst LayoutManager für RecyclerView entweder in der XML-Layoutdatei mit dem <RecyclerView>-Element oder programmatisch festlegen.

Udacity-Kurse:

Android-Entwicklerdokumentation:

In diesem Abschnitt werden mögliche Hausaufgaben für Schüler oder Studenten aufgeführt, die an diesem von einem Kursleiter geleiteten Codelab arbeiten. Die Lehrkraft kann Folgendes tun:

  • Bei Bedarf können Sie die entsprechenden Aufgaben zuweisen.
  • Schülern mitteilen, wie sie Aufgaben für die Aufgabe abgeben
  • Benoten Sie die Hausaufgaben.

Lehrkräfte können diese Vorschläge so oft oder so oft verwenden, wie sie möchten. anderen Aufgaben können sie nach Belieben zugewiesen werden.

Wenn Sie alleine an diesem Codelab arbeiten, können Sie Ihr Wissen mit diesen Hausaufgaben testen.

Diese Fragen beantworten

Frage 1

Welche der folgenden Antworten sind Layout-Manager von Android? Wählen Sie alle zutreffenden Antworten aus.

▢ LinearLayouManager

▢ GridLayoutManager

▢ CircularLayoutManager

▢ StaggeredGridLayoutManager

Frage 2

Was ist „spant“?

▢: Die Größe eines von GridLayoutManager erstellten Rasters.

▢ Die Breite einer Spalte im Raster.

▢ Abmessungen eines Elements in einem Raster.

▢: Die Anzahl der Spalten in einem Raster mit vertikaler Ausrichtung

Beginnen Sie mit der nächsten Lektion: 7.4: Mit RecyclerView-Elementen interagieren