Разработка Android приложений с Jetpack Compose. Денис Сергеевич Попков

иска новостей требует в 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 и присвойте ей любое название. Так вы сможете быстро отыскать