BottomSheetScaffold и ModalBottomSheetLayout

Вывод из этой статьи

В этой статье мы узнаем, как использовать нижние листы в Jetpack Compose. Мы собираемся покрыть как постоянные нижние листы, так и модальные нижние листы. В конце этой статьи вы найдете ссылку на проект GitHub, так что не стесняйтесь изучать код.

Вступление

Jetpack Compose - одна из недавних попыток Google упростить разработчикам Android создание пользовательского интерфейса.

Jetpack Compose - это современный набор инструментов для создания собственного пользовательского интерфейса Android. Jetpack Compose упрощает и ускоряет разработку пользовательского интерфейса на Android с меньшим количеством кода, мощными инструментами и интуитивно понятными API-интерфейсами Kotlin . - Разработчики Android

Jetpack Compose недавно перешел на бета-версию. Это означает, что кардинальных изменений в структуре API больше не будет, поэтому сейчас самое время научиться работать с этим UI-комплектом следующего поколения для разработки под Android.

Вам потребуется установить версию Android Studio Canary, Arctic Fox (2020.3.1), чтобы использовать бета-версию Jetpack Compose.

Предпосылки

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

Что такое нижний лист?

Нижний лист в Android - это компонент пользовательского интерфейса материального дизайна. По сути, это представление, которое входит в интерфейс снизу экрана с плавной анимацией. Использование нижних листов дает два основных преимущества:

  • Их можно пролистывать - это создает для пользователя более интерактивный интерфейс, чем нажатие кнопки.
  • Быстрый доступ - поскольку они закреплены внизу, пользователи могут легко получить доступ к контенту.

Типы нижних листов

Стойкие нижние листы

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

Модальные нижние листы

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

Нижние листы в Jetpack Compose

Jetpack Compose из коробки поддерживает как постоянные, так и модальные нижние листы. Любые другие перетаскиваемые нижние листы также имеют свои собственные каркасы: BottomSheetScaffold и ModalBottomSheetLayout.

Без дальнейших промедлений, приступим

BottomSheetScaffold

BottomSheetScaffold - простая составная функция, используемая для отображения постоянного нижнего листа. Взгляните на составные:

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

  • sheetContent — Это простая составная функция, представляющая пользовательский интерфейс листа.
  • scaffoldState — Используется для управления состоянием нижнего листа: развернутый, свернутый и наполовину развернутый.
  • topBar — Это простая составная функция, которая представляет дизайн верхней панели экрана.
  • content — Это компонуемая функция для создания содержимого экрана за нижним листом.

BottomSheetState

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

Довольно компонентов, пора приступить к реализации. Сначала мы проектируем вид за нижним листом. Ничего сложного, просто просмотр с помощью одной кнопки. При нажатии кнопки нам нужно обновить состояние. Для обновления состояния нам нужен BottomSheetScaffoldState, который мы принимаем в качестве параметра вместе с CoroutineScope. Посмотри:

Пришло время разработать нижний лист. Здесь мы будем использовать rememberBottomSheetScaffoldState и rememberCoroutineScope составляемые функции для управления состоянием в процессе рекомпозиции.

Вы можете переместить конструктивную часть содержимого нижнего листа, чтобы упростить кодирование.

ModalBottomSheetLayout

ModalBottomSheetLayout - это простая компонуемая функция, такая как BottomSheetScaffold, и используется для отображения модального нижнего листа. Взгляните на составные:

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

  • sheetContent — Это простая составная функция, представляющая пользовательский интерфейс листа.
  • scaffoldState - используется для управления состоянием нижнего листа: развернут, свернут и наполовину развернут.
  • content — Это компонуемая функция для создания содержимого экрана за нижним листом.

ModalBottomSheetState

ModalBottomSheetState - это класс Kotlin, используемый для управления состоянием нижнего листа. Он имеет удобные функции приостановки, такие как развертывание, свертывание, половинное развертывание, скрытие и многое другое для выполнения плавной анимации.

Сначала нам нужно создать вид главного экрана, как мы это делали в предыдущем разделе. Единственная разница в том, что мы заменим параметр BottomSheetScaffoldState на ModalBottomSheetState. Посмотри:

Пришло время разработать нижний лист. Здесь мы будем использовать rememberModalBottomSheetState и rememberCoroutineScope составляемые функции для управления состоянием в процессе перекомпоновки.

Это все. Мы закончили реализацию.

Отображение нижних листов

Теперь, когда мы закончили с основной реализацией, осталось только вызвать компоненты ModelBottomSheet и BottomSheetSample из активности. Посмотри:

Бонус

Ниже приведена ссылка на репозиторий GitHub с реализацией постоянных и модальных нижних листов. Не стесняйтесь исследовать.



SG-K / Jetpack-Compose-Bottom-Sheets
Участвуйте в разработке SG-K / Jetpack-Compose-Bottom-Sheets, создав учетную запись на GitHub. github.com



Недавно я наткнулся на прекрасную статью о Kotlin DSL, опубликованную Satya Pavan Kantamani. Настоятельно рекомендуется:



Переход с Groovy на Kotlin DSL
Измените сценарии сборки Android на Kotlin DSL для большей гибкости proandroiddev.com



Это все. Надеюсь, вы узнали что-то полезное. Спасибо за прочтение.