Что будет если команда, не видавшая Compose, решила делать новую сложную фичу на нём?

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

Звезды сошлись таким образом, что произошло 2 события:

• Настало время делать кардинальный редизайн одного из наших главных экранов — карточки продукта

• Мы приняли решение переходить на стек Jetpack Compose в нашем Android приложении.

Меня зовут Дмитрий Максимов, я Android разработчик в Dodo Engineering. Больше 2-х лет я пробовал Jetpack Compose в пет-проектах, но хотелось прокачать свои знания по-полной и попробовать фреймворк в настоящем проде. В этой статье расскажу, как мы сделали сложный Compose экран с нестандартным скроллом и снаппингом контента.

Почему Compose?
Мы хотим делать лучший UI в нашем приложении. В Compose много удобных компонентов, которые мы можем использовать и быстрее разрабатывать, поэтому давно хотели его попробовать.
Обычно, переход на новый фреймворк начинают с простых экранов, но мы понимали, что это покажет не все возможности Compose и не научит нас ничему, поэтому ждали сложного интерфейса. Карточка продукта — то, что нужно.

Посмотрите, как изменился наш экран Карточки Продукта!

Рассмотрим дизайн подробнее

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

Давайте посмотрим, как выглядела карточка продукта раньше.

Карточка продукта хоть и позволяет сделать с напитком что угодно, но со стороны дизайна задача решена слабо:

• Напиток выглядит скучно, в меню у нас видео напитков, а тут – просто картинка на белом фоне

• Кастомизация как бы есть, но большие плитки лишь растягивают экран и не показывают богатство выбора

• Широкая настройка из разных сиропов и посыпок скрыта за невзрачными плюсиками, которых не видно на первом экране при открытии

• Много навигации: кастомайз открывается в отдельном окне, его нужно закрывать, потом открывать следующее окно

Все эти недостатки дизайна должна решить новая Карточка продукта:

Что мы видим в новой карточке:

Видео для каждого продукта. Хвастаемся тем, насколько вкусно умеем показывать продукты.

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

Интересный и полезный контент. После свайпа откроется экран с историями про напиток – как его готовят и где мы делимся секретами вкуса, пищевая ценность, подогревающее аппетит описание и апселл, где подсказываем лучшие сочетания для продукта.

Кастомный снаппинг

Каркас нового экрана — деление его на три части. Изначально гость видит видео продукта и раздел кастомизации, которую еще можно полностью раскрыть при нажатии на ингредиент. При скролле можно перейти к дополнительному описанию, историям, калорийности.

В этой статье мы подробно разберем одну из UI-проблем, которую нам пришлось решить на Compose – как сделать вот такой список с скроллом со снаппингом ко второй половине экрана.

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

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

Почему это было первой и важной задачей:

• Потому что это каркас и архитектура экрана, от нее зависит, то как мы будем дальше реализовывать все фичи

• Она выглядела нестандартной, поэтому точно придется писать это самостоятельно и лучше раньше решить все вопросы

Проверить гипотезу

Сначала надо было проверить, что Jetpack Compose позволяет нам сделать основную навигацию и анимации на экране, и мы не столкнемся с проблемами. Для этого мы начали играться в sandbox, чтобы сделать скелет экрана.

Подход №1. BottomSheet

Когда мы в первый раз сели брейнштормить про экран карточки продукта, в первую очередь размышляли, как сделать snapping эффекта при пролистывании кастомайза. Это было нечто похожее на BottomSheet с установленным peekHeight, или на ViewPager с страничным снеппингом, но здесь только 2 страницы, причем вторая потенциально бесконечная.

Похожий пример можно увидеть на главной страничке Яндекс Музыке – там как раз используется BottomSheet для этих целей.

Как это в Яндекс.Музыке. Выглядит похоже, но так ли это?

Ну и раз есть идея с BottomSheet, то почему бы не проверить ее? То, что нижняя панель должна быть всегда видна и вся карточка продукта должна снаппится примерно также, как BottomSheet, заставили нас думать в эту сторону.

В библиотеке compose-material можно найти компонент BottomSheetScaffold, который выполняет роль контейнера для BottomSheet.

@OptIn(ExperimentalMaterialApi::class) @Composable fun ProductCard() {   val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(       bottomSheetState = BottomSheetState(BottomSheetValue.Collapsed)   )    BottomSheetScaffold(       scaffoldState = bottomSheetScaffoldState,       sheetContent = {         Box(             modifier = Modifier                 .padding(top = 64.dp)                 .fillMaxHeight()                 .fillMaxWidth()                 .background(Color.LightGray)         )       },       sheetPeekHeight = 160.dp   ) {     Image(         modifier = Modifier             .fillMaxHeight()             .fillMaxWidth()             .padding(bottom = 160.dp),         painter = painterResource (id = R.drawable.drinkit_image_example),         contentDescription = null,         contentScale = ContentScale.Crop,     )   } }

scaffoldState принимает стейт, который описывает состояние BottomSheet – сдвиг, текущее состояние, и прочие.
sheetContent – контент внутри самого BottomSheet
content – то, что рисуется позади, на основном Surface

Такой подход через BottomSheet дает похожую анимацию раскрытия и снаппинга контента, который находится снизу экрана. Реализация такого прототипа заняла день-два.

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

Мы не придумали простой способ, как всё это сделать с BottomSheet, поэтому мы на время оставили эту идею и пошли за новыми решениями.

Другой подход. Единый список

Попробуем другой подход. Что, если сделать весь этот экран сплошным списком с видео позади? В нашей песочнице мы использовали фото для упрощения тестирования, но в финальной версии там будет видео.

Это даст нам преимущество в управлении всем стейтом экрана, да и по дизайну это более подходящее решение. Видео мы вынесем вне списка на фон. Сам список сделаем с помощью LazyColumn, но если ваш экран небольшой, то можно обойтись обычным Column, однако с LazyColumn будет проще, потому что мы делаем снаппинг, а в LazyListState есть стандартный метод для скролла к элементу в списке.

Попробуем?

@Composable fun ProductCard() {   val lazyState = rememberLazyListState()   val isDragged by lazyState.interactionSource.collectIsDraggedAsState()   val isScrollingUp = lazyState.isScrollingUp()    Box {     // Изображение или видео на фоне     Image(         modifier = Modifier             .fillMaxWidth(),         /* ... */     )      /*      * Создали свой хендлер для обработки события, когда мы отпускаем палец      * Основная идея – если двигаемся вниз и преодолели границу,       * то делаем автоскролл до следующего элемента      *      * Иначе если скроллим наверх и видим первый элемент,       * то возвращаемся на самый верх      */     LaunchedEffect(isDragged) {       if (isDragged) return@LaunchedEffect       if (lazyState.firstVisibleItemIndex != 0) return@LaunchedEffect        if (lazyState.firstVisibleItemScrollOffset > 200 && !isScrollingUp) {         lazyState.animateScrollToItem(1)       } else if (isScrollingUp) {         lazyState.animateScrollToItem(0)       }     }      Surface(         modifier = Modifier,         color = Color.Transparent,         content = {           LazyColumn(               state = lazyState,               modifier = Modifier                   .fillMaxHeight()           ) {             item {                /*                 * Контейнер для блока кастомизации.                 * Включает в себя панель с ингредиентами и табы - группы ингредиентов                */               Column {                 CustomizePanel(                     modifier = Modifier                         .requiredHeight(580.dp),                 )                  // Контейнер с табами                 CustomizeTabs(                     modifier = Modifier                         .requiredHeight(130.dp),                     color = Color.Cyan                 )               }             }              // Остальной контент             item {               Stories(Color.Magenta, Modifier.height(200.dp))             }              /* ... */           }         }     )   } }

Получаем вот такое поведение.

Благодаря блоку внутри LaunchedEffect, список снаппится на нужную нам позицию, что напоминает поведение BottomSheet.

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

В такой структуре можно легко сделать так, чтобы первый элемент списка – в нашем случае это блок кастомайза с ингредиентами, выдвигался из под контента по команде. Такого поведения можно достигнуть с помощью изменения translationY у контейнера:

Проекция экрана и структура блоков на нем. Здесь видео статично стоит на месте, но в конечной реализации оно также двигается.

У нас есть такое дерево:

LazyColumn | item   | Customize(Column)     | CustomizePanel     | CustomizeTabs | item   | Stories | ...

Изменением translationY у CustomizePanel мы достигаем такого эффекта.

К тому же, чтобы понять, насколько далеко надо его скрыть для полной невидимости, необходимо предварительно измерить высоту блока. Делаем это с помощью Modifier.onPlaced

В коде это выглядит так:

val customizationTranslationY = remember { Animatable(0f) } var customizationSize by remember { mutableStateOf(0) }  LazyColumn(     state = lazyState,     modifier = Modifier         .fillMaxHeight() ) {   item {     Column {       CustomizePanel(           modifier = Modifier               .requiredHeight(580.dp)               .graphicsLayer {                 // Вертикально сдвигаем панель кастомайза.                  // Получается эффект, как на схеме выше                 translationY = customizationTranslationY.value               }               .onPlaced {                 // Сразу после измерения нужно сохранить размер и скрыть кастомайз                 coroutineScope.launch {                   if (customizationSize == IntSize.Zero) {                     customizationSize = it.size                     customizationTranslationY.snapTo(customizationSize.toFloat())                   }                 }               }       )        CustomizeTabs(           modifier = Modifier               .requiredHeight(130.dp)               .clickable {                 coroutineScope.launch {                   // На клик мы анимируем выдвигающийся кастомайз                   val target = if (customizationTranslationY.value == 0f) {                     customizationSize.toFloat()                   } else {                     0f                   }                   customizationTranslationY.animateTo(target)                 }               },           color = Color.Cyan       )     }   }

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

Image(     modifier = Modifier         .fillMaxWidth()         .graphicsLayer {           // Когда анимация работает, то мы сдвигаем изображение координировано с ней           translationY = if (customizationTranslationY.isRunning) {             customizationTranslationY.value - customizationSize.toFloat()           } else if (lazyState.firstVisibleItemIndex == 0) {             // Иначе картинка следует за ручным скроллом             -lazyState.firstVisibleItemScrollOffset.toFloat()           } else {             0f           }         },     /* ... */ )

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

Например, мы вынесли в отдельный стейт все, что связано с скроллом и снаппингом.

enum class CustomizationValue {   Closed,   Open,   Initial,   ; }  private const val DUMP_VELOCITY_THRESHOLD = 0.2f private const val ANIMATION_SPRING_STIFFNESS = 600f  @Composable fun rememberProductCardPageState(   @IntRange(from = 0) initialItemIndex: Int = 0, ): ProductCardPageState = rememberSaveable(saver = Companion.Saver) {   ProductCardPageState(initialItemIndex) }  @Stable class ProductCardPageState(   @IntRange(from = 0) val initialItemIndex: Int = 0, ) {    private var customizeCurrentValue by mutableStateOf(Initial)    internal val lazyListState = LazyListState(firstVisibleItemIndex = initialItemIndex)    /**    * [Animatable], через который происходит изменение раскрытие блока с кастомайзом    * Для взаимодействия с ним, используйте [closeCustomize] и [openCustomize]    */   private val customizeAnimatable = Animatable(0f)    /**    * Величина кастомайза    * Также является максимальным сдвигом для состояния, чтобы кастомайз был закрыт    */   val customizeSize: Float     get() = customizePanelSize - customizeTitleSize    /**    * Размер контейнера кастомайза => ингредиенты + надпись    */   var customizePanelSize by mutableStateOf(0f)    /**    * Полный размер кастомайза => панель с ингредиентами + список категорий    * Нужен для того, чтобы знать, сколько места занимает полностью кастомайз в списке    */   var customizeFullSize by mutableStateOf(0f)    /**    * Размер заголовка, находящегося в контейнере кастомайза    * Нужен для того, чтобы задвинутый кастомайз немного    * выдвинуть на размер заголовка, чтобы он (заголово) был виден    */   var customizeTitleSize by mutableStateOf(0f)    /**    * Величина сдвига кастомайза    * - (0) – кастомайз открыт    * - (customizeSize) – кастомайз закрыт    */   val customizeTranslationY: Float     get() = customizeAnimatable.value    /**    * Величина сдвига фонового видео    * -  (0) – кастомайз закрыт, фоновое видео видно полностью    * - (-customizeSize) – кастомайз открыт, фоновое видео синхронно с ним сдвинуто наверх    */   val customizeTranslationImageY: Float     get() = customizeTranslationY - customizeSize    /**    *     */   val customizeScrollOffset: Int     get() = lazyListState.firstVisibleItemScrollOffset    /**    * Степень скролла относительно кастомайза в карточке    * - (0) – скролл находится в самой верхней точке    * - (1) – мы полностью проскроллили кастомайз    */   val customizeScrollFraction: Float     get() {       if (lazyListState.firstVisibleItemIndex > 0) {         return 1f       }        if (customizeFullSize == 0f) {         return 0f       }        return customizeScrollOffset / customizeFullSize     }    /**    * Степень "открытости" кастомайза.    * Показывает, насколько он выдвинут и виден пользователю    * P.S Это не означает, что он готов общаться и заводить друзей    *    * - (0) – кастомайз закрыт, видим только торчащий заголовок    * - (1) – кастомайз полностью открыт    */   val customizeOpenFraction: Float     get() {       if (customizeSize == 0f) {         return 0f       }        return abs(customizeTranslationImageY) / customizeSize     }    /**    * [Float], который является максимумом между [customizeOpenFraction] и [customizeScrollFraction]    * Это нужно, потому что некоторые Composable одинаково    * реагируют как на скролл, так и на открытие кастомайза    */   val customizeFractionCombined: Float     get() = max(customizeOpenFraction, customizeScrollFraction)    /**    * Открыть кастомайз    *    * - [animated] – закрыть анимированно или нет    */   suspend fun openCustomize(animated: Boolean = true) {     customizeCurrentValue = Open     if (animated) {       customizeAnimatable.animateTo(0f)     } else {       customizeAnimatable.snapTo(0f)     }   }    private suspend fun closeCustomize(     animated: Boolean = true,   ) {     customizeCurrentValue = Closed      if (animated) {       customizeAnimatable.animateTo(customizeSize)     } else {       customizeAnimatable.snapTo(customizeSize)     }   }    companion object {          val Saver: Saver<ProductCardPageState, *> = listSaver(         save = {           listOf<Any>(               it.lazyListState.firstVisibleItemIndex,           )         },         restore = {           ProductCardPageState(               initialItemIndex = it[0] as Int,           )         }     )   } }

А штуку, которая отвечает за снаппинг, мы переделали на FlingBehavior, потому что использование LaunchedEffect вызывало сложности. Второй клик не обрабатывался после того, как список заснаппился. Этот FlingBehavior уже передается как параметр в LazyColumn и все работает идеально!

За основу мы взяли информацию из этой статьи про VelocityBased анимации

val flingDecay = rememberSplineBasedDecay<Float>() val isScrollingUp by rememberUpdatedState(     newValue = productCardPageState.lazyListState.isScrollingUp() )  val consumeVelocityFlingBehavior = remember {   object : FlingBehavior {     private val DefaultScrollMotionDurationScaleFactor = 1f      val DefaultScrollMotionDurationScale = object : MotionDurationScale {       override val scaleFactor: Float         get() = DefaultScrollMotionDurationScaleFactor     }      override suspend fun ScrollScope.performFling(initialVelocity: Float): Float = run {       handleFling(initialVelocity)     }      private suspend fun ScrollScope.handleFling(initialVelocity: Float): Float = run {       if (isCustomizeVisible(productCardPageState.lazyListState.firstVisibleItemIndex)) {         handleFlingIfCustomizeVisible(initialVelocity)       } else {         // Если кастомайз не видим, то скроллим как обычно.         // Когда скролл завершится, то нам нужно сделать ручную проверку,          // что пользователь видит кастомайз, и заснаппиться, если нужно         handleFlingIfCustomizeNotVisible(initialVelocity)       }     }      private suspend fun ScrollScope.handleFlingIfCustomizeNotVisible(       initialVelocity: Float,     ): Float {       var velocityLeft = initialVelocity       return withContext(DefaultScrollMotionDurationScale) {         if (abs(initialVelocity) > 1f) {           var lastValue = 0f           AnimationState(               initialValue = 0f,               initialVelocity = initialVelocity,           ).animateDecay(               animationSpec = flingDecay,               sequentialAnimation = true           ) {             val delta = value - lastValue             val consumed = scrollBy(delta)             lastValue = value             velocityLeft = this.velocity             // Округляем и останавливаем анимацию, если изменения очень маленькие             if (abs(delta - consumed) > 0.5f) this.cancelAnimation()           }            // Скролл закончен, и мы должны понять, нужно ли нам куда-то заснаппится           // Если мы остановились и мы видим кастомайз (firstVisibleItemIndex == 0), то нужно сделать снап           if (isCustomizeVisible(productCardPageState.lazyListState.firstVisibleItemIndex)) {             // Мы должны заснаппится куда-либо, вниз или вверх. Зависит от velocity             handleFlingIfCustomizeVisible(velocityLeft)           } else {             // Иначе просто возвращаем velocity, что ничего не предпринимаем             velocityLeft           }         } else {           0f         }       }     }      private suspend fun ScrollScope.handleFlingIfCustomizeVisible(initialVelocity: Float): Float {       val scrollTo = when {         !isScrollingUp -> {           productCardPageState.customizeFullSize - productCardPageState.customizeScrollOffset         }          productCardPageState.lazyListState.scrollPassedThreshold(productCardPageState) -> {           -productCardPageState.lazyListState.firstVisibleItemScrollOffset.toFloat()         }          else -> {           productCardPageState.customizeFullSize - productCardPageState.customizeScrollOffset         }       }        var lastValue = 0f       val animationState = AnimationState(           initialValue = 0f,           initialVelocity = initialVelocity,       )        animationState.animateTo(           targetValue = scrollTo,           animationSpec = spring(               stiffness = Spring.StiffnessMediumLow,           ),           sequentialAnimation = true,       ) {         val delta = value - lastValue         val consumed = scrollBy(delta)         lastValue = value         // Округляем и останавливаем анимацию, если изменения очень маленькие         if (abs(delta - consumed) > 0.5f) this.cancelAnimation()       }       return 0f     }   } }

Как конечный результат, мы получаем такое крутое и плавное поведение снаппинга на LazyColumn и открытия кастомайза. Смотрим и кайфуем ❤️

Заключение

Цель статьи – рассказать, а стоит ли переводить ваши проекты на Jetpack Compose?

По нашему опыту реализации Карточки продукта, эксперимент пойти с Compose в редизайн себя оправдал:

• С фреймворком легко начать работать, декларативный UI очень удобный в написании и поддержке, а также легко поддается изменениям и переиспользованию.

• Наличие Preview, для которых не обязательно запускать приложение.

• И вообще более сложный UI с анимациями создавать и отлаживать стало гораздо проще, чем на View. Прототип снаппинга мы сделали за 1-2 дня, что довольно быстро.

Несмотря на все заметные плюсы, Compose также не лишен минусов. Вот некоторые из них:

• Оптимизация. Сложно понять, как Compose вообще оптимизировать. Только с прошествием времени начинаешь привыкать к правильным практикам. Но поначалу мы делали как просто делает Google и другие гайды. В итоге сделали рабочий прототип карточки, но очень тормозящий даже в релизной сборке. Пришлось уделить пару спринтов на ресерч и составление best practices. Забавное совпадение, но как раз с этого времени начали чаще выходить статьи и разборы с “оптимизициями”. Я мнемонически назвал это время “эпоха осознанного Compose”.

• Медленная инициализация. Написанный UI на Jetpack Compose инициализируется медленнее, чем на View. Если делаете как мы, а именно запускаете фрагмент с Compose View, то знайте, что Compose это unbundled library. Это означает что Compose Runtime код загружается при первом заходе на этот экран. Это приводит к тому, что первый запуск экрана будет медленным. Над скоростью работы Jetpack Compose гугловцы постоянно работают и что-то улучшают. Например, с недавним Compose 1.5 Google переделал множество стандартных Modifier на новый механизм, что в *их замерах* позволило ускорить Compose до 80%. В целом, View обычно НЕ медленнее. Часто View и Compose практически одинаковые, особенно в релизе + baseline + R8.

• Работа с картинками. Картинки и их отрисовка доставляет немало проблем в Compose. Легко, если у вас есть картинка и она статична, но если меняется контент в ней, то морганий не избежать. Если для первого сценария мы как-то придумали решение, то для второго – еще нет. Если придумаем, напишем статью в рамках этой серии.

• Некоторые проблемы вскрываются только по ходу. Не имея практики, иногда можно натыкаться на какие-то ограничения Compose, которые на View бы не возникли. Мы тоже натыкались, решали проблемы на ходу. Важно отметить, что инструмент достаточно новый, и Google много ресурсов тратит на продвижение и оптимизацию Compose. Не исключено, что в будущем им можно будет пользоваться также предсказуемо, как и системой View (к слову, и во View до сих пор можно встретить непредсказуемые поведения).

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

Несмотря на все трудности, результат оказался не хуже, чем в Фигме. А на самом деле в 100 раз лучше: продакты думали, что смотрят на iOS, а не на Android.

В статье я рассмотрел, как мы начинали разработку Карточки продукта, и конкретно как мы искали лучший подход для реализации скелета экрана, который позволил бы нам реализовать базовое поведение экрана и остальный детали.

Спрототипировали несколько подходов, и придумали собственное решение:

• Скролл + снаппинг, сделанный в LazyColumn ручными анимированием скролла

• Анимированное раскрытие элемента через translationY

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

Пишите в комментариях, если вы хотите увидеть разбор каких-то определенных контролов, реализованных нами на Jetpack Compose. Таблицу с ними я прикладываю ниже, или вы можете обратиться к видео, которое было прикреплено выше.

У нас в Додо намечается еще множество проектов с дерзкими и красивыми дизайнами, и поэтому мы ищем в наши команды мобильных UI экспертов – гуру, знающих о дизайне на мобилках все и способных вести команду в сторону построения правильного и красивого интерфейса

Если это про вас – смело заходите и откликайтесь на наши позиции, и ждем вас на собеседованиях 🙂

В каналах Dodo Mobile и Мобильное чтиво мы рассказываем про разработку приложений в Dodo. Подписывайтесь, чтобы узнавать новости раньше всех.