Вступление

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

Задача отображения списка новостей требует в XML проектах: адаптер, делегат, верстку элемента списка + фрагмента, Presenter/ViewModel. Слишком много кода для повседневной задачи.

Jetpack Compose значительно упрощает процесс верстки, он позволит справится с задачей выше, менее чем в 200 строк. Помимо лаконичности, фреймворк предоставляет возможности писать мультиплатформенный легко поддерживаемый reusable код.

Нововведения из последних версий Android быстрее приходят в фреймворк, нежели в XML. Google заинтересована в развитие нового видения и предлагает использовать современный стэк технологий, который входит в состав Jetpack: MVVM, Coroutines, Jetpack Compose, Room, Hilt, Ktor, DataStore, WorkManager, Coil.

В стэке технологий также представлены 3rd party библиотеки и архитектурное решение MVVM – Model-View-Model.

Для кого это руководство?

Для тех, кто хочет использовать фреймворк в новых проектах или познакомиться с современным способом вёрстки UI. В руководстве рассмотрены часто используемые в разработке инструменты и компоненты.

Главное отличие этого руководства от других книг – это обзор всех возможностей фреймворка и его компонентов.

Настройка проекта

Процесс создания проекта схож со стандартным File – New – New project. Выберите Empty Compose Activity, далее укажите название проекта, пакет, версию Android и нажмите Finish. Обновите версии библиотек до последних версий.

Код зависимостей вы можете найти по ссылке – [https://inky-belief-259.notion.site/23f6848a200346d3b1b49ad211226b27].

Основные аспекты

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

Composable функции могут быть вызваны только из других Composable функций или лямбд.

В классе MainActivity есть точка входа, Composable setContent лямбда-блок, внутри которой как раз и будет вызываться весь интерфейс приложения. Функции вызываются друг под другом и отображаются в порядке вызова их в коде.

Compose предоставляет возможность переиспользовать элементы, так же как и в custom XML View. Для этого нужно создать package c базовыми компонентами, задать некоторые параметры Composable функции, а поведение определять через параметры.

Preview

Аннотация Preview отображает в боковом меню сверстанные элементы. Если необходимо отобразить дополнительно фон View, укажите showBackground = true. После внесения изменений нужно нажать build&refresh для обновления Preview, если изменения небольшие, то Preview обновится автоматически.

Учтите, что Preview не будет работать, если Composable функция принимает какие-либо параметры и они при этом не заданы по умолчанию.

Preview Parameter позволит это исправить, также упростит использование mock файлов в проекте для тестирования верстки.

Так для создания provider-класса необходимо наследоваться от PreviewParameterProvider<T> и переопределить значение по умолчанию. Preview Parameter принимает provider класс и параметр – максимальное количество элементов, которые он должен отобразить.

В случае, если provider класс возвращает объект, обернутый в список, то Preview отобразится единожды, что порой удобно для анализа верстки.

Класс CollectionPreviewParameterProvider принимает в конструктор коллекцию, в отличие от PreviewParameterProvider, которой требует переопределять каждый раз переменную value типа Sequence.

Несколько provider классов можно объединить в Pair при помощи класса обертки. В качестве provider классов можно использовать как CollectionPreviewParameterProvider, так и PreviewParameterProvider. Данный подход полезен, когда необходимо отобразить один и тот же mock в разном окружении, например в темной и светлой теме – и проанализировать – как элемент будет себя вести в каждой из них.

Перейдите в Notion, чтобы подробнее рассмотреть код создания mock, provider классов– [https://inky-belief-259.notion.site/Preview-909c458b613f49eabbd7dc67235382e5].

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

Еще одной полезной фичей в Preview является группирование. Внутри аннотации укажите group и присвойте ей любое название. Так вы сможете быстро отыскать определенную группу элементов в Preview.

Стиль написания кода

Jetpack Compose обязывает писать название функций с заглавной буквы, далее все как в camel case стиле. У всех Composable, функций есть набор параметров, именованные параметры должны идти в верном порядке во избежание ошибок. Прочие названия ресурсов, таких как цвет, шрифт и т.п, должны следовать той же логике.

Структура проекта

В отличии от проектов, где используется XML, вы не встретите пакета layout. Теперь весь интерфейс расположен внутри самого проекта. Помимо этого, Jetpack Compose предоставляет дополнительные файлы для стилей, шрифтов, тем. Первый файл в пакете ui.theme – Color. Внутри располагаются цвета, которые можно вызвать внутри интерфейса по их имени.

Сперва указывается 0x, после прозрачность FF и сам хэш код цвета.

Второй файл – Shape. Для XML приложений часто приходилось создавать множество файлов с различными формами для элементов. В Jetpack Compose это располагается в одном месте и вам при этом необходимо передать внутрь только параметр, на сколько нужно закруглить View.

Для указания размера шрифта или другого элемента, используют следующий синтаксис: число.dp, число.sp.

Третий файл отвечает за цветовую схему в приложение, background, цвет текста и так далее. DarkColorPalette содержит в себе цвета для темной темы, можно дополнительно переопределить другие цвета, если это необходимо. LightColorPalette содержит цвета для светлой темы.