Эта страница переведена с помощью Cloud Translation API.

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

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

Введение

Одно из главных преимуществ 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

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

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

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

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

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

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

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

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

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

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

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

Откройте SleepTrackerFragment.kt .
В OnCreateView() , непосредственно перед оператором return , создайте новый вертикальный, сверху вниз, GridLayoutManager с 3 интервалами.

Конструктор GridLayoutManager принимает до четырех аргументов: контекст, то есть activity , количество диапазонов (столбцов в вертикальной компоновке по умолчанию), ориентация (по умолчанию вертикальная) и является ли это обратной компоновкой (по умолчанию false ).

val manager = GridLayoutManager(activity, 3)

Ниже этой строки укажите RecyclerView использовать этот GridLayoutManager . RecyclerView находится в объекте привязки и называется sleepList . (См. fragment_sleep_tracker.xml .)

binding.sleepList.layoutManager = manager

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

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

Откройте list_item_sleep_night.xml .
Удалите sleep_length TextView , так как в новом дизайне он не нужен.
Переместите TextView quality_string TextView так, чтобы он отображался под 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}" />

Убедитесь в представлении «Дизайн» , что TextView quality_string расположен под ImageView .

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

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

Обратите внимание, что ConstraintLayout по-прежнему занимает всю ширину. GridLayoutManager задаёт вашему представлению фиксированную ширину, исходя из его охвата. GridLayoutManager старается максимально соблюдать все ограничения при компоновке сетки, добавлении пробелов и обрезке элементов.

В SleepTrackerFragment , в коде, который создает GridLayoutManager , измените количество интервалов для GridLayoutManger на 1. Запустите приложение, и вы получите список.

val manager = GridLayoutManager(activity, 1)

Измените количество интервалов для GridLayoutManager на 10 и запустите приложение. Обратите внимание, что GridLayoutManager вмещает 10 элементов в ряд, но теперь они обрезаны.
Измените количество интервалов на 5 и направление на GridLayoutManager.VERTICAL . Запустите приложение и обратите внимание на горизонтальную прокрутку. Чтобы это выглядело хорошо, вам понадобится другой макет.

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

Не забудьте снова установить количество пролетов на 3 и ориентацию на вертикальную!

Проект Android Studio: RecyclerViewGridLayout

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

Курсы Udacity:

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

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

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

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

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

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

Вопрос 1

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

▢ LinearLayouManager

▢ GridLayoutManager

▢ CircularLayoutManager

▢ StaggeredGridLayoutManager

Вопрос 2

Что такое «промежуток»?

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

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

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

▢ Количество столбцов в сетке, имеющей вертикальную ориентацию.

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