Android Kotlin Fundamentals 07.3: GridLayout z RecyclerView

Te ćwiczenia są częścią kursu Android Kotlin Fundamentals. Skorzystaj z tego kursu, jeśli będziesz wykonywać kolejno kilka ćwiczeń z programowania. Wszystkie ćwiczenia z kursu są wymienione na stronie docelowej ćwiczeń z programowania na temat Kotlin.

Wstęp

Jedną z największych zalet systemu RecyclerView jest to, że pozwala on używać menedżerów układu, aby kontrolować i modyfikować strategię dotyczącą układu. LayoutManager zarządza sposobem rozmieszczenia elementów w jednostce organizacyjnej RecyclerView.

W aplikacji RecyclerView dostępne są gotowe do użycia szablony do typowych zastosowań. Możesz na przykład użyć LinearLayout w przypadku list poziomych i pionowych lub GridLayout w siatce. W bardziej złożonych przypadkach musisz wdrożyć niestandardowy element LayoutManager.

Z tego ćwiczenia z programowania dowiesz się, jak wyświetlać dane za pomocą układu siatki, a nie listy, opartej na aplikacji do monitorowania snu z poprzedniego ćwiczenia. (Jeśli nie masz aplikacji z poprzedniego ćwiczenia z programowania, możesz pobrać kod startowy tego ćwiczenia).

Co musisz wiedzieć

Pamiętaj:

  • Tworzenie podstawowego interfejsu użytkownika za pomocą elementów Activity, Fragments i Views
  • Przechodzenie między fragmentami i używanie funkcji safeArgs do przekazywania danych między fragmentami
  • Wyświetlanie modeli, wyświetlanie fabryk i przekształceń
  • LiveData i jego obserwatorzy
  • Jak utworzyć bazę danych Room, utworzyć DAO i określić encje
  • Jak używać algorytmów do obsługi baz danych lub innych długotrwałych zadań
  • Jak wdrożyć podstawowy element RecyclerView z elementem Adapter, ViewHolder i układem elementu
  • Jak zaimplementować wiązanie danych aplikacji RecyclerView
  • Tworzenie i używanie adapterów wiązań do przekształcania danych

Czego się nauczysz

  • Jak zmienić typ wyświetlania danych w RecyclerView za pomocą innego atrybutu LayoutManager
  • Jak utworzyć siatkę na potrzeby danych o śnie

Jakie zadania wykonasz:

  • Wykorzystaj aplikację do monitorowania snu z poprzedniego ćwiczenia z tej serii.
  • Zastąp listę danych dotyczących snu wyświetlaną przez RecyclerView w aplikacji siatką danych o śnie.

Aplikacja monitorowania snu ma 2 ekrany reprezentowane przez fragmenty, jak widać na rysunku poniżej.

Na pierwszym ekranie po lewej stronie znajdują się przyciski rozpoczynające i zatrzymujące śledzenie. Na ekranie pojawią się niektóre dane dotyczące snu użytkownika. Kliknięcie przycisku Wyczyść powoduje trwałe usunięcie wszystkich danych użytkownika zbieranych przez aplikację. Na drugim ekranie (po prawej) możesz wybrać ocenę jakości snu.

Ta aplikacja ma uproszczoną architekturę z kontrolerem interfejsu, modelem wyświetlania i LiveData, a także bazę danych Room do przechowywania danych o śnie.

Dane dotyczące snu są wyświetlane w RecyclerView. W ramach tego ćwiczenia zmieniasz aplikację na GridLayout. Ostatni ekran będzie wyglądać tak jak na zrzucie ekranu poniżej.

Gdy w poprzednim ćwiczeniu z programowania dodano RecyclerView do elementu fragment_sleep_tracker.xml, dodano LinearLayoutManager bez żadnych dostosowań. Ten kod wyświetla dane jako listę pionową.

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

LinearLayoutManager jest najpopularniejszym i najprostszym menedżerem układu dla RecyclerView. Obsługuje zarówno poziome, jak i pionowe miejsca docelowe widoków podrzędnych. Możesz na przykład użyć LinearLayoutManager, by utworzyć karuzelę obrazów, które użytkownik przewija w poziomie.

Układ siatki

Innym typowym przypadkiem jest konieczność wyświetlenia dużej ilości danych użytkownikowi, co możesz zrobić za pomocą funkcji GridLayout. GridLayoutManager dla RecyclerView pokazuje układ danych w postaci siatki, którą widać poniżej.

Z punktu widzenia projektu GridLayout najlepiej sprawdza się w przypadku list, które można przedstawiać jako ikony lub obrazy (np. list w aplikacji do przeglądania zdjęć). W aplikacji do śledzenia snu możesz pokazywać każdą noc snu jako siatkę dużych ikon. Taki projekt pozwoli użytkownikowi szybko sprawdzić jakość snu.

Jak GridLayout rozmieszcza elementy

GridLayout umieszcza elementy w siatce wierszy i kolumn. Przy założeniu, że przewijanie w pionie domyślnie każdy element w rzędzie zajmuje jeden „span”." W tym przypadku jeden rozpiętość odpowiada szerokości jednej kolumny.

W 2 poniższych przykładach każdy wiersz składa się z 3 rozpiętości. Domyślnie GridLayoutManager układa każdy element w 1 zakresie, aż określisz liczbę. Po osiągnięciu liczby rozpiętości przechodzi do następnego wiersza.

Domyślnie każdy element zajmuje 1 rozpiętość, ale możesz zwiększyć jego zasięg, określając, ile razy ma on zajmować miejsce. Na przykład górny element na prawym ekranie (widocznym poniżej) zajmuje trzy rozpiętości.

W tym zadaniu wykorzystasz RecyclerView, który został ukończony w ostatnim ćwiczeniu, i zaktualizujesz go, aby wyświetlał dane za pomocą GridLayoutManager. Możesz dalej korzystać z aplikacji do monitorowania snu z poprzedniego ćwiczenia z programowania. Możesz też pobrać aplikację RecyclerViewGridLayout-Starter z GitHuba.

Krok 1. Zmień Menedżera układów

  1. W razie potrzeby pobierz aplikację RecyclerViewGridLayout-Starter na potrzeby tego ćwiczenia z GitHuba i otwórz projekt w Android Studio.
  2. Otwórz plik z układem 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
  1. Otwórz aplikację SleepTrackerFragment.kt.
  2. W elemencie OnCreateView(), tuż przed instrukcją return, utwórz nowy pionowy GridLayoutManagerz góry na dół (GridLayoutManager) z 3 rozpiętościami.

    Konstrukt GridLayoutManager przyjmuje maksymalnie 4 argumenty: kontekst, czyli activity, rozpiętości (kolumny w domyślnym układzie pionowym), orientację (domyślnie pionową) oraz to, czy jest to odwrotny układ (domyślny to false). 
val manager = GridLayoutManager(activity, 3)
  1. Pod tym wierszem powiedz, że RecyclerView ma używać tego GridLayoutManager. RecyclerView znajduje się w obiekcie wiązania i ma nazwę sleepList. (patrz fragment_sleep_tracker.xml).
binding.sleepList.layoutManager = manager

Krok 2. Zmień układ

Bieżący układ w list_item_sleep_night.xml wyświetla dane, używając całego wiersza na noc. W tym kroku definiujesz siatkę bardziej kompaktowego układu elementu.

  1. Otwórz aplikację list_item_sleep_night.xml.
  2. Usuń sleep_length TextView, ponieważ nowy wygląd nie jest potrzebny.
  3. Przesuń quality_string TextView tak, aby był wyświetlany poniżej ImageView. Aby to zrobić, musisz zaktualizować wiele rzeczy. Oto ostateczny układ obiektu 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. Sprawdź w widoku Projekt, czy quality_string TextView znajduje się pod elementem ImageView.

Ponieważ zastosowałeś wiązanie danych, nie musisz niczego zmieniać w żadnym miejscu w Adapter. Kod powinien działać, a lista powinna pojawić się jako siatka.

  1. Uruchom aplikację i sprawdź, jak dane o śnie są wyświetlane na siatce.

    Pamiętaj, że ConstraintLayout nadal zajmuje całą szerokość. GridLayoutManager wyświetla widok w stałej szerokości na podstawie rozpiętości. GridLayoutManager spełnia wszystkie wymagania przy układaniu siatki, dodając spacje lub przycinając elementy.
  1. W kodzie SleepTrackerFragment w kodzie, który tworzy GridLayoutManager, zmień liczbę przęseł dla GridLayoutManger na 1. Uruchom aplikację i zobacz listę.
val manager = GridLayoutManager(activity, 1)
  1. Zmień liczbę spanów z „GridLayoutManager” na 10 i uruchom aplikację. GridLayoutManager będzie zawierać 10 rzędów, ale elementy zostaną przycięte.
  2. Zmień rozpiętość na 5, a kierunek na GridLayoutManager.VERTICAL. Uruchom aplikację i zobacz, jak możesz przewijać w poziomie. Aby to zrobić, musisz wybrać inny układ.
val manager = GridLayoutManager(activity, 5, GridLayoutManager.HORIZONTAL, false)
  1. Pamiętaj, by ustawić rozpiętość na 3 i ustawić orientację w pionie.

Projekt na Android Studio: RecyclerViewGridLayout
  • Menedżerowie układu określają sposób rozmieszczenia elementów w elemencie RecyclerView.
  • RecyclerView zawiera gotowe szablony menedżera do typowych zastosowań, takie jak LinearLayout w przypadku poziomych i pionowych list oraz GridLayout w siatkach.
  • W bardziej złożonych przypadkach zaimplementuj niestandardowy element LayoutManager.
  • Z punktu widzenia projektu GridLayout najlepiej nadaje się do tworzenia list elementów, które można przedstawić jako ikony lub obrazy.
  • GridLayout umieszcza elementy w siatce wierszy i kolumn. Przy założeniu, że przewijanie w pionie każdy element w wierszu zajmuje tzw. &span „&”.
  • Możesz dostosować zakres rozpiętości elementu, tworząc bardziej interesujące siatki bez potrzeby używania menedżera układu niestandardowego.
  • Utwórz układ jednego elementu w siatce, a menedżer układu zajmuje się rozmieszczaniem elementów.
  • LayoutManager możesz ustawić w polu RecyclerView w pliku układu XML zawierającym element <RecyclerView> lub w sposób zautomatyzowany.

Kursy Udacity:

Dokumentacja dla programistów Androida:

Ta sekcja zawiera listę możliwych zadań domowych dla uczniów, którzy pracują w ramach tego ćwiczenia w ramach kursu prowadzonego przez nauczyciela. To nauczyciel może wykonać te czynności:

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

Nauczyciele mogą wykorzystać te sugestie tak długo, jak chcą lub chcą, i mogą przypisać dowolne zadanie domowe.

Jeśli samodzielnie wykonujesz te ćwiczenia z programowania, możesz sprawdzić swoją wiedzę w tych zadaniach domowych.

Odpowiedz na te pytania

Pytanie 1

Które z tych funkcji są dostępne w Androidzie jako menedżer układu? Wybierz wszystkie pasujące odpowiedzi.

▢ LinearLayouManager

▢ GridLayoutManager

▢ CircularLayoutManager

▢ StaggeredGridLayoutManager

Pytanie 2

Co to jest „span”?

▢ Rozmiar siatki utworzonej przez użytkownika GridLayoutManager.

▢ Szerokość kolumny w siatce.

▢ Wymiary elementu w siatce.

▢ Liczba kolumn w siatce w orientacji pionowej.

Rozpocznij następną lekcję: 7.4: interakcja z elementami RecyclerView