Android Kotlin Fundamentals 07.3: GridLayout z RecyclerView

Ten moduł Codelab jest częścią kursu Android Kotlin Fundamentals. Najwięcej korzyści przyniesie Ci ukończenie wszystkich ćwiczeń w kolejności. Wszystkie ćwiczenia z tego kursu znajdziesz na stronie docelowej kursu Android Kotlin Fundamentals.

Te ćwiczenia z programowania są częścią serii, która przeprowadzi Cię przez proces tworzenia aplikacji do śledzenia snu, która wyświetla dane o śnie w RecyclerView. Zalecamy wykonywanie wszystkich ćwiczeń w kolejności, ponieważ zadania są w nich przedstawiane krok po kroku.

W tej serii znajdziesz te codelaby:

• 7.1 Podstawy RecyclerView
• 7.2 DiffUtil i powiązanie danych z elementem RecyclerView
• 7.3 Układ siatki z elementem RecyclerView
• 7.4 Interakcja z elementami RecyclerView
• 7.5 Nagłówki w widoku RecyclerView

Wprowadzenie

Jedną z głównych zalet RecyclerView jest możliwość używania menedżerów układu do kontrolowania i modyfikowania strategii układu. LayoutManager zarządza sposobem rozmieszczenia elementów w RecyclerView.

RecyclerView zawiera gotowe menedżery układu do typowych zastosowań. Możesz na przykład użyć LinearLayout w przypadku list poziomych i pionowych lub GridLayout w przypadku siatek. W bardziej skomplikowanych przypadkach musisz wdrożyć niestandardowy element LayoutManager.

Z tego ćwiczenia w Codelabs dowiesz się, jak wyświetlać dane w układzie siatki zamiast listy. Będziesz pracować na aplikacji do śledzenia snu z poprzedniego ćwiczenia. (Jeśli nie masz aplikacji z poprzednich zajęć, możesz pobrać kod początkowy do tych zajęć).

Co warto wiedzieć

Musisz znać:

• Tworzenie podstawowego interfejsu użytkownika za pomocą elementów Activity, Fragments i Views
• Przechodzenie między fragmentami i używanie safeArgs do przekazywania danych między nimi
• Wyświetlanie modeli, fabryk modeli i transformacji
• LiveData i ich obserwatorzy
• Jak utworzyć bazę danych Room, utworzyć DAO i zdefiniować jednostki
• Jak używać korutyn do zadań związanych z bazą danych i innych długotrwałych zadań
• Jak wdrożyć podstawowy RecyclerView z Adapter, ViewHolder i układem elementów
• Jak wdrożyć powiązanie danych w przypadku RecyclerView
• Jak tworzyć i używać adapterów powiązań do przekształcania danych

Czego się nauczysz

• Jak używać innego LayoutManager, aby zmienić sposób wyświetlania danych w RecyclerView
• Jak utworzyć układ siatki dla danych o śnie

Jakie zadania wykonasz

• Skorzystaj z aplikacji do śledzenia snu z poprzedniego ćwiczenia z tej serii.
• Zastąp listę danych o śnie wyświetlaną przez RecyclerView w aplikacji siatką danych o śnie.

Aplikacja do śledzenia snu ma 2 ekrany reprezentowane przez fragmenty, jak pokazano na ilustracji poniżej.

Pierwszy ekran, widoczny po lewej stronie, zawiera przyciski rozpoczynania i zatrzymywania śledzenia. Na ekranie wyświetlają się niektóre dane dotyczące snu użytkownika. Przycisk Wyczyść trwale usuwa wszystkie dane zebrane przez aplikację na temat użytkownika. Drugi ekran, widoczny po prawej stronie, służy do wybierania oceny jakości snu.

Ta aplikacja korzysta z uproszczonej architektury z kontrolerem interfejsu, modelem widoku i LiveData oraz bazą danych Room do przechowywania danych o śnie.

Dane o śnie są wyświetlane w RecyclerView. W tym ćwiczeniu zmienisz aplikację tak, aby używała GridLayout. Ostatni ekran będzie wyglądać jak na zrzucie ekranu poniżej.

W poprzednim laboratorium, gdy dodawaliśmy RecyclerView do fragment_sleep_tracker.xml, dodaliśmy LinearLayoutManager bez żadnych dostosowań. Ten kod wyświetla dane w postaci listy pionowej.

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

LinearLayoutManager to najpopularniejszy i najprostszy menedżer układu w RecyclerView. Obsługuje on umieszczanie widoków podrzędnych w pionie i poziomie. Możesz na przykład użyć LinearLayoutManager, aby utworzyć karuzelę obrazów, po których użytkownik przewija w poziomie.

GridLayout

Innym typowym zastosowaniem jest wyświetlanie użytkownikowi dużej ilości danych, co można zrobić za pomocą elementu GridLayout. GridLayoutManager w przypadku RecyclerView wyświetla dane w postaci przewijanej siatki, jak pokazano poniżej.

Z punktu widzenia projektu GridLayout najlepiej sprawdza się w przypadku list, które można przedstawić jako ikony lub obrazy, np. list w aplikacji do przeglądania zdjęć. W aplikacji do śledzenia snu możesz wyświetlać każdą noc snu jako siatkę dużych ikon. Dzięki temu użytkownik będzie mógł szybko sprawdzić jakość snu.

Sposób rozmieszczania elementów w układzie GridLayout

GridLayout rozmieszcza elementy w siatce wierszy i kolumn. Przy założeniu przewijania w pionie domyślnie każdy element w wierszu zajmuje 1 „span”. (W tym przypadku jeden zakres jest równy szerokości jednej kolumny).

W pierwszych 2 przykładach poniżej każdy wiersz składa się z 3 zakresów. Domyślnie funkcja GridLayoutManager układa każdy element w jednym zakresie, aż do osiągnięcia określonej liczby zakresów. Gdy osiągnie liczbę zakresów, przechodzi do następnego wiersza.

Domyślnie każdy element zajmuje 1 przedział, ale możesz go poszerzyć, określając, ile przedziałów ma zajmować. Na przykład element u góry po prawej stronie (widoczny poniżej) zajmuje 3 kolumny.

Wskazówka: zakres może oznaczać „wiersz” lub „kolumnę”. W przypadku GridLayoutManager używasz spanCount, aby określić liczbę kolumn lub wierszy w siatce, a także ilość miejsca w siatce zajmowanego przez element w poziomie lub w pionie.

Podczas tworzenia GridLayoutManager orientację określa się niezależnie od liczby zakresów, a „zakres” nie zależy od kierunku. W konfiguracji pionowej (domyślnej) pojęcia „span” i „column” są równoważne.

W tym zadaniu weźmiesz RecyclerView, który został ukończony w ostatnim ćwiczeniu, i zaktualizujesz go, aby wyświetlał dane za pomocą GridLayoutManager. Możesz nadal używać aplikacji do śledzenia snu z poprzedniego laboratorium, albo pobrać aplikację RecyclerViewGridLayout-Starter z GitHub.

Krok 1. Zmień LayoutManager

1. W razie potrzeby pobierz aplikację RecyclerViewGridLayout-Starter z GitHuba i otwórz projekt w Android Studio.
2. Otwórz plik układu fragment_sleep_tracker.xml.
3. Usuń menedżera układu z definicji sleep_list RecyclerView.

Kod do usunięcia:

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

4. Otwórz pokój SleepTrackerFragment.kt.
5. W OnCreateView(), tuż przed instrukcją return, utwórz nowy pionowy układ GridLayoutManager z 3 zakresami.
   
   Konstruktor GridLayoutManager przyjmuje maksymalnie 4 argumenty: kontekst, czyli activity, liczbę zakresów (kolumn w domyślnym układzie pionowym), orientację (domyślnie pionową) i informację, czy układ jest odwrócony (domyślnie false).

val manager = GridLayoutManager(activity, 3)

6. Poniżej tej linii poproś RecyclerView o użycie tego GridLayoutManager. Element RecyclerView znajduje się w obiekcie powiązania i nazywa się sleepList. (Zobacz fragment_sleep_tracker.xml).

binding.sleepList.layoutManager = manager

Krok 2. Zmień układ

Obecny układ w list_item_sleep_night.xml wyświetla dane, używając całego wiersza na noc. W tym kroku zdefiniujesz bardziej kompaktowy układ kwadratowych elementów w siatce.

Wskazówka: jeśli nie chcesz utracić bieżącego układu, najpierw utwórz kopię pliku i nadaj jej nazwę list_item_sleep_night_linear.xml lub dodaj kod do komentarza zamiast go usuwać.

1. Otwórz pokój list_item_sleep_night.xml.
2. Usuń sleep_length TextView, ponieważ nie jest on potrzebny w nowym projekcie.
3. Przesuń element quality_string TextView, aby wyświetlał się pod elementem ImageView. Aby to zrobić, musisz zaktualizować wiele elementów. Oto ostateczny układ 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}" />

4. W widoku Projekt sprawdź, czy element quality_string TextView znajduje się pod elementem ImageView.

Ponieważ używasz powiązania danych, nie musisz niczego zmieniać w Adapter. Kod powinien działać, a lista powinna być wyświetlana w formie siatki.

5. Uruchom aplikację i sprawdź, jak dane o śnie są wyświetlane w siatce.
   
   Pamiętaj, że ConstraintLayout nadal zajmuje całą szerokość. Element GridLayoutManager nadaje widokowi stałą szerokość na podstawie jego zakresu. GridLayoutManager dokłada wszelkich starań, aby podczas tworzenia siatki spełnić wszystkie ograniczenia, dodając białe znaki lub przycinając elementy.

6. W sekcji SleepTrackerFragment w kodzie, który tworzy element GridLayoutManager, zmień liczbę zakresów dla elementu GridLayoutManger na 1. Uruchom aplikację, a zobaczysz listę.
   

val manager = GridLayoutManager(activity, 1)

7. Zmień liczbę kolumn dla GridLayoutManager na 10 i uruchom aplikację. Zauważ, że GridLayoutManager mieści 10 elementów w rzędzie, ale są one teraz przycięte.
8. Zmień liczbę zakresów na 5, a kierunek na GridLayoutManager.VERTICAL. Uruchom aplikację i zwróć uwagę na możliwość przewijania w poziomie. Aby to dobrze wyglądało, musisz użyć innego układu.

val manager = GridLayoutManager(activity, 5, GridLayoutManager.HORIZONTAL, false)

9. Nie zapomnij ustawić z powrotem liczby kolumn na 3 i orientacji na pionową.

Projekt Android Studio: RecyclerViewGridLayout

• Menedżerowie układu zarządzają sposobem rozmieszczenia elementów w RecyclerView.
• RecyclerView zawiera gotowe menedżery układu do typowych przypadków użycia, takich jak LinearLayout w przypadku list poziomych i pionowych oraz GridLayout w przypadku siatek.
• W bardziej skomplikowanych przypadkach użycia zaimplementuj niestandardowy element LayoutManager.
• Z punktu widzenia projektu element GridLayout najlepiej sprawdza się w przypadku list elementów, które można przedstawić jako ikony lub obrazy.
• GridLayout rozmieszcza elementy w siatce wierszy i kolumn. Przy założeniu przewijania w pionie każdy element w wierszu zajmuje tzw. „rozpiętość”.
• Możesz dostosować liczbę kolumn zajmowanych przez element, tworząc ciekawsze siatki bez konieczności używania niestandardowego menedżera układu.
• Utwórz układ elementu dla jednego elementu w siatce, a menedżer układu zajmie się rozmieszczeniem elementów.
• Wartość LayoutManager dla elementu RecyclerView możesz ustawić w pliku układu XML zawierającym element <RecyclerView> lub programowo.

Kursy Udacity:

• Tworzenie aplikacji na Androida w języku Kotlin
• Kotlin Bootcamp for Programmers

Dokumentacja dla deweloperów aplikacji na Androida:

• Tworzenie listy za pomocą elementu RecyclerView
• RecyclerView
• LayoutManager
• GridLayoutManager

W tej sekcji znajdziesz listę możliwych zadań domowych dla uczniów, którzy wykonują ten moduł w ramach kursu prowadzonego przez instruktora. Nauczyciel musi:

• W razie potrzeby przypisz pracę domową.
• Poinformuj uczniów, jak przesyłać projekty.
• Oceń zadania domowe.

Instruktorzy mogą korzystać z tych sugestii w dowolnym zakresie i mogą zadawać inne zadania domowe, które uznają za odpowiednie.

Jeśli wykonujesz ten kurs samodzielnie, możesz użyć tych zadań domowych, aby sprawdzić swoją wiedzę.

Odpowiedz na te pytania

Pytanie 1

Które z tych menedżerów układu są dostępne w Androidzie? Zaznacz wszystkie pasujące opcje.

▢ LinearLayouManager

▢ GridLayoutManager

▢ CircularLayoutManager

▢ StaggeredGridLayoutManager

Pytanie 2

Co to jest „zakres”?

▢ Rozmiar siatki utworzonej przez GridLayoutManager.

▢ Szerokość kolumny w siatce.

▢ Wymiary elementu w siatce.

▢ Liczba kolumn w siatce o orientacji pionowej.

Rozpocznij kolejną lekcję: 7.4. Interakcja z elementami RecyclerView

Te ćwiczenia z programowania są częścią serii, która przeprowadzi Cię przez proces tworzenia aplikacji do śledzenia snu, która wyświetla dane o śnie w RecyclerView. Zalecamy wykonywanie wszystkich ćwiczeń w kolejności, ponieważ zadania są w nich przedstawiane krok po kroku.

W tej serii znajdziesz te codelaby:

• 7.1 Podstawy RecyclerView
• 7.2 DiffUtil i powiązanie danych z elementem RecyclerView
• 7.3 Układ siatki z elementem RecyclerView
• 7.4 Interakcja z elementami RecyclerView
• 7.5 Nagłówki w widoku RecyclerView