Grundlagen von Android und Kotlin 07.3: GridLayout mit RecyclerView

Dieses Codelab ist Teil des Kurses „Grundlagen von Android und Kotlin“. Sie können diesen Kurs am besten nutzen, wenn Sie die Codelabs der Reihe nach durcharbeiten. Alle Codelabs des Kurses sind auf der Landingpage für Codelabs zu den Grundlagen von Android und Kotlin aufgeführt.

Einführung

Einer der Hauptvorteile von RecyclerView ist, dass Sie Layoutmanager verwenden können, um Ihre Layoutstrategie zu steuern und zu ändern. Ein LayoutManager bestimmt, wie die Elemente in der RecyclerView angeordnet werden.

RecyclerView bietet sofort einsatzbereite Layoutmanager für gängige Anwendungsfälle. Sie können beispielsweise LinearLayout für horizontale und vertikale Listen oder GridLayout für Tabellen verwenden. Für kompliziertere Anwendungsfälle müssen Sie eine benutzerdefinierte LayoutManager implementieren.

In diesem Codelab erfahren Sie, wie Sie Daten in einem Rasterlayout anstelle einer Liste anzeigen. Dabei wird auf der Sleep-Tracker-App aus dem vorherigen Codelab aufgebaut. 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, Modell-Factories und Transformationen ansehen
  • LiveData und ihre Beobachter
  • So erstellen Sie eine Room-Datenbank, ein DAO und definieren Entitäten
  • Coroutinen für Datenbankaufgaben und andere zeitaufwendige Aufgaben verwenden
  • So implementieren Sie ein einfaches RecyclerView mit einem Adapter, ViewHolder und Elementlayout
  • Datenbindung für RecyclerView implementieren
  • Bindungsadapter zum Transformieren von Daten erstellen und verwenden

Lerninhalte

  • So ändern Sie die Darstellung Ihrer Daten im RecyclerView mit einem anderen LayoutManager
  • Rasterlayout für Schlafdaten erstellen

Aufgaben

  • In diesem Codelab bauen Sie auf der Sleep-Tracker-App aus dem vorherigen Codelab dieser Reihe auf.
  • Ersetzen Sie die Liste der Schlafdaten, die von RecyclerView in der App angezeigt werden, durch ein Raster mit Schlafdaten.

Die Schlaftracking-App hat zwei Bildschirme, die durch Fragmente dargestellt werden, wie in der Abbildung unten zu sehen ist.

Auf dem ersten Bildschirm, der links angezeigt wird, befinden sich Schaltflächen zum Starten und Beenden des Trackings. Auf dem Display werden einige der Schlafdaten des Nutzers angezeigt. Mit der Schaltfläche Löschen werden alle Daten, die die App für den Nutzer erhoben hat, dauerhaft gelöscht. Auf dem zweiten Bildschirm rechts können Sie eine Bewertung der Schlafqualität auswählen.

Diese App verwendet eine vereinfachte Architektur mit einem UI-Controller, einem View-Modell und LiveData sowie einer Room-Datenbank zum Speichern von Schlafdaten.

Die Schlafdaten werden in einem RecyclerView angezeigt. In diesem Codelab ändern Sie die App so, dass sie eine GridLayout verwendet. Der endgültige Bildschirm sieht so aus:

In einem vorherigen Codelab haben Sie beim Hinzufügen von RecyclerView zu fragment_sleep_tracker.xml ein LinearLayoutManager ohne Anpassungen hinzugefügt. In diesem Code werden die Daten als vertikale Liste angezeigt.

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

LinearLayoutManager ist der gängigste und einfachste Layoutmanager für RecyclerView. Er unterstützt sowohl die horizontale als auch die vertikale Platzierung von untergeordneten Ansichten. Sie könnten beispielsweise LinearLayoutManager verwenden, um ein Karussell mit Bildern zu erstellen, durch das der Nutzer horizontal scrollt.

GridLayout

Ein weiterer häufiger Anwendungsfall ist, wenn Sie dem Nutzer viele Daten präsentieren müssen. Das können Sie mit GridLayout tun. Im GridLayoutManager für RecyclerView werden die Daten als scrollbares Raster dargestellt, wie unten zu sehen ist.

Aus Designperspektive ist GridLayout am besten für Listen geeignet, die als Symbole oder Bilder dargestellt werden können, z. B. Listen in einer App zum Durchsuchen von Fotos. In der Schlaftracking-App könnten Sie jede Nacht als Raster mit großen Symbolen darstellen. So kann sich der Nutzer auf einen Blick einen Überblick über seine Schlafqualität verschaffen.

So werden Elemente in GridLayout angeordnet

Mit GridLayout werden Elemente in einem Raster aus Zeilen und Spalten angeordnet. Bei vertikalem Scrollen nimmt standardmäßig jedes Element in einer Zeile einen „Span“ ein. In diesem Fall entspricht ein Bereich der Breite einer Spalte.

In den ersten beiden Beispielen unten besteht jede Zeile aus drei Spans. Standardmäßig werden mit GridLayoutManager alle Elemente in einem Bereich angeordnet, bis die von Ihnen angegebene Anzahl von Bereichen erreicht ist. Wenn die Anzahl der Spans erreicht ist, wird in die nächste Zeile umgebrochen.

Standardmäßig nimmt jedes Element einen Bereich ein. Sie können ein Element jedoch breiter machen, indem Sie angeben, wie viele Bereiche es einnehmen soll. Das oberste Element auf dem Bildschirm ganz rechts (siehe unten) nimmt beispielsweise drei Spannen ein.

In dieser Aufgabe nehmen Sie das RecyclerView, das Sie in der letzten Übung erstellt haben, und aktualisieren es, damit Daten mit einem GridLayoutManager angezeigt werden. Sie können die Schlaftracking-App aus dem vorherigen Codelab weiter 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. Öffnen Sie die Layoutdatei fragment_sleep_tracker.xml.
  3. Entfernen Sie den Layoutmanager aus der Definition von sleep_list RecyclerView.

Zu löschender Code:

app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager
  1. Öffnen Sie SleepTrackerFragment.kt.
  2. Erstellen Sie in OnCreateView() direkt vor der return-Anweisung ein neues vertikales GridLayoutManager mit drei Spannen.

    Der Konstruktor GridLayoutManager akzeptiert bis zu vier Argumente: einen Kontext, der activity ist, die Anzahl der Spannen (Spalten im vertikalen Standardlayout), eine Ausrichtung (Standard ist vertikal) und ob es sich um ein umgekehrtes Layout handelt (Standard ist false). 
val manager = GridLayoutManager(activity, 3)
  1. Geben Sie unter dieser Zeile an, dass RecyclerView diese GridLayoutManager verwenden soll. RecyclerView befindet sich im Bindungsobjekt und heißt sleepList. (Siehe fragment_sleep_tracker.xml.)
binding.sleepList.layoutManager = manager

Schritt 2: Layout ändern

Im aktuellen Layout in list_item_sleep_night.xml werden die Daten in einer ganzen Zeile pro Nacht dargestellt. In diesem Schritt definieren Sie ein kompakteres quadratisches Elementlayout für das Raster.

  1. Öffnen Sie list_item_sleep_night.xml.
  2. Löschen Sie die sleep_length TextView, da sie im neuen Design nicht benötigt wird.
  3. Verschieben Sie quality_string TextView, sodass sie unter ImageView angezeigt wird. Dazu müssen Sie einige Dinge aktualisieren. Hier ist das endgültige Layout für quality_string TextView:
<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. Prüfen Sie in der Ansicht Design, ob sich das 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 angezeigt werden.

  1. Führen Sie die App aus und sehen Sie sich an, wie die Schlafdaten in einem Raster dargestellt werden.

    Beachten Sie, dass die ConstraintLayout weiterhin die gesamte Breite einnimmt. Mit dem GridLayoutManager wird der Ansicht basierend auf ihrer Spanne eine feste Breite zugewiesen. GridLayoutManager versucht, beim Layout des Rasters alle Einschränkungen zu berücksichtigen, indem es Leerräume einfügt oder Elemente abschneidet.
  1. Ändern Sie in SleepTrackerFragment im Code, mit dem die GridLayoutManager erstellt wird, die Anzahl der Spannen für GridLayoutManger in 1. Wenn Sie die App ausführen, wird eine Liste angezeigt.
val manager = GridLayoutManager(activity, 1)
  1. Ändern Sie die Anzahl der Spannen für GridLayoutManager in 10 und führen Sie die App aus. GridLayoutManager bietet jetzt Platz für 10 Elemente in einer Zeile, aber die Elemente werden abgeschnitten.
  2. Ändern Sie die Anzahl der Spannen in 5 und die Richtung in GridLayoutManager.VERTICAL. Führen Sie die App aus und sehen Sie sich an, wie Sie horizontal scrollen können. Dafür ist ein anderes Layout erforderlich.
val manager = GridLayoutManager(activity, 5, GridLayoutManager.HORIZONTAL, false)
  1. Vergessen Sie nicht, die Spaltenanzahl wieder auf 3 und die Ausrichtung auf „vertikal“ zu setzen.

Android Studio-Projekt: RecyclerViewGridLayout
  • Layoutmanager verwalten, wie die Elemente im RecyclerView angeordnet werden.
  • RecyclerView bietet sofort einsatzbereite Layoutmanager für gängige Anwendungsfälle wie LinearLayout für horizontale und vertikale Listen und GridLayout für Raster.
  • Bei komplexeren Anwendungsfällen sollten Sie eine benutzerdefinierte LayoutManager implementieren.
  • Aus gestalterischer Sicht eignet sich GridLayout am besten für Listen mit Elementen, die als Symbole oder Bilder dargestellt werden können.
  • Mit GridLayout werden Elemente in einem Raster aus Zeilen und Spalten angeordnet. Bei vertikalem Scrollen nimmt jedes Element in einer Zeile einen sogenannten „Span“ ein.
  • Sie können anpassen, wie viele Spannen ein Element einnimmt, um interessantere Grids zu erstellen, ohne dass ein benutzerdefinierter Layoutmanager erforderlich ist.
  • Sie erstellen ein Elementlayout für ein Element im Raster und der Layoutmanager kümmert sich um die Anordnung der Elemente.
  • Sie können LayoutManager für RecyclerView entweder in der XML-Layoutdatei, die das <RecyclerView>-Element enthält, oder programmatisch festlegen.

Udacity-Kurse:

Android-Entwicklerdokumentation:

In diesem Abschnitt werden mögliche Hausaufgaben für Schüler und Studenten aufgeführt, die dieses Codelab im Rahmen eines von einem Kursleiter geleiteten Kurses durcharbeiten. Es liegt in der Verantwortung des Kursleiters, Folgendes zu tun:

  • Weisen Sie bei Bedarf Aufgaben zu.
  • Teilen Sie den Schülern/Studenten mit, wie sie Hausaufgaben abgeben können.
  • Benoten Sie die Hausaufgaben.

Lehrkräfte können diese Vorschläge nach Belieben nutzen und auch andere Hausaufgaben zuweisen, die sie für angemessen halten.

Wenn Sie dieses Codelab selbst durcharbeiten, können Sie mit diesen Hausaufgaben Ihr Wissen testen.

Beantworten Sie diese Fragen

Frage 1

Welche der folgenden Layoutmanager werden von Android bereitgestellt? Wähle alle zutreffenden Antworten aus.

▢ LinearLayouManager

▢ GridLayoutManager

▢ CircularLayoutManager

▢ StaggeredGridLayoutManager

Frage 2

Was ist ein „Zeitraum“?

▢ Die Größe eines Rasters, das von GridLayoutManager erstellt wurde.

▢ Die Breite einer Spalte im Raster.

▢ Die Abmessungen eines Elements in einem Raster.

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

Nächste Lektion starten: 7.4: Mit RecyclerView-Elementen interagieren