Привет, я Михаил Селезнев, андроид-разработчик в компании 1221Systems. Поделюсь своими впечатлениями о Compose — будет интересно коллегам, которые думают о переходе на него. Расскажу, в чем были сложности и что помогло мне быстрее разобраться.

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

Само приложение написано на достаточно современном стеке: MVI, Koin, Coroutines + Flow, Jetpack Compose. При этом навигация реализована на фрагментах. В onCreateView возвращаем ComposeView, где в setContent прокидываем composable функцию.

abstract class ComposeFragment : Fragment() {

   private var composeView: ComposeView? = null

   override fun onCreateView(
       inflater: LayoutInflater,
       container: ViewGroup?,
       savedInstanceState: Bundle?
   ): View? = ComposeView(requireContext()).also { composeView = it }

   override fun onDestroyView() {
       super.onDestroyView()
       composeView = null
   }

   protected fun setContent(content: @Composable () -> Unit) {
       composeView?.setContent {
           AppTheme(content = content)
       }
   }
}

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

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

Первая фича: удаление аккаунта

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

Для начала изучил дизайн и требования, а уже после приступил к реализации. 

Создал фрагмент и сделал на него переход: тут никаких сложностей не возникло. Дальше UI — решил начать с кнопок. Так как приложение уже в проде, то я решил, что такие кнопки точно уже где-то используются в других местах, поэтому пошел искать их через Resource Manager.

В случае с View это очень удобный инструмент, который позволяет быстро просмотреть все layout’ы в проекте. Но в случае с Compose он не работает: Resource Manager просто не видит СomposeView.

Начал искать другие варианты и вспомнил про Layout Inspector (далее LI), в котором можно посмотреть, насколько эффективно работает твой UI. Открыл в приложении другой экран с нужной кнопкой и через LI попал в composable функцию, описывающую кнопку.

Конечно, можно было пойти просто по файлам и найти что-то по названию, но на тот момент я еще плохо знал проект, и не хотел тратить много времени на поиск.

Добавил первую кнопку, запустил приложение — кнопка показалась. Появилось первое чувство радости за себя - что-то получилось. Нашел вторую кнопку, добавил, запустил приложение и вот тут уже первое разочарование — кнопки наложились друг на друга.

OutlinedRedButton(
   text = "Удалить аккаунт",
   onClick = {}
)
GreenButton(
   text = "Назад",
   onClick = {}
)

В классическом View вопрос решился бы с помощью Constraint Layout, но у нас Compose. Поэтому я пошел читать официальную документацию и обнаружил, что для вертикального расположения элементов, нужно использовать элемент Column. Посмотрел, что он используется также на других экранах и добавил его себе. Перезапустил приложение, и о чудо, кнопки отобразились друг под другом.

Column {
   OutlinedRedButton(
       text = "Удалить аккаунт",
       onClick = { }
   )
   GreenButton(
       text = "Назад",
       onClick = {}
   )
}

Дальше через LI нашел похожий по стилю текст и добавил на свой экран. 

Почти то, что нужно! Только кнопки должны быть прибиты к низу экрана. 

Тут оказалось все достаточно просто: можно использовать элемент Spacer, который заполнит все пространство между текстом и кнопкой. Дальше дело оставалось за малым: через modifier’ы добавил отступы и получил нужный результат.

Стоит также отметить, что все перечисленное выше было обернуто в элемент Scaffold, который позволяет удобно отобразить TopAppBar. Итоговый код получился таким:

@Composable
fun DeleteAccountBody(
   modifier: Modifier = Modifier,
   onBackClick: () -> Unit = {}
) {
   Scaffold(
       modifier = modifier,
       topBar = {
           Toolbar(
               title = "Управление профилем",
               onBackClick = onBackClick
           )
       }
   ) { paddingValues ->
       Column(
           modifier = modifier
               .padding(paddingValues)
               .padding(horizontal = 16.dp)
               .fillMaxSize()
       ) {
           Spacer(modifier = Modifier.height(16.dp))
           Text(
               text = "Удаление аккаунта",
               style = AppTheme.typography.h3,
               color = AppTheme.colors.redPrimary
           )
           Spacer(modifier = Modifier.height(16.dp))
           Text(
               text = "Здесь ты можешь удалить свой аккаунт",
               style = AppTheme.typography.subhead,
               color = AppTheme.colors.textSecondary
           )
           Text(
               text = "После удаления данные будут утеряны",
               style = AppTheme.typography.subhead,
               color = AppTheme.colors.textSecondary
           )
           Spacer(modifier = Modifier.weight(1f))
           OutlinedRedButton(
               modifier = Modifier.fillMaxWidth(),
               text = "Удалить аккаунт",
               onClick = { }
           )
           Spacer(modifier = Modifier.height(16.dp))
           GreenButton(
               modifier = Modifier.fillMaxWidth(),
               text = "Назад",
               onClick = {}
           )
           Spacer(modifier = Modifier.height(46.dp))
       }
   }
}

Вторая фича: динамичный список элементов

Следующая фича была поинтереснее - это был экран оценки. Помимо текста и кнопки добавился динамический список элементов, которые приходят с бэка.

В классическом view для реализации такого элемента нужно добавить ресайклер, адаптер, делегат, отрисовать в xml view. В Compose этого всего делать не нужно! Достаточно взять Chip-виджет, который входит в библиотеку Compose Material, во ViewModel получить список элементов, прокинуть на Ui слой и пройти список в цикле. Все! На отрисовку этого элемента я потратил в несколько раз меньше времени, чем если бы делал это на View. 

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

Итоговый код:

@Composable
public fun FlowRow(
   modifier: Modifier = Modifier,
   mainAxisSize: SizeMode = SizeMode.Wrap,
   mainAxisAlignment: FlowMainAxisAlignment = FlowMainAxisAlignment.Start,
   mainAxisSpacing: Dp = 0.dp,
   crossAxisAlignment: FlowCrossAxisAlignment = FlowCrossAxisAlignment.Start,
   crossAxisSpacing: Dp = 0.dp,
   lastLineMainAxisAlignment: FlowMainAxisAlignment = mainAxisAlignment,
   content: @Composable () -> Unit
) {
   Flow(
       modifier = modifier,
       orientation = LayoutOrientation.Horizontal,
       mainAxisSize = mainAxisSize,
       mainAxisAlignment = mainAxisAlignment,
       mainAxisSpacing = mainAxisSpacing,
       crossAxisAlignment = crossAxisAlignment,
       crossAxisSpacing = crossAxisSpacing,
       lastLineMainAxisAlignment = lastLineMainAxisAlignment,
       content = content
   )
}

Недостатки Compose

Спустя пару недель пришло общее понимание, как работает Compose, верстка стала более осознанной, а скорость увеличилась в разы. Но и с неприятными моментами столкнулся на личном опыте.

• Баг при добавлении строкового ресурса. Происходит не всегда, но достаточно часто. Добавляешь новую строку, используешь ресурс, запускаешь приложение — а у тебя все строки поехали. Там, где должен быть текст «Номер телефона» показывается «Меню» и т.д. Лечится это только очисткой кеша и удалением приложения с эмулятора.

• Обновление. Во многих статьях читал, что нужно стараться обновлять Compose до последней версии. У нас на тот момент использовалась версия 1.2.1, а последняя на тот момент была — 1.5.0. Решил обновить. Это сразу повлекло за собой обновление Gradle плагина, версии котлина и еще нескольких библиотек. И тут столкнулся с проблемой: в приложении есть поле ввода телефона, где используется маска для разбиения телефона на группы цифр. И вот эту работу с маской в Compose сломали еще в версии 1.3.0, а в версии 1.5.0 так и не починили. Причем обнаружили мы это не сразу, а спустя неделю, потому что краш воспроизводился только при тапе на поле ввода. Пришлось откатываться назад на версию 1.2.1.

• Работа со списками. Для каждого элемента в списке передается уникальный id. В нашем случае, это id элемента, который пришел с сервера. Важно: этот id должен быть уникальным, иначе сразу краш. 

Спустя полгода: мои рекомендации

На данный момент с Compose я работаю около полугода. За это время успел многое изучить, во многом разобраться, реализовать около 5 больших фичей. На мой взгляд, переходить на Compose стоит. Затраты времени на изучение и переход очень быстро окупятся скоростью верстки и более современным и дружелюбным UI.

Для изучения самой технологии я рекомендую:

• Почитать книгу Jetpack Compose Internals. Она на английском, но читается легко, и это было полезно.

• Изучать приложение Now in Android от Google.

• Начать писать экраны. Можно начать с небольшого, без различных анимаций и усложнять верстку постепенно, накручивая сверху различные фишки. 

• Посмотреть Philipp Lackner «The Jetpack Compose Beginner Crash Course for 2023»