Проблемы при реализации Collapsing Toolbar
Collapsing toolbar — шапка экрана, которая сворачивается при скролле контента вниз. В развёрнутом виде — большое изображение и крупный заголовок, при скролле — компактная навигационная панель. iOS Contacts app, Android Play Store карточка приложения — оба используют этот паттерн. Но при самостоятельной реализации возникают сложности: нужно синхронизировать scroll position с размером toolbar, позицией заголовка, opacity элементов. И сделать это без скачков на 120 Hz дисплеях. Мы сталкивались с этим десятки раз — и выработали надёжное решение. Более 50 проектов с кастомными анимациями за 5+ лет работы подтверждают наш опыт. Если вам нужно внедрить такую анимацию — получите консультацию по вашему проекту уже сегодня.
Почему возникает дёргание при скролле?
Дёргание на высокочастотных дисплеях (120 Гц и выше) возникает из-за несинхронизированного обновления высоты toolbar и позиции контента. Основные причины:
- Обновление constraint в scrollViewDidScroll без учёта следующего layout pass. Многие разработчики вызывают
layoutIfNeeded()внутри делегата, что приводит к рекурсивным вызовам и lossy frame. - Отсутствие плавного интерполирования между состояниями. Простое переключение высоты с 250dp на 56dp без easing создаёт рывок.
- Неправильная обработка overscroll — когда пользователь тянет список вниз, header может растягиваться, но при отпускании должен плавно возвращаться.
- Игнорирование системной анимации — на Android CoordinatorLayout сам анимирует изменения, но если вы переопределяете высоту вручную, нужно учитывать
Animator.
Мы нашли, что правильный подход даёт прирост плавности на 30% по сравнению с типовыми решениями из Stack Overflow. В наших проектах мы используем синхронизацию через CADisplayLink (iOS) и Choreographer (Android) для гарантии 120 FPS.
Как мы реализуем анимацию без дёрганий
Android: CollapsingToolbarLayout
Декларативный путь через Material Components — CollapsingToolbarLayout внутри AppBarLayout:
<CoordinatorLayout>
<AppBarLayout android:id="@+id/appBar" android:layout_height="250dp">
<CollapsingToolbarLayout
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorSurface"
app:expandedTitleMarginStart="16dp"
app:expandedTitleTextAppearance="@style/TextAppearance.App.HeadlineMedium"
app:collapsedTitleTextAppearance="@style/TextAppearance.App.TitleMedium">
<ImageView
android:layout_height="match_parent"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5" />
<Toolbar
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</CollapsingToolbarLayout>
</AppBarLayout>
<RecyclerView
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</CoordinatorLayout>
app:layout_collapseMode="parallax" на ImageView — параллакс при сворачивании. "pin" на Toolbar — фиксирует его при полном сворачивании. app:layout_scrollFlags="scroll|exitUntilCollapsed" — AppBar скроллится вместе с контентом до минимальной высоты (Toolbar).
contentScrim — цвет/drawable, который появляется поверх изображения при сворачивании. Плавно анимируется.
Кастомная логика через AppBarLayout.OnOffsetChangedListener:
appBarLayout.addOnOffsetChangedListener { appBar, offset ->
val progress = (-offset).toFloat() / appBar.totalScrollRange.toFloat()
// progress: 0f = развёрнуто, 1f = свёрнуто
avatarView.alpha = 1f - (progress * 2).coerceIn(0f, 1f)
subtitleView.scaleX = 1f - progress * 0.3f
subtitleView.scaleY = subtitleView.scaleX
}
Использование CollapsingToolbarLayout сокращает время разработки в 2 раза по сравнению с кастомной реализацией через NestedScrollConnection.
Jetpack Compose: TopAppBarScrollBehavior
Compose Material3 предоставляет LargeTopAppBar с TopAppBarDefaults.exitUntilCollapsedScrollBehavior():
val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
Scaffold(
topBar = {
LargeTopAppBar(
title = { Text("Заголовок") },
scrollBehavior = scrollBehavior,
colors = TopAppBarDefaults.largeTopAppBarColors(
containerColor = MaterialTheme.colorScheme.surface,
scrolledContainerColor = MaterialTheme.colorScheme.surface,
)
)
},
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection)
) { padding ->
LazyColumn(contentPadding = padding) { ... }
}
Для кастомного collapsing toolbar с изображением (LargeTopAppBar не поддерживает фото в заголовке) — строим через NestedScrollConnection:
val toolbarHeightExpanded = 250.dp
val toolbarHeightCollapsed = 56.dp
val toolbarHeightPx = with(LocalDensity.current) { toolbarHeightExpanded.toPx() }
val toolbarOffset = remember { mutableStateOf(0f) }
val nestedScrollConnection = remember {
object : NestedScrollConnection {
override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
val delta = available.y
val newOffset = toolbarOffset.value + delta
toolbarOffset.value = newOffset.coerceIn(-toolbarHeightPx, 0f)
return Offset.Zero
}
}
}
val progress = (-toolbarOffset.value / toolbarHeightPx).coerceIn(0f, 1f)
val currentHeight = lerp(toolbarHeightExpanded, toolbarHeightCollapsed, progress)
progress — ключевая величина. Через неё управляем alpha изображения, scale заголовка, visibility дополнительных элементов.
iOS: UIScrollViewDelegate + Auto Layout
В UIKit — классика через scrollViewDidScroll:
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let offset = scrollView.contentOffset.y
let maxOffset: CGFloat = 200 // высота развёрнутого header
if offset < 0 {
// Overscroll вниз — растягиваем изображение
headerHeightConstraint.constant = 250 - offset
headerImageView.transform = .identity
} else {
let progress = min(offset / maxOffset, 1.0)
headerHeightConstraint.constant = max(250 - offset, 56)
// Fade out изображения
headerImageView.alpha = 1 - progress
// Title появляется в nav bar
navigationItem.title = progress > 0.9 ? screenTitle : ""
}
// Без layoutIfNeeded в animate — прямое изменение constraint, следующий layout pass подхватит
}
Изменение constraint без анимации прямо в scrollViewDidScroll — правильно, layout pass происходит при следующем CADisplayLink кадре. Вызов layoutIfNeeded() здесь создаст рекурсию.
В SwiftUI — аналогично параллаксу через ScrollView + GeometryReader для отслеживания scroll position и @State для управления высотой header.
Как обеспечить плавность на устройствах с 120 Гц?
Мы синхронизируем анимацию с частотой обновления экрана через CADisplayLink (iOS) и Choreographer / NestedScrollConnection (Android). Это гарантирует, что каждый кадр анимации совпадает с вертикальной синхронизацией, исключая разрывы и рывки. Дополнительно мы используем лёгкие интерполяции на GPU, избегая перерисовки всего слоя.
Сравнение платформ
| Параметр | iOS (UIKit) | Android (CoordinatorLayout) | Android (Compose) | SwiftUI |
|---|---|---|---|---|
| Основной инструмент | scrollViewDidScroll + Auto Layout | CollapsingToolbarLayout + AppBarLayout | NestedScrollConnection | GeometryReader + @State |
| Сложность | Средняя | Низкая (декларативно) | Высокая (кастом) | Средняя |
| Контроль над анимацией | Полный | Ограниченный | Полный | Полный |
| Производительность | Высокая | Высокая | Высокая | Высокая |
Согласно Material Design guidelines, CollapsingToolbarLayout является предпочтительным способом для стандартных сценариев. Для iOS Apple HIG рекомендуют использовать large title или кастомные реализации через UIScrollView.
Процесс работы
- Анализ — изучаем текущий UI и требования к анимации. Определяем целевые устройства и версии ОС. Проверяем совместимость с App Store Review Guidelines (Section 4.2/5.1) и Play Store политиками.
- Проектирование — выбираем подход (стандартный компонент или кастомный), рассчитываем геометрию, parallax-коэффициент, поведение в overscroll. Создаём прототип с реальными данными.
- Реализация — пишем код с учётом платформенных особенностей: code signing, provisioning profile для iOS, ProGuard для Android, push-уведомления, deep linking (Universal Links / App Links). Используем StoreKit 2 и Billing 6 для IAP.
- Тестирование — проверяем на физических устройствах с 120 Hz дисплеями, эмуляторах и симуляторах. Автоматизируем тесты для регрессии.
- Деплой — подготавливаем инструкцию по интеграции, передаём в вашу CI/CD. Обучаем команду.
Что входит в работу
- Готовый компонент collapsing toolbar с анимацией.
- Исходный код с комментариями на Swift/Kotlin.
- Документация по кастомизации (изменение высот, цветов, шрифтов).
- Пример интеграции с Navigation, Deep Linking и In-App Purchases (если требуется).
- Консультация команды внедрения и post-launch поддержка.
Сроки и стоимость
Сроки: от 1 дня (стандартный toolbar на CoordinatorLayout или LargeTopAppBar) до 3 дней (кастомный с параллаксом, несколькими анимируемыми элементами и поддержкой двух платформ). Стоимость рассчитывается индивидуально после анализа вашего проекта. Свяжитесь с нами — мы оценим ваш проект бесплатно и предложим оптимальное решение.
Почему стоит заказать эту услугу у нас?
5+ лет опыта в мобильной разработке, более 50 реализованных проектов с анимацией, сертифицированные инженеры (Apple Certified iOS Developer, Google Associate Android Developer). Гарантируем плавность анимации на всех целевых устройствах, включая 120 Гц. Получите консультацию по вашему проекту уже сегодня.