Привет! Меня зовут Андрей Шоколов, я Android-разработчик KODE.
К нам обратилась компания Forward Leasing с запросом разработать мобильное приложение по готовому дизайну. Прототип содержал дугу, которая по задумке должна была сжиматься в одну линию при скролле. За основу решили взять CoordinatorLayout: у нас уже был положительный опыт работы с ним на другом проекте. Ещё в нашей команде часто любили соревноваться, какой же Layout лучше — CoordinatorLayout или MotionLayout, и именно сейчас настало время узнать.
Сейчас я понимаю, что проблема была создана на ровном месте, — но это я выяснил только в процессе работы. В статье расскажу, с какими 7 сложностями CoordinatorLayout я столкнулся и как сделать за полчаса то, с чем я провозился сутки.
Задача проекта
Мне нужно было создать AppBarLayout с дугой, который скроллится в одну линию. Функциональность добавлялась в существующую Activity приложения Forward. Корневым элементом для главной Activity был выбран CoordinatorLayout — это ViewGroup, целью которой является координация внутренних view-элементов.
Прежде чем я расскажу, что такое CoordinatorLayout и с какими сложностями в реализации я столкнулся, покажу, как в итоге должно было получиться:
Финальный результат
Что такое CoordinatorLayout с Default behavior
CoordinatorLayout — это просто обычный FrameLayout. Нет, простите: как написано в документации, это super-powered FrameLayout!
С помощью Behaviors можно управлять дочерней View. Думаю, все видели эти красивые анимации, когда снизу выплывает Snackbar, а вместе с ним вверх поднимается FAB (Floating Action Button). Всё работает отлично. Но именно Behaviors и подставят меня позднее, потому что когда тебе нужно делать не всё по дефолту, а добавлять что-то своё, то возникают некоторые сложности. Для реализации такой дуги был создан класс RoundedAppBarLayout, наследующий AppBarLayout.
Что дано в RoundedAppBarLayout
Toolbar — самая обычная вью тулбара из Android.
ContentView, где может быть всё, что угодно.
Arc — наша дуга.
С какими сложностями я столкнулся и как их решал
№1. Скроллинг
У нас есть RoundedAppBarLayout, в котором находятся Toolbar, ContentView и Arc. Для каждого элемента вью внутри него можно задать scrollFlags, которые описывают поведение вью при скролле: scroll, snap, expandAlways, expandAlwaysCollapsed, exitUntilCollapsed. Как они работают? AppBarLayout проходится по всем дочерним вью — child’ам, которые у него есть, и смотрит: если выставлен scroll, тогда добавить то, что эта вьюшка скроллится, если noScroll — return.
Если на Toolbar написано scroll, то он прокрутится, а всё, что находится ниже него, — нет. Соответственно, если поставить scroll на Toolbar и ContentView, то прокручиваться будут только они. Нам же нужно ровно наоборот: чтобы скроллилась дуга, а не всё, что выше неё.
Решение
CollapsingToolbar. Он позволяет оставить Toolbar наверху и даёт возможность прокручивать ContentView, Arc и содержимое ниже. Это решение работает достаточно хорошо, за исключением того, что Toolbar должен быть всегда последним элементом CollapsingToolbar.
Код
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/transparent"
tools:parentTag="com.google.android.material.appbar.AppBarLayout">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="@+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/transparent"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed">
</com.google.android.material.appbar.CollapsingToolbarLayout>
</merge>№2. Прозрачные зоны в Arc и отрисовка дуги
Для того чтобы нарисовать дугу в AppBarLayout, в блоке Arc должны находиться зоны, которые будут прозрачными. Поэтому выставляем AppBarLayout transparent, как и ContentView: мы не знаем, какого цвета он должен быть.
Но если мы оставим CollapsingToolbar, который вложен в AppBar, без цвета, как и наш ContentView, то на выходе мы получим прозрачный прямоугольник.
Решение
Покрасить CollapsingToolbar в какой-то цвет. Мы выбрали фиолетовый, так как это основной цвет проекта. Этим решением мы также улучшили анимацию: теперь при прокрутке блок может затемняться, и это выглядит достаточно красиво.
Как это выглядит
Остаётся вопрос с дугой. Мы не можем поместить её в в CollapsingToolbar, потому что он имеет свой цвет, а Arc должна быть transparent. Получается, мы должны поместить дугу в AppBarLayout, но он, как мы помним, не даёт скроллить всё, что внизу.
Решение
Рисовать на канвасе и во время скролла просчитывать, как рисовать дугу.
Элемент нужно добавить в CollapsingToolbar. Можно было бы сразу добавить сюда Toolbar, но так как нужно, чтобы он был последним элементом в CollapsingToolbarLayout, его приходится записывать отдельно. То есть я делаю Inflate Layout’а и добавляю в конец CollapsingToolbarLayout.
Код
private fun addContentView(){
if (childCount > 1) {
val contentChild = this.getChildAt(1)
removeView(contentChild)
val layoutParams = CollapsingToolbarLayout.LayoutParams(contentChild.layoutParams)
with(contentChild) {
layoutParams.setMargins(
marginStart,
marginTop + toolbarHeight,
marginEnd,
marginBottom
)
}
contentChild.setBackgroundColor(context.getColor(R.color.accent2))
contentChild.layoutParams = layoutParams
collapsingToolbar.addView(contentChild)
}
}
override fun onFinishInflate() {
super.onFinishInflate()
addContentView()
val toolbar = LayoutInflater.from(context)
.inflate(R.layout.toolbar_default, collapsingToolbar, false)
removeView(toolbar)
collapsingToolbar.addView(toolbar)
}В итоге получился такой простенький класс, где есть атрибуты, title, где можно задать иконку для Toolbar, добавить ContentView, который находится в самом нашем RoundedAppBarLayout, и нарисовать дугу.
№3. Пустое пространство после ContentView
С чем столкнулись дальше. После Toolbar и ContentView у нас нет никакого пространства. По идее, туда нужно было бы добавить вьюшку, но вместе с ней при скролле появлялась бы белая полоса. Я заранее ожидал такое поведение.
Решение
Расширение AppBarLayout. Также сохраняю appbarBottom, чтобы нарисовать дугу: сохраняю нижнюю координату ContentView и увеличиваю AppBarLayout до конца блока Arc. Так нам будет удобнее рисовать. (Спойлер: это решение в итоге со мной сыграет злую шутку.)
Расширяю AppBarLayout
class RoundedAppBarLayout @JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0
) : AppBarLayout(context, attrs, defStyleAttr) {
init {
LayoutInflater.from(context).inflate(R.layout.appbar_rounded_default, this, true)
initView()
}
private fun initView() {
this.post {
layoutParams = CoordinatorLayout.LayoutParams(width, height + arcHeight)
appbarBottom = height.toFloat()
appbarHalfWidth = width / 2f
}
}
}Добавляю ContentChild и Toolbar для нормального отображения контента
override fun onFinishInflate() {
super.onFinishInflate()
if (childCount > 1) {
val contentChild = this.getChildAt(1)
removeView(contentChild)
val layoutParams = CollapsingToolbarLayout.LayoutParams(contentChild.layoutParams)
with(contentChild) {
layoutParams.setMargins(
marginStart,
marginTop + toolbarHeight,
marginEnd,
marginBottom
)
}
contentChild.setBackgroundColor(context.getColor(R.color.accent2))
contentChild.layoutParams = layoutParams
collapsingToolbar.addView(contentChild)
}Рисую дугу
private fun drawArc(canvas: Canvas) {
val scale = bottom / height.toFloat()
arcPath.apply {
reset()
moveTo(0f, appbarBottom)
quadTo(
appbarHalfWidth,
//divide by 2 due to arc drawing logic
(appbarBottom + (arcHeight * 2)) * scale,
width.toFloat(),
appbarBottom
)
}
canvas.drawPath(arcPath, arcPaint).apply {
invalidate()
}
}Нужно просчитать расстояние, когда AppBarLayout полностью заскроллен и недоскролен. То есть scale = 1 — это AppBarLayout раскрыт полностью, а scale = 0 — схлопнут. И рисую саму дугу. Я столкнулся здесь с очень интересной логикой: если указывать по y-координате, что крайняя точка дуги должна быть на 48 пикселях, то вершина этой точки будет на 24 пикселях — в два раза меньше. В итоге нужно домножать на два — решил я, не разобравшись с причиной.
Сейчас, во время написания статьи, я понимаю, что использовал функцию, которая рисует не дугу, а кривую Безье. И она строится не через крайнюю точку, а посередине. Вместо Path можно использовать Arc. Реализация останется той же, только без домножения на 2.
Весь код класса AppBarLayout
class RoundedAppBarLayout @JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0
) : AppBarLayout(context, attrs, defStyleAttr) {
private var appbarBottom = 0f
private var appbarHalfWidth = 0f
//region toolbarArc
private val arcHeight = DimensUtils.convertDpToPixel(48f, context)
private val toolbarHeight = DimensUtils.convertDpToPixel(56f, context)
private val arcPaint = Paint().apply {
color = context.getColor(R.color.accent2)
style = Paint.Style.FILL
isAntiAlias = true
}
private val arcPath = Path()
//endregion
init {
LayoutInflater.from(context).inflate(R.layout.appbar_default, this, true)
initView()
}
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
drawArc(canvas)
}
override fun onFinishInflate() {
super.onFinishInflate()
if (childCount > 1) {
val contentChild = this.getChildAt(1)
removeView(contentChild)
val layoutParams = CollapsingToolbarLayout.LayoutParams(contentChild.layoutParams)
with(contentChild) {
layoutParams.setMargins(
marginStart,
marginTop + toolbarHeight,
marginEnd,
marginBottom
)
}
contentChild.setBackgroundColor(context.getColor(R.color.accent2))
contentChild.layoutParams = layoutParams
collapsingToolbar.addView(contentChild)
}
val toolbar = LayoutInflater.from(context)
.inflate(R.layout.toolbar_default, collapsingToolbar, false)
removeView(toolbar)
collapsingToolbar.addView(toolbar)
}
private fun initView() {
setBackgroundColor(context.getColor(R.color.transparent))
outlineProvider = null
this.post {
layoutParams = CoordinatorLayout.LayoutParams(width, height + arcHeight)
appbarBottom = height.toFloat()
appbarHalfWidth = width / 2f
}
}
private fun drawArc(canvas: Canvas) {
val scale = bottom / height.toFloat()
arcPath.apply {
reset()
moveTo(0f, appbarBottom)
quadTo(
appbarHalfWidth,
//divide by 2 due to arc drawing logic
(appbarBottom + (arcHeight * 2)) * scale,
width.toFloat(),
appbarBottom
)
}
canvas.drawPath(arcPath, arcPaint).apply {
invalidate()
}
}
}№4. Белая полоса при коллапсе
Только я порадовался, что всё хорошо работает, как внезапно обнаружился костыль в основном коде. Когда ты прокручиваешь экран, то буквально за пару пикселей до конца появляется белый прямоугольник.
Начинаешь разбирать — понимаешь, что это проделки Behavior c AppBarLayout. Так как я обновил ширину всего AppBarLayout (там теперь AppBarLayout и ширина нашей дуги), то когда он коллапсится, Layout смотрит, что AppBarLayout должен быть по высоте как Toolbar и дуга, поэтому выделяет место именно под такой размер.
Изначально я думал, что так как AppBarLayout имеет transparent background, то никаких проблем не будет, но когда AppBarLayout коллапсится, цвет background уже не играет роли.
Во время разработки я не понял, почему в AppBarLayout свободное пространство остаётся белым, а не transparent. В коде AppBarLayout я не смог найти этого. Возможно, это уже тонкости работы с CoordinatorLayout.
Решение
Я долго думал, как это исправить, и решил применить метод «инкостыляции». Он заключается в том, что я пишу свой кастомный Behavior, и когда он устанавливается в AppBarLayout, то я вызываю метод setRoundedAppBarBehavior. По сути я просто добавляю дополнительный margin, чтобы он мог отображаться поверх AppBarLayout.
Код
class RoundedAppBarBehavior(context: Context, attrs: AttributeSet) :
AppBarLayout.ScrollingViewBehavior(context, attrs) {
private var isInstalled = false
override fun layoutDependsOn(
parent: CoordinatorLayout,
child: View,
dependency: View
): Boolean {
if (!isInstalled && dependency is BaseAppBarLayout) {
isInstalled = true
child.setRoundedAppBarBehavior()
}
return super.layoutDependsOn(parent, child, dependency)
}
}
fun View.setRoundedAppBarBehavior() {
if (this is ViewGroup) {
val arcHeight = resources.getDimensionPixelSize(R.dimen.toolbar_arc_height)
this.post {
clipToPadding = false
val lp = CoordinatorLayout.LayoutParams(layoutParams)
lp.behavior = AppBarLayout.ScrollingViewBehavior()
lp.setMargins(marginStart, marginTop - arcHeight, marginEnd, marginBottom)
layoutParams = lp
}
}
}Всё снова заработало, ура!
Как выглядит проблема и решение
№5. AppBar без контента не скроллится
Оказалось, что каждого AppBarLayout может быть контент внутри. И AppBarLayout думает: контента внутри меня никакого нет, так зачем мне скроллиться?
Решение
Разделение базового класса на два дочерних: RoundedAppBarLayour и SimpleRoundedAppBarLayout. В первый можно поместить контент, а второй останется без него.
Код базового класса AppBarLayout и 2 наследуемых SimpleRoundedAppBarLayout и RoundedAppBarLayout
abstract class BaseAppBarLayout @JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0
) : AppBarLayout(context, attrs, defStyleAttr) {
var title: String? = null
set(value) {
field = value
titleToolbar?.text = value ?: ""
}
var navigationIcon: Int? = null
var isEnableCollapsingBehaviour: Boolean = false
// The value from which the arc is drawn
protected var appbarBottom = 0f
protected var appbarHalfWidth = 0f
//region toolbarArc
protected val arcHeight = context.resources.getDimensionPixelSize(R.dimen.toolbar_arc_height)
protected val toolbarHeight = context.resources.getDimensionPixelSize(R.dimen.toolbar_height)
val nonScrollableHeight = arcHeight + toolbarHeight
protected val arcPaint = Paint().apply {
color = context.getColor(R.color.accent2)
style = Paint.Style.FILL
isAntiAlias = true
}
protected val arcPath = Path()
//endregion
var contentChild: View? = null
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
drawArc(canvas)
}
fun updateToolbarTitleMargin(
marginStart: Int = 0,
marginTop: Int = 0,
marginEnd: Int = 0,
marginBottom: Int = 0
) {
titleToolbar.layoutParams = Toolbar.LayoutParams(titleToolbar.layoutParams).apply {
setMargins(marginStart, marginTop, marginEnd, marginBottom)
}
}
protected fun initToolbar(toolbar: Toolbar) {
navigationIcon?.let {
toolbar.navigationIcon = ContextCompat.getDrawable(context, it)
toolbar.setNavigationOnClickListener {
(context as? Activity)?.onBackPressed()
}
}
toolbar.findViewById<TextView>(R.id.titleToolbar)?.let { textView ->
textView.text = title
if (navigationIcon != null) {
textView.layoutParams = Toolbar.LayoutParams(textView.layoutParams).apply {
setMargins(0, 0, 64.dp, 0)
}
}
}
}
protected fun initAttrs(attrs: AttributeSet? = null, defStyleAttr: Int = 0, defStyle: Int = 0) {
context.withStyledAttributes(
attrs,
R.styleable.RoundedAppBarLayout,
defStyleAttr,
defStyle
) {
val defValue = -1
title = getString(R.styleable.RoundedAppBarLayout_ral_title)
getResourceId(R.styleable.RoundedAppBarLayout_ral_navigate_icon, defValue).apply {
if (this != defValue) navigationIcon = this
}
isEnableCollapsingBehaviour =
getBoolean(R.styleable.RoundedAppBarLayout_ral_collapsing_behaviour, false)
}
}
protected open fun drawArc(canvas: Canvas) {
val scale = (bottom - nonScrollableHeight) / (height - nonScrollableHeight).toFloat()
contentChild?.alpha = max(0f, scale - (1 - scale))
if (isEnableCollapsingBehaviour) collapsingBehaviour(scale)
arcPath.apply {
reset()
moveTo(0f, appbarBottom)
quadTo(
appbarHalfWidth,
//multiply by 2 due to arc drawing logic
appbarBottom + (arcHeight * 2) * scale,
width.toFloat(),
appbarBottom
)
}
canvas.drawPath(arcPath, arcPaint).apply {
invalidate()
}
}
private fun collapsingBehaviour(scale: Float) {
titleToolbar?.alpha = 1 - scale
contentChild?.y = (toolbarHeight - arcHeight).toFloat().dp
}
}
class SimpleRoundedAppBarLayout @JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0
) : BaseAppBarLayout(context, attrs, defStyleAttr) {
init {
LayoutInflater.from(context).inflate(R.layout.appbar_rounded_simple, this, true)
initView()
initAttrs(attrs, defStyleAttr)
}
override fun onFinishInflate() {
super.onFinishInflate()
toolbar.setBackgroundColor(ContextCompat.getColor(context, R.color.accent2))
initToolbar(toolbar)
}
override fun drawArc(canvas: Canvas) {
val scale = (bottom - toolbarHeight) / (height - toolbarHeight).toFloat()
val startDrawingHeight = appbarBottom + arcHeight * (1 - scale)
arcPath.apply {
reset()
moveTo(0f, startDrawingHeight)
quadTo(
appbarHalfWidth,
//multiply by 2 due to arc drawing logic
appbarBottom + (arcHeight * 2) * scale,
width.toFloat(),
startDrawingHeight
)
}
canvas.drawPath(arcPath, arcPaint).apply {
invalidate()
}
}
private fun initView() {
setBackgroundColor(context.getColor(R.color.transparent))
backgroundTintMode = PorterDuff.Mode.OVERLAY
outlineProvider = null
this.post {
appbarBottom = height - arcHeight.toFloat()
appbarHalfWidth = width / 2f
}
}
}
class RoundedAppBarLayout @JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0
) : BaseAppBarLayout(context, attrs, defStyleAttr) {
private var isArcDrawn = false
init {
LayoutInflater.from(context).inflate(R.layout.appbar_rounded_default, this, true)
initView()
initAttrs(attrs, defStyleAttr)
}
override fun onFinishInflate() {
super.onFinishInflate()
if (childCount > 1) addContentView()
val toolbar = LayoutInflater.from(context)
.inflate(R.layout.toolbar_default, collapsingToolbar, false)
removeView(toolbar)
collapsingToolbar.addView(toolbar)
(toolbar as? Toolbar)?.let { initToolbar(it) }
}
private fun initView() {
setBackgroundColor(context.getColor(R.color.transparent))
backgroundTintMode = PorterDuff.Mode.OVERLAY
outlineProvider = null
this.post {
layoutParams = CoordinatorLayout.LayoutParams(width, height + arcHeight)
appbarBottom = height.toFloat()
appbarHalfWidth = width / 2f
isArcDrawn = true
}
}
private fun addContentView() {
val contentChild = this.getChildAt(1)
removeView(contentChild)
val layoutParams = CollapsingToolbarLayout.LayoutParams(contentChild.layoutParams)
layoutParams.setMargins(
marginStart,
marginTop + toolbarHeight,
marginEnd,
marginBottom
)
contentChild.setBackgroundColor(context.getColor(R.color.accent2))
contentChild.layoutParams = layoutParams
this.contentChild = contentChild
collapsingToolbar.addView(contentChild)
}
}Тот Toolbar, в котором нет контента, теперь можно сделать цветом. Делаем это потому, что теперь не будет эффекта затемнения, как было на гифке в первом пункте (так как контента, кроме Toolbar, нет), поэтому мы можем просто задать цвет, и всё будет отлично работать. Здесь показываю, как в итоге было сделано.
Здесь я уже мог добавить ArcView — саму вьюшку дуги — и не беспокоиться с тем, что там не будет транспарентного расстояния. Теперь CollapsingToolbar будет transparent, Toolbar остаётся с цветом, а AppBarLayout не требует расширения.
Единственное, что нам пришлось изменить в коде, — изменить высоту и переделать рисование дуги, потому что так как там нет Child, то не надо ничего затемнять.
XML-код для SimpleRoundedAppBarLayout и RoundedAppBarLayout
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/transparent"
android:orientation="vertical"
tools:parentTag="com.google.android.material.appbar.AppBarLayout">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="@+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/transparent"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed">
<View
android:id="@+id/arcView"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_marginTop="56dp"
android:background="@color/transparent" />
<include
android:id="@+id/toolbar"
layout="@layout/toolbar_default"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_gravity="top"
app:layout_collapseMode="pin" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</merge>
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/transparent"
tools:parentTag="com.google.android.material.appbar.AppBarLayout">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="@+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/accent2"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed">
</com.google.android.material.appbar.CollapsingToolbarLayout>
</merge>№6. При скрытии и показе AppBarLayout в активности появляется белая полоса
Далее у нас возникли последствия метода «инкостыляции» при выставлении visibility.
У нас есть одна активность и на ней много фрагментов. Сверху активности находится RoundedAppBarLayout, а внизу — контейнер для фрагментов. Если во время переключения между фрагментами менять visibility, то появляется белая полоса.
Причина — у дочернего контейнера для фрагмента выставлялся margin. Белая полоса — это и есть тот самый margin.
Решение
Дополнить кастомный Behavior и добавить в него VisibilityListener.
Новый код Behavoir
class RoundedAppBarBehavior(context: Context, attrs: AttributeSet) :
AppBarLayout.ScrollingViewBehavior(context, attrs) {
private var isInstalled = false
override fun layoutDependsOn(
parent: CoordinatorLayout,
child: View,
dependency: View
): Boolean {
if (!isInstalled && dependency is BaseAppBarLayout) {
isInstalled = true
child.setRoundedAppBarBehavior()
addVisibilityListener(dependency, child)
}
return super.layoutDependsOn(parent, child, dependency)
}
private fun addVisibilityListener(appBarLayout: AppBarLayout, child: View) {
var isVisibleSaved = appBarLayout.isVisible
val visibilityListener = ViewTreeObserver.OnGlobalLayoutListener {
if (isVisibleSaved != appBarLayout.isVisible) {
isVisibleSaved = appBarLayout.isVisible
if (isVisibleSaved) {
child.setRoundedAppBarBehavior()
} else {
child.removeRoundedAppBarBehavior()
}
}
}
appBarLayout.viewTreeObserver.addOnGlobalLayoutListener(visibilityListener)
appBarLayout.doOnDetach {
appBarLayout.viewTreeObserver.removeOnGlobalLayoutListener(visibilityListener)
}
}
}Здесь я подписываюсь на GlobalLayout, когда doOnDetach — отписываюсь от него. Если он видим, тогда я добавляю ему RoundedBehavior, то есть добавляю margin, если он невидим — я убираю их. Это делается для того, чтобы не возникали утечки памяти при работе в приложении.
№7. Белое пространство при нескроллящемся контенте в Child
Прилетел ещё один баг. В профиле клиента появляется белая полоса, если child содержит нескроллящийся контент.
Когда я работал со списками, применялся мой Behavior — весь список прокручивался, и всё работало отлично. Как только в Layout, на который применялся behaviour, появилась статическая часть, то margin сверху оставался.
Решение
Добавить кастомный ScrollListener. Он сделал отображение AppBarLayout ещё более красивым, в скролл — плавным.
Обновлённый код
class RoundedAppBarBehavior(context: Context, attrs: AttributeSet) :
AppBarLayout.ScrollingViewBehavior(context, attrs) {
private var isInstalled = false
private val arcHeight = context.resources.getDimensionPixelSize(R.dimen.toolbar_arc_height)
override fun layoutDependsOn(
parent: CoordinatorLayout,
child: View,
dependency: View
): Boolean {
if (!isInstalled && dependency is BaseAppBarLayout) {
isInstalled = true
child.setRoundedAppBarBehavior()
addVisibilityListener(dependency, child)
addOnScrollListener(dependency, child)
}
return super.layoutDependsOn(parent, child, dependency)
}
private fun addOnScrollListener(appBarLayout: BaseAppBarLayout, child: View) {
val scrollListener = AppBarLayout.OnOffsetChangedListener { _, _ ->
val divider = (appBarLayout.height - appBarLayout.nonScrollableHeight).toFloat()
val scale =
if (divider == 0f) 1f else (appBarLayout.bottom - appBarLayout.nonScrollableHeight) / divider
child.setPadding(
child.paddingLeft,
max(0, (arcHeight * scale).toInt()),
child.paddingEnd,
child.paddingBottom
)
}
appBarLayout.addOnOffsetChangedListener(scrollListener)
appBarLayout.doOnDetach {
appBarLayout.removeOnOffsetChangedListener(scrollListener)
}
}
private fun addVisibilityListener(appBarLayout: AppBarLayout, child: View) {
var isVisibleSaved = appBarLayout.isVisible
val visibilityListener = ViewTreeObserver.OnGlobalLayoutListener {
if (isVisibleSaved != appBarLayout.isVisible) {
isVisibleSaved = appBarLayout.isVisible
if (isVisibleSaved) {
child.setRoundedAppBarBehavior()
} else {
child.removeRoundedAppBarBehavior()
}
}
}
appBarLayout.viewTreeObserver.addOnGlobalLayoutListener(visibilityListener)
appBarLayout.doOnDetach {
appBarLayout.viewTreeObserver.removeOnGlobalLayoutListener(visibilityListener)
}
}
}Здесь вычисления примерно такие же, как с рисованием дуги: рассчитывается, рассчитывается коэффициент скролла scale, где 0 — это полностью скрытая дуга, а 1 — полностью раскрытая дуга. Теперь расстояние контента до дуги будет точно рассчитываться во время скролла.
Как выглядит проблема и решение
Как сделать за полчаса то, с чем я провозился сутки
Я прикидывал много вариантов, как можно было бы сделать похожее поведение с CoordinatorLayout, но, к сожалению, в AppBarLayout нельзя сделать прокрутку у контента, который находится ниже статического. Даже если добавить два AppBarLayout, они всё равно будут криво работать.
Когда мы изначально анализировали, как сделать анимацию на главном экране, то казалось, что с задачей не возникнет никаких проблем. Только в ходе проекта начали находить разные баги в том методе, который мы выбрали, и поняли, что есть много кейсов, где стандартное поведение не работает.
С каждым новым багом мы вносили новые изменения, дописывали и доделывали. Уже в финале мы осознали, что лучше было выбрать другое решение. Тогда я бы смог реализовать задачу за полчаса вместо суток.
На какие решения я предлагаю обратить внимание:
1) Написать свой наследник FrameLayout
С ним можно делать всё, что угодно: и на канвасе рисовать, и двигать вьюшки, как хочется.
2) Использовать MotionLayout
Используя MotionLayout, реализовать дугу в AppBarLayout можно буквально за 30 минут! Для этого достаточно указать все нужные элементы на фрагменте или активности, а потом, используя встроенные инструменты, задать поведение при анимации.
💡 Пример реализации дуги в Motion Layout — на Гитхабе.
