Разработайте в Jetpack Составьте со мной

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

Недавно у меня появилось время опробовать некоторые новые функции в Jetpack Compose. Он еще не готов к эксплуатации, но с каждым выпуском становится все лучше. Разработка пользовательского интерфейса с использованием Kotlin намного увлекательнее, чем я ожидал. Недавно была выпущена новая версия (0.1.0-dev04) Jetpack Compose; вы можете увидеть детали здесь (Compose) и здесь (Compose UI).

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



Jetpack Compose - новый и простой способ создания пользовательского интерфейса материалов в Android
Узнайте, как создать пользовательский интерфейс без каких-либо файлов XML medium.com





Глубокое погружение в состав Jetpack
Разработка набора пользовательского интерфейса, ориентированного на Kotlin medium.com



Достаточно введения - перейдем к сути.

В этой статье мы узнаем, как реализовать следующие функции в Jetpack Compose:

  1. События кликов
  2. Панель навигации
  3. Прокручиваемый список (вертикальный и горизонтальный)
  4. AppBars

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

1. Щелкните "События".

Обработка событий щелчка - простая задача в нашей нынешней экосистеме (XML и файлы классов), как и в случае с Jetpack Compose. Но наше главное намерение - узнать, как все устроено внутри.

Чтобы узнать это, сначала мы должны изучить сигнатуру метода события щелчка (Clickable). Посмотри:

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

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

Clickable предоставляет только события щелчка и не имеет ничего общего с событиями касания. Чтобы наблюдать за событиями касания, мы должны заключить Clickable в компонент Ripple, а также нам нужно изменить consumeDownOnStart на false. Теперь вернемся к Clickable, мы должны написать, что должно произойти при нажатии под функцией onClick в clickable component.

Посмотри:

Используя Clickable, мы можем выполнить событие щелчка для любого компонента в Jetpack Compose. Это удобно для реализации событий клика, когда вы работаете с настраиваемыми представлениями.

2. Панель навигации

На данный момент в JetPack Compose есть три ящика: ModalDrawerLayout, BottomDrawerLayout и StaticDrawer для планшетов (например, тот, который постоянно открывается в приложении Gmail на планшетах).

ModalDrawerLayout

ModalDrawerLayout используется для реализации стандартной панели навигации. Во-первых, давайте посмотрим на сигнатуру функции.

Давайте посмотрим на параметры: drawerState указывает состояние панели навигации (_20 _ / _ 21_).

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

gesturesEnabled используется, чтобы узнать, можно ли получить доступ к ящику с помощью жестов.

drawerContent и bodyContent - две составляемые функции для представления пользовательского интерфейса в ящике. Теперь давайте посмотрим, как его использовать.

Взгляните на результат с базовой компоновкой:

BottomDrawerLayout

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

Мы видим, что и ModalDrawerLayout, и BottomDrawerLayout имеют одинаковую подпись. В конце концов, оба представляют собой ящики по своей сути. Давайте посмотрим, как используется BottomDrawerLayout.

Теперь посмотрим на результат.

StaticDrawer

Как я уже сказал, у StaticDrawer нет действий смахивания; это статический макет. Так что сигнатура функции проста. Посмотри:

@Composable
fun StaticDrawer(
    drawerContent: @Composable() () -> Unit
)

Использование также довольно простое. Посмотри:

Сначала мы использовали row, чтобы разделить экран для ящика и остальной части приложения. Затем мы использовали StaticDrawer слева и разделитель между ящиком и остальной частью приложения.

3. Прокручиваемый список (вертикальный и горизонтальный)

Команда Jetpack Compose проделала большую работу, чтобы упростить задачу. Все мы знаем, как реализовать scrollview в XML. Это просто тег и корневой макет со всеми прокручиваемыми представлениями.

С Jetpack Compose еще проще реализовать прокручиваемые представления. Во-первых, давайте посмотрим на сигнатуру функции.

Как и любой другой компонент с modifier, мы обновляем пользовательский интерфейс, и мы также можем контролировать, может ли он прокручиваться, используя флаг isScrollable. Затем мы можем добавить дочерние представления. Посмотри:

Разве это не круто? Теперь посмотрим на результат.

Мы также можем реализовать горизонтальную прокрутку с помощью компонента HorizontalScroller.

4. Панель приложений

В Compose есть две панели приложений: TopAppBar и BotttomAppBar. TopAppBar похож на Toolbar в Android, а BottomAppBar - это нижняя панель, которую мы используем в существующей экосистеме.

TopAppBar

Панель инструментов является одним из важнейших компонентов существующей экосистемы пользовательского интерфейса Android, и мы можем реализовать ее в Compose с помощью TopAppBar. В Compose реализация почти такая же, как и в XML. Давайте посмотрим на сигнатуру функции для TopAppBar.

Параметры title и color используются для установки цвета заголовка и фона панели инструментов соответственно.

navigationIcon используется для установки левого значка на панели инструментов, в основном для представления гамбургер-меню.

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

Теперь давайте посмотрим на реализацию.

Круто, правда? Пришло время увидеть результат.

BottomAppBar

BottomBar - один из наиболее часто используемых компонентов в текущей экосистеме создания пользовательских интерфейсов. Он может отображать все параметры прямо у пользователя под рукой, без дополнительных щелчков мышью. В Compose мы используем BottomAppBar для реализации BottomBar.

Посмотрим на сигнатуру метода:

Как мы видим, сигнатура метода очень похожа на TopAppBar — с color, navigationIcon, actionData и action.

Но BottomAppBar имеет больше функций, чем TopAppBar, в том числе возможность показывать потрясающий значок, и мы можем указать форму выреза.

Ниже приведен простой пример того, как создать нижнюю панель в Compose:

Заключение

Спасибо за прочтение.