Основы Android Kotlin 07.3: GridLayout с RecyclerView

Эта кодовая лаборатория является частью курса Android Kotlin Fundamentals. Вы получите максимальную отдачу от этого курса, если будете последовательно работать с лабораториями кода. Все кодовые лаборатории курса перечислены на целевой странице кодовых лабораторий Android Kotlin Fundamentals .

Введение

Одна из основных сильных сторон RecyclerView заключается в том, что он позволяет использовать менеджеры компоновки для контроля и изменения стратегии компоновки. LayoutManager управляет расположением элементов в RecyclerView .

RecyclerView поставляется с готовыми менеджерами компоновки для распространенных случаев использования. Например, вы можете использовать LinearLayout для горизонтальных и вертикальных списков или GridLayout для сеток. Для более сложных вариантов использования вам необходимо реализовать собственный LayoutManager .

В этой лаборатории кода вы узнаете, как отображать данные, используя макет сетки вместо списка, опираясь на приложение для отслеживания сна из предыдущей лаборатории кода. (Если у вас нет приложения из предыдущей лаборатории кода, вы можете загрузить начальный код для этой лаборатории кода.)

Что вы уже должны знать

Вы должны быть знакомы с:

  • Создание базового пользовательского интерфейса с использованием Activity , Fragments и Views
  • Навигация между фрагментами и использование safeArgs для передачи данных между фрагментами
  • Просмотр моделей, просмотр фабрик моделей и преобразований
  • LiveData и их наблюдатели
  • Как создать базу данных Room , создать DAO и определить сущности
  • Как использовать сопрограммы для задач базы данных и других длительных задач
  • Как реализовать базовый RecyclerView с Adapter , ViewHolder и макетом элемента
  • Как реализовать привязку данных для RecyclerView
  • Как создавать и использовать адаптеры привязки для преобразования данных

Что вы узнаете

  • Как использовать другой LayoutManager , чтобы изменить способ отображения ваших данных в RecyclerView
  • Как создать сетку для данных о сне

Что ты будешь делать

  • Создайте приложение для отслеживания сна из предыдущей кодовой лаборатории в этой серии.
  • Замените список данных о сне, отображаемых RecyclerView в приложении, сеткой данных о сне.

Приложение для отслеживания сна имеет два экрана, представленных фрагментами, как показано на рисунке ниже.

Первый экран, показанный слева, имеет кнопки для запуска и остановки отслеживания. На экране показаны некоторые данные о сне пользователя. Кнопка « Очистить » безвозвратно удаляет все данные, которые приложение собрало для пользователя. Второй экран, показанный справа, предназначен для выбора оценки качества сна.

Это приложение использует упрощенную архитектуру с контроллером пользовательского интерфейса, моделью представления и LiveData , а также базу данных Room для сохранения данных о сне.

Данные о сне отображаются в RecyclerView . В этой кодовой лаборатории вы изменяете приложение для использования GridLayout . Финальный экран будет выглядеть, как на скриншоте ниже.

В предыдущей кодовой лаборатории при добавлении RecyclerView в fragment_sleep_tracker.xml вы добавляли LinearLayoutManager без каких-либо настроек. Этот код отображает данные в виде вертикального списка.

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

LinearLayoutManager — наиболее распространенный и простой менеджер компоновки для RecyclerView , который поддерживает как горизонтальное, так и вертикальное размещение дочерних представлений. Например, вы можете использовать LinearLayoutManager для создания карусели изображений, которую пользователь прокручивает горизонтально.

Макет сетки

Другим распространенным вариантом использования является необходимость показать пользователю много данных, что вы можете сделать с помощью GridLayout . GridLayoutManager для RecyclerView размещает данные в виде прокручиваемой сетки, как показано ниже.

С точки зрения дизайна GridLayout лучше всего подходит для списков, которые могут быть представлены в виде значков или изображений, например списков в приложении для просмотра фотографий. В приложении для отслеживания сна вы можете отображать каждую ночь сна в виде сетки больших значков. Этот дизайн даст пользователю обзор качества своего сна с первого взгляда.

Как GridLayout размещает элементы

GridLayout упорядочивает элементы в виде сетки строк и столбцов. При вертикальной прокрутке по умолчанию каждый элемент в строке занимает один «промежуток». (В этом случае один интервал эквивалентен ширине одного столбца.)

В первых двух примерах, показанных ниже, каждая строка состоит из трех интервалов. По умолчанию GridLayoutManager каждый элемент в одном интервале до указанного вами количества интервалов. Когда он достигает количества интервалов, он переносится на следующую строку.

По умолчанию каждый элемент занимает один интервал, но вы можете сделать элемент шире, указав, сколько интервалов он должен занимать. Например, верхний элемент на крайнем правом экране (показанном ниже) занимает три интервала.

В этой задаче вы берете RecyclerView , созданный в предыдущем упражнении, и обновляете его для отображения данных с помощью GridLayoutManager . Вы можете продолжить использовать приложение для отслеживания сна из предыдущей лаборатории кода или загрузить приложение RecyclerViewGridLayout-Starter с GitHub.

Шаг 1. Измените LayoutManager

  1. При необходимости загрузите приложение RecyclerViewGridLayout-Starter для этой лаборатории кода с GitHub и откройте проект в Android Studio.
  2. Откройте файл макета fragment_sleep_tracker.xml .
  3. Удалите менеджер компоновки из определения sleep_list RecyclerView .

Код для удаления:

app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager
  1. Откройте SleepTrackerFragment.kt .
  2. В OnCreateView() непосредственно перед оператором return создайте новый вертикальный GridLayoutManager сверху вниз с 3 интервалами.

    Конструктор GridLayoutManager принимает до четырех аргументов: контекст, который является activity , числовые интервалы (столбцы в вертикальном макете по умолчанию), ориентация (по умолчанию — вертикальная) и является ли это обратным макетом (по умолчанию — false ).
val manager = GridLayoutManager(activity, 3)
  1. Ниже этой строки скажите RecyclerView использовать этот GridLayoutManager . RecyclerView находится в объекте привязки и называется sleepList . (См. fragment_sleep_tracker.xml .)
binding.sleepList.layoutManager = manager

Шаг 2. Измените макет

Текущий макет в list_item_sleep_night.xml отображает данные, используя целую строку за ночь. На этом этапе вы определяете более компактный макет квадратного элемента для сетки.

  1. Откройте list_item_sleep_night.xml .
  2. Удалите sleep_length TextView , потому что новый дизайн не нужен.
  3. Переместите элемент TextView quality_string так, чтобы он отображался под элементом ImageView . Для этого вам нужно обновить довольно много вещей. Вот окончательный макет для 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. Убедитесь в представлении « Дизайн» , что TextView quality_string расположен ниже ImageView .

Поскольку вы использовали привязку данных, вам не нужно ничего менять в Adapter . Код должен просто работать, и ваш список должен отображаться в виде сетки.

  1. Запустите приложение и посмотрите, как данные о сне отображаются в виде сетки.

    Обратите внимание, что ConstraintLayout по-прежнему занимает всю ширину. GridLayoutManager дает вашему представлению фиксированную ширину в зависимости от его диапазона. GridLayoutManager делает все возможное, чтобы соблюсти все ограничения при компоновке сетки, добавлении пробелов или вырезании элементов.
  1. В SleepTrackerFragment в коде, создающем GridLayoutManager , измените количество диапазонов для GridLayoutManger на 1. Запустите приложение, и вы получите список.
val manager = GridLayoutManager(activity, 1)
  1. Измените количество диапазонов для GridLayoutManager на 10 и запустите приложение. Обратите внимание, что GridLayoutManager 10 элементов в строке, но теперь они обрезаны.
  2. Измените количество промежутков на 5 и направление на GridLayoutManager.VERTICAL . Запустите приложение и обратите внимание, как вы можете прокручивать по горизонтали. Вам понадобится другой макет, чтобы это выглядело хорошо.
val manager = GridLayoutManager(activity, 5, GridLayoutManager.HORIZONTAL, false)
  1. Не забудьте установить количество промежутков обратно на 3 и ориентацию на вертикальную!

Проект Android Studio: RecyclerViewGridLayout

  • Менеджеры компоновки управляют расположением элементов в RecyclerView .
  • RecyclerView поставляется с готовыми менеджерами компоновки для распространенных случаев использования, такими как LinearLayout для горизонтальных и вертикальных списков и GridLayout для сеток.
  • Для более сложных вариантов использования реализуйте собственный LayoutManager .
  • С точки зрения дизайна GridLayout лучше всего использовать для списков элементов, которые могут быть представлены в виде значков или изображений.
  • GridLayout упорядочивает элементы в виде сетки строк и столбцов. При вертикальной прокрутке каждый элемент в строке занимает так называемый «промежуток».
  • Вы можете настроить количество промежутков, занимаемых элементом, создавая более интересные сетки без необходимости использования специального менеджера компоновки.
  • Создайте макет элемента для одного элемента в сетке, а менеджер макета позаботится о размещении элементов.
  • Вы можете установить LayoutManager для RecyclerView либо в XML-файле макета, который содержит элемент <RecyclerView> , либо программно.

Удасити курсы:

Документация для разработчиков Android:

В этом разделе перечислены возможные домашние задания для студентов, которые работают с этой кодовой лабораторией в рамках курса, проводимого инструктором. Инструктор должен сделать следующее:

  • При необходимости задайте домашнее задание.
  • Объясните учащимся, как сдавать домашние задания.
  • Оценивайте домашние задания.

Преподаватели могут использовать эти предложения так мало или так часто, как они хотят, и должны свободно давать любые другие домашние задания, которые они считают подходящими.

Если вы работаете с этой кодовой лабораторией самостоятельно, не стесняйтесь использовать эти домашние задания, чтобы проверить свои знания.

Ответьте на эти вопросы

Вопрос 1

Какие из перечисленных ниже менеджеров компоновки предоставляются Android? Выбрать все, что подходит.

▢ LinearLayouManager

GridLayoutManager Диспетчер макетов сетки

CircularLayoutManager Диспетчер кругового макета

▢ StaggeredGridLayoutManager

вопрос 2

Что такое "пролёт"?

▢ Размер сетки, созданной GridLayoutManager .

▢ Ширина столбца в сетке.

▢ Размеры элемента в сетке.

▢ Количество столбцов в сетке с вертикальной ориентацией.

Начать следующий урок: 7.4: Взаимодействие с элементами RecyclerView