Реализация нашей дизайн-системы на Jetpack Compose не всегда проходила гладко. Большинство компонентов мы переписали без проблем, но с некоторыми пришлось повозиться. Одним из таких компонентов стал аналог старого доброго CollapsingToolbarLayout из View-мира. В статье разберем тонкости его реализации на Compose: погрузимся в тонкости кастомного лейаутинга и системы вложенного скролла Compose, а также посмотрим в исходники библиотеки androidx.compose.material3, вдохновившей нас на итоговое решение.
Материал может быть полезен тем, кто собирается делать сложные кастомные компоненты на Compose, и всем, кто интересуется внутренними деталями работы Compose-компонентов.
Состояния компонента
Компонент дизайн-системы, который нам нужно было реализовать на Compose, имеет достаточно много состояний. Вот так выглядит самое простое:
При этом мы хотим, чтобы заголовок схлопывался при скролле контента экрана:
Опционально мы можем менять стиль заголовка, добавлять иконку навигации, кнопки дополнительных действий и произвольный контент внизу тулбара (например, табы ViewPager):
Также мы должны уметь добавлять произвольный контент в центре тулбара, отключая при этом схлопывание заголовка при скролле:
На некоторых экранах заголовок может иметь несколько строк. В таких случаях мы должны плавно переходить между заголовком из двух строк к заголовку из одной строки с многоточием:
И, конечно же, в каждом из состояний при проскролле контента экрана нам нужно анимированно переключить тень в нижней части тулбара.
Ищем инструмент
Такой компонент было бы легко реализовать с помощью стандартных Compose-компонентов: Row и Column, если бы не поведение заголовка при скролле. В старом View-мире для такого поведения мы привыкли использовать связку из CollapsingToolbarLayout и CoordinatorLayout из material-библиотеки. Поэтому, прежде чем изобретать свое решение, давайе посмотрим на готовые варианты из Compose-мира.
Один из таких вариантов — компонент TopAppBar из compose.material3. Мы рассматриваем именно material3, так как в compose.material аналогичный компонент статичен и никак не взаимодействует со скроллом. TopAppBar из material3 реализован через кастомный лейаут, но поведение при скролле (на момент версии 1.0.1) у него выглядит совсем не так, как у привычного нам CollapsingToolbarLayout. Заголовок TopAppBar не схлопывается, а просто делает fade-in/fade-out:
На момент нашего ресерча мы рассматривали и другой вариант: библиотека compose-collapsing-toolbar, которая предлагает свою систему лейаутинга для контента тулбара и позволяет гибко настроить его содержимое. Система лейаутинга в этой библиотеке строится на модифаерах, которыми можно настроить отдельные компоненты. Например, задать им выравнивание в зависимости от состояния схлопнутости или настроить параллакс. Если вам необходимо реализовать несложный collapsing toolbar, то, возможно, эта библиотека хорошо подойдет под ваш кейс.
К сожалению, системы лейаутинга из этой библиотеки оказалось недостаточно для нашего компонента, так как положение динамически меняющегося заголовка у нас сильно зависит от расположения опциональных компонентов внутри тулбара. Из-за этого приходилось вычислять вручную довольно много параметров вложенных компонентов, и в итоге мы пришли к тому, что фактически пишем свой лейаут, но поверх сторонней библиотеки.
А еще компонент из нашей дизайн-системы наверняка можно было бы сделать через Compose-реализацию MotionLayout. Но отчасти нас остановил неидеальный опыт работы с ним в прошлом, а отчасти, потому что очень привлекательным показался вариант адаптировать TopAppBar из compose.material3 под специфику нашей дизайн-системы, ведь эти компоненты во многом схожи. Если у вас есть опыт реализации аналогичных Compose-компонентов через MotionLayout, пишите в комментариях ваш фидбек о работе с ним, но мы в итоге пошли в сторону адаптации исходников TopAppBar из compose.material3 под наши нужды.
Кастомный layout в Compose
TopAppBar из compose.material3 построен на основе кастомного лейаута. Ключевой Composable-функцией для создания кастомного лейаута является Layout. С ее помощью мы можем задать произвольный способ измерения и расположения виджетов. Реализация кастомного лейаута состоит из трех этапов:
-
измерить размеры вложенных в лейаут (дочерних) компонентов;
-
определить итоговые размеры лейаута;
-
расположить дочерние компоненты внутри лейаута.
Дочерние компоненты мы передаем в функцию Layout через аргумент content. В нашем случае это: текст тайтла, опциональные слоты для navigation icon, экшенов, контента по центру тулбара и слот для произвольного контента в его нижней части. Для каждого компонента мы укажем модифаер layouId, который поможет нам в дальнейшем ссылаться на эти компоненты при лейаутинге:
Передача дочерних компонентов в Layout
Layout( content = { if (collapsingTitle != null) { Text( modifier = Modifier.layoutId(ExpandedTitleId) // ... ) Text( modifier = Modifier.layoutId(CollapsedTitleId) // ... ) } if (navigationIcon != null) { Box( modifier = Modifier.layoutId(NavigationIconId) ) { navigationIcon() } } if (actions != null) { Row( modifier = Modifier.layoutId(ActionsId) ) { actions() } } if (centralContent != null) { Box( modifier = Modifier.layoutId(CentralContentId) ) { centralContent() } } if (additionalContent != null) { Box( modifier = Modifier.layoutId(AdditionalContentId) ) { additionalContent() } } }, // ... )При этом для заголовка мы использовали два компонента Text, между которыми в дальнейшем будем вычислять альфа-переход при схлопывании: постепенно скрывать многострочный развернутый текст и переходить к показу схлопнутого однострочного текста. View-реализация CollapsingToolbarLayout использует под капотом аналогичный трюк для поддержки схлопывания многострочных заголовков:
Компоненты Text для перехода от многострочного заголовка к однострочному
Layout( content = { if (collapsingTitle != null) { Text( modifier = Modifier .layoutId(ExpandedTitleId) .wrapContentHeight(align = Alignment.Top) .graphicsLayer( scaleX = collapsingTitleScale, scaleY = collapsingTitleScale, transformOrigin = TransformOrigin(0f, 0f) ), text = collapsingTitle.titleText, style = collapsingTitle.expandedTextStyle ) Text( modifier = Modifier .layoutId(CollapsedTitleId) .wrapContentHeight(align = Alignment.Top) .graphicsLayer( scaleX = collapsingTitleScale, scaleY = collapsingTitleScale, transformOrigin = TransformOrigin(0f, 0f) ), text = collapsingTitle.titleText, style = collapsingTitle.expandedTextStyle, maxLines = 1, overflow = TextOverflow.Ellipsis ) } // ... }, // ... )Далее переходим к измерению дочерних компонентов. Для этого передадим в Layout лямбду measurePolicy. Один из параметров этой лямбды measurables — список объектов Measurable, которые отражают готовые к измерению дочерние компоненты лейаута, переданные ранее в аргументе content. По layoutId мы можем найти конкретные компоненты и измерить их нужным образом:
Измерение дочерних компонентов лейаута
Layout( content = { /* ... */ }, modifier = /* ... */, measurePolicy = { measurables, constraints -> val horizontalPaddingPx = HorizontalPadding.toPx() val expandedTitleBottomPaddingPx = ExpandedTitleBottomPadding.toPx() // Measuring widgets inside toolbar: val navigationIconPlaceable = measurables.firstOrNull { it.layoutId == NavigationIconId } ?.measure(constraints.copy(minWidth = 0)) val actionsPlaceable = measurables.firstOrNull { it.layoutId == ActionsId } ?.measure(constraints.copy(minWidth = 0)) val expandedTitlePlaceable = measurables.firstOrNull { it.layoutId == ExpandedTitleId } ?.measure( constraints.copy( maxWidth = (constraints.maxWidth - 2 * horizontalPaddingPx).roundToInt(), minWidth = 0, minHeight = 0 ) ) val additionalContentPlaceable = measurables.firstOrNull { it.layoutId == AdditionalContentId } ?.measure(constraints) val navigationIconOffset = when (navigationIconPlaceable) { null -> horizontalPaddingPx else -> navigationIconPlaceable.width + horizontalPaddingPx * 2 } val actionsOffset = when (actionsPlaceable) { null -> horizontalPaddingPx else -> actionsPlaceable.width + horizontalPaddingPx * 2 } val collapsedTitleMaxWidthPx = (constraints.maxWidth - navigationIconOffset - actionsOffset) / fullyCollapsedTitleScale val collapsedTitlePlaceable = measurables.firstOrNull { it.layoutId == CollapsedTitleId } ?.measure( constraints.copy( maxWidth = collapsedTitleMaxWidthPx.roundToInt(), minWidth = 0, minHeight = 0 ) ) val centralContentPlaceable = measurables.firstOrNull { it.layoutId == CentralContentId } ?.measure( constraints.copy( minWidth = 0, maxWidth = (constraints.maxWidth - navigationIconOffset - actionsOffset).roundToInt() ) ) // ... }Здесь мы также используем объект constraints, из которого достаем ограничения для нашего лейаута: максимально доступные ему ширину и высоту. Например, дочерним компонентам navigationIcon и actions мы дали для измерения все доступное пространство, а для размера заголовков в схлопнутом и расхлопнутом состоянии выполнили вычисления с учетом боковых отступов итогового компонента и размеров соседних компонентов.
Вызов функции измерения (measure) на объектах типа Measurable возвращает Placeable, то есть измеренные компоненты, готовые к расположению на лейауте. Теперь мы можем посчитать координаты дочерних компонентов и определиться с итоговыми размерами лейаута: будем использовать максимально доступную ширину, а высоту рассчитаем на основе размеров дочерних компонентов и текущией схлопнутости тулбара:
Определяем координаты дочерних компонентов и размеры лейаута
Layout( content = { /* ... */ }, modifier = /* ... */, measurePolicy = { measurables, constraints -> // ... val collapsedHeightPx = when { centralContentPlaceable != null -> max(MinCollapsedHeight.toPx(), centralContentPlaceable.height.toFloat()) else -> MinCollapsedHeight.toPx() } var layoutHeightPx = collapsedHeightPx // Calculating coordinates of widgets inside toolbar: // Current coordinates of navigation icon val navigationIconX = horizontalPaddingPx.roundToInt() val navigationIconY = ((collapsedHeightPx - (navigationIconPlaceable?.height ?: 0)) / 2).roundToInt() // Current coordinates of actions val actionsX = (constraints.maxWidth - (actionsPlaceable?.width ?: 0) - horizontalPaddingPx).roundToInt() val actionsY = ((collapsedHeightPx - (actionsPlaceable?.height ?: 0)) / 2).roundToInt() // Current coordinates of title var collapsingTitleY = 0 var collapsingTitleX = 0 if (expandedTitlePlaceable != null && collapsedTitlePlaceable != null) { // Measuring toolbar collapsing distance val heightOffsetLimitPx = expandedTitlePlaceable.height + expandedTitleBottomPaddingPx scrollBehavior?.state?.heightOffsetLimit = when (centralContent) { null -> -heightOffsetLimitPx else -> -1f } // Toolbar height at fully expanded state val fullyExpandedHeightPx = MinCollapsedHeight.toPx() + heightOffsetLimitPx // Coordinates of fully expanded title val fullyExpandedTitleX = horizontalPaddingPx val fullyExpandedTitleY = fullyExpandedHeightPx - expandedTitlePlaceable.height - expandedTitleBottomPaddingPx // Coordinates of fully collapsed title val fullyCollapsedTitleX = navigationIconOffset val fullyCollapsedTitleY = collapsedHeightPx / 2 - CollapsedTitleLineHeight.toPx().roundToInt() / 2 // Current height of toolbar layoutHeightPx = lerp(fullyExpandedHeightPx, collapsedHeightPx, collapsedFraction) // Current coordinates of collapsing title collapsingTitleX = lerp(fullyExpandedTitleX, fullyCollapsedTitleX, collapsedFraction).roundToInt() collapsingTitleY = lerp(fullyExpandedTitleY, fullyCollapsedTitleY, collapsedFraction).roundToInt() } else { scrollBehavior?.state?.heightOffsetLimit = -1f } val toolbarHeightPx = layoutHeightPx.roundToInt() + (additionalContentPlaceable?.height ?: 0) // ... }В вычислениях высоты мы использовали некий collapsedFraction, то есть текущую долю схлопнутости тулбара (от 0 до 1). В дальнейшем мы свяжем ее со скроллом контента экрана. По этому значению очень удобно вычислять текущие координаты заголовка, используя функцию линейной интерполяции (lerp).
После того, как координаты дочерних компонентов и размеры лейаута определены, остается вызвать метод placeRelative, чтобы зафиксировать компоненты на лейауте:
Размещаем дочерние компоненты на лейауте
Layout( content = { /* ... */ }, modifier = /* ... */, measurePolicy = { measurables, constraints -> // ... layout(width = constraints.maxWidth, height = toolbarHeightPx) { navigationIconPlaceable?.placeRelative( x = navigationIconX, y = navigationIconY ) actionsPlaceable?.placeRelative( x = actionsX, y = actionsY ) centralContentPlaceable?.placeRelative( x = navigationIconOffset.roundToInt(), y = ((collapsedHeightPx - centralContentPlaceable.height) / 2).roundToInt() ) if (expandedTitlePlaceable?.width == collapsedTitlePlaceable?.width) { expandedTitlePlaceable?.placeRelative( x = collapsingTitleX, y = collapsingTitleY, ) } else { expandedTitlePlaceable?.placeRelativeWithLayer( x = collapsingTitleX, y = collapsingTitleY, layerBlock = { alpha = 1 - collapsedFraction } ) collapsedTitlePlaceable?.placeRelativeWithLayer( x = collapsingTitleX, y = collapsingTitleY, layerBlock = { alpha = collapsedFraction } ) } additionalContentPlaceable?.placeRelative( x = 0, y = layoutHeightPx.roundToInt() ) } }На этом этапе мы также реализовали переход от многострочного заголовка к однострочному при помощи параметра layerBlock.
И-и-и… Наш кастомный лейаут готов! Остается связать его со скроллом.
Обработка nested scroll в Compose
Мы хотим добиться поведения, при котором скролл от одного и того же жеста пользователя может переходить из пролистывания контента в схлопывание тулбара и наоборот. Для реализации такого поведения мы можем использовать модифайер nestedScroll. Определим его на общем родительском контейнере для тулбара и схлопывающегося контента под ним:
Использование nestedScroll
val nestedScrollConnection = object : NestedScrollConnection { override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset { return /* consumed amount of scroll */ } override fun onPostScroll( consumed: Offset, available: Offset, source: NestedScrollSource, ): Offset { return /* consumed amount of scroll */ } override suspend fun onPreFling(available: Velocity): Velocity { return /* consumed amount of scroll velocity */ } override suspend fun onPostFling(consumed: Velocity, available: Velocity): Velocity { return /* consumed amount of scroll velocity */ } } Scaffold( modifier = Modifier.nestedScroll(nestedScrollConnection), topBar = { CustomToolbar(/* toolbar params */) }, ) { contentPadding -> LazyColumn { /* screen content */ } }С помощью интерфейса NestedScrollConnection мы можем реагировать на события скролла иерархии компонентов внутри контейнера. Система вложенного скролла в Compose сначала прокидывает скролл вниз по иерархии: от родительских компонентов к дочерним, позволяя каждому компоненту «забрать себе» некоторое количество скролла. На такое событие мы можем реагировать через методы onPreScroll и onPreFling интерфейса NestedScrollConnection. Их возвращаемое значение — количество скролла, которое компонент «забрал себе» (consumed).
После того, как скролл спустился вниз и его обработали дочерние компоненты, мы можем поймать оставшийся после них скролл и обработать его подъем вверх по иерархии — от дочерних компонентов к родительским. Чтобы поймать отставший скролл, мы используем методы onPostScroll и onPostFling.
Для реализации скролла TopAppBar из compose.material3 использует вспомогательный класс, в котором трекается состояние проскроллености контента и количество пикселей, на которое должен схлопываться тулбар. В этом же классе задается максимальное и минимальное ограничение схлопнутости тулбара, на основе которых можно вычислить collapsedFraction, то есть определить долю схлопнутости тулбара:
ScrollState для тулбара
@Stable class CustomToolbarScrollState( initialHeightOffsetLimit: Float, initialHeightOffset: Float, initialContentOffset: Float, ) { /* ... */ /** * The top app bar's height offset limit in pixels, which represents the limit that a top app * bar is allowed to collapse to. * * Use this limit to coerce the [heightOffset] value when it's updated. */ var heightOffsetLimit by mutableStateOf(initialHeightOffsetLimit) /** * The top app bar's current height offset in pixels. This height offset is applied to the fixed * height of the app bar to control the displayed height when content is being scrolled. * * Updates to the [heightOffset] value are coerced between zero and [heightOffsetLimit]. */ var heightOffset: Float get() = _heightOffset.value set(newOffset) { _heightOffset.value = newOffset.coerceIn( minimumValue = heightOffsetLimit, maximumValue = 0f ) } /** * The total offset of the content scrolled under the top app bar. * * This value is updated by a [CustomToolbarScrollBehavior] whenever a nested scroll connection * consumes scroll events. A common implementation would update the value to be the sum of all * [NestedScrollConnection.onPostScroll] `consumed.y` values. */ var contentOffset by mutableStateOf(initialContentOffset) /** * A value that represents the collapsed height percentage of the app bar. * * A `0.0` represents a fully expanded bar, and `1.0` represents a fully collapsed bar (computed * as [heightOffset] / [heightOffsetLimit]). */ val collapsedFraction: Float get() = if (heightOffsetLimit != 0f) { heightOffset / heightOffsetLimit } else { 0f } private var _heightOffset = mutableStateOf(initialHeightOffset) } Посмотрим, как этот стейт используется для реализации NestedScrollConection тулбара. Начнем с метода onPreScroll:
Обработка onPreScroll
class CustomToolbarScrollBehavior( val state: CustomToolbarScrollState, // ... ) { val nestedScrollConnection = object : NestedScrollConnection { override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset { // Don't intercept if scrolling down. if (available.y > 0f) return Offset.Zero val prevHeightOffset = state.heightOffset state.heightOffset = state.heightOffset + available.y return if (prevHeightOffset != state.heightOffset) { // We're in the middle of top app bar collapse or expand. // Consume only the scroll on the Y axis. available.copy(x = 0f) } else { Offset.Zero } } /* ... */ } } Здесь мы не будем реагировать на скролл контента вниз, позволяя контенту под тулбаром сначала обработать доступный ему скролл. В этом случае в качестве consumed-значения скролла мы возвращаем 0, поскольку никакой скролл наш компонент пока не использовал.
При скролле вверх мы добавляем доступное значение скролла к текущему состоянию проскроллености тулбара и, если тулбару еще есть куда схлопываться, сообщим системе скролла, что мы использовали доступный нам скролл, вернув соответствующее consumed-значение из onPreScroll. Так мы избежим лишнего проскролливания контента под тулбаром. Если мы этого не сделаем, то получим вот такое некорректное поведение:
В onPostScroll, мы получаем значение скролла, которое уже обработал дочерний контент, и прибавляем это количество к накапливаемому нами состоянию проскроллености контента:
Обработка onPostScroll
class CustomToolbarScrollBehavior( val state: CustomToolbarScrollState, // ... ) { val nestedScrollConnection = object : NestedScrollConnection { /* ... */ override fun onPostScroll( consumed: Offset, available: Offset, source: NestedScrollSource, ): Offset { state.contentOffset += consumed.y if (available.y < 0f || consumed.y < 0f) { // When scrolling up, just update the state's height offset. val oldHeightOffset = state.heightOffset state.heightOffset = state.heightOffset + consumed.y return Offset(0f, state.heightOffset - oldHeightOffset) } if (consumed.y == 0f && available.y > 0) { // Reset the total content offset to zero when scrolling all the way down. This // will eliminate some float precision inaccuracies. state.contentOffset = 0f } if (available.y > 0f) { // Adjust the height offset in case the consumed delta Y is less than what was // recorded as available delta Y in the pre-scroll. val oldHeightOffset = state.heightOffset state.heightOffset = state.heightOffset + available.y return Offset(0f, state.heightOffset - oldHeightOffset) } return Offset.Zero } /* ... */ } } Поскольку мы аккумулируем в state.contentOffset сумму из большого количества чисел плавающей точкой, необходимо обнулять это количество, когда скролл внутреннего контента возвращается в свое начальное положение. Это помогает отчасти устранить последствия ошибок округления чисел. Доступное количество скролла после обработки дочерним компонентом мы прибавляем к состоянию схлопнутости тулбара. Это кейс со скроллом контента вниз.
Теперь поговорим про fling-жест. Fling-жест — это резкий свайп вверх или вниз. Он отличается от обычного скролла тем, что вместо конкретного количества скролла мы сообщаем экрану определенную скорость, с которой контент должен скроллиться, даже когда мы пользователь уберет палец с экрана:
Демо fling-жеста
Скорость должна постепенно уменьшаться до полной остановки. Для этого метод onPostFling принимает не просто количество скролла, а velocity: скорость в количестве пикселей в секунду. Обработка флинг-жеста — это технически обработка анимации. Только анимируем мы не сам контент, а уменьшение velocity, чтобы создать имитацию физического эффекта замедления. Эту анимацию мы будем проигрывать до тех пор, пока не используем всю доступную нашему компоненту скорость:
Обработка onPostFling
class CustomToolbarScrollBehavior( val state: CustomToolbarScrollState, // ... ) { val nestedScrollConnection = object : NestedScrollConnection { /* ... */ override suspend fun onPostFling(consumed: Velocity, available: Velocity): Velocity { var result = super.onPostFling(consumed, available) // Check if the app bar is partially collapsed/expanded. // Note that we don't check for 0f due to float precision with the collapsedFraction // calculation. if (state.collapsedFraction > 0.01f && state.collapsedFraction < 1f) { result += flingToolbar( state = state, initialVelocity = available.y, flingAnimationSpec = flingAnimationSpec ) } return result } /* ... */ } } private suspend fun flingToolbar( state: CustomToolbarScrollState, initialVelocity: Float, flingAnimationSpec: DecayAnimationSpec<Float>?, ): Velocity { var remainingVelocity = initialVelocity // In case there is an initial velocity that was left after a previous user fling, animate to // continue the motion to expand or collapse the app bar. if (flingAnimationSpec != null && abs(initialVelocity) > 1f) { var lastValue = 0f AnimationState( initialValue = 0f, initialVelocity = initialVelocity, ) .animateDecay(flingAnimationSpec) { val delta = value - lastValue val initialHeightOffset = state.heightOffset state.heightOffset = initialHeightOffset + delta val consumed = abs(initialHeightOffset - state.heightOffset) lastValue = value remainingVelocity = this.velocity // avoid rounding errors and stop if anything is unconsumed if (abs(delta - consumed) > 0.5f) { cancelAnimation() } } } return Velocity(0f, remainingVelocity) } Мы получили два ключевых компонента логики скроллла компонента: CustomToolbarScrollState и реализацию интерфейса NestedScrollConnection. Для удобства мы сложили их в один класс CustomToolbarScrollBehavior, который будет частью публичного API компонента.
Итоговый компонент
Посмотрим на использование итогового компонента тулбара. В его API вошли:
-
Слот для иконки навигации
-
Слот для действий в правой верхней части тулбара
-
Слот для дополнительного контента внизу тулбара
-
Слот для дополнительного контента по центру тулбара
-
Объект для кастомизации схлопывающегося заголовка
-
Scroll behavior для интеграции с системой скролла
Пример использования получившегося компонента
val scrollBehavior = rememberToolbarScrollBehavior() Scaffold( modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection) topBar = { CustomToolbar( scrollBehavior = scrollBehavior, collapsingText = CollapsingTitle( text = "Toolbar tile", expandedTextStyle = MaterialTheme.typography.headlineLarge ), actions = { ToolbarActionIcon( painter = painterResource(id = R.drawable.ic_settings), onClick = { } ) }, navigationIcon = { ToolbarBackIcon() }, additionalContent = { /* optional content at toolbar bottom */ }, centralContent = { /* opotional content at toolbar center */ }, collapsedElevation = 4.dp, ) } ) { LazyColumn { /* some screen content */ } }Это уже вторая версия компонента тулбара на Compose, которую мы внедрили на все наши Compose-экраны в проде. Помимо нашего основного приложения, пощупать и попереключать все возможные состояния описанной реализации тулбара можно в нашем демо-проекте. Там же вы найдете полный исходный код компонента, который мы разобрали в данной статье.
Делитесь в комментариях вашим опытом разработки кастомных компонентов на Compose, всем happy composing!
ссылка на оригинал статьи https://habr.com/ru/articles/703192/
Добавить комментарий