Создайте эффект прокрутки параллакса

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

Совместимость версий

Для этой реализации требуется, чтобы для minSDK вашего проекта был установлен уровень API 21 или выше.

Зависимости

Создайте эффект параллакса

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

@Composable
fun ParallaxEffect() {
    fun Modifier.parallaxLayoutModifier(scrollState: ScrollState, rate: Int) =
        layout { measurable, constraints ->
            val placeable = measurable.measure(constraints)
            val height = if (rate > 0) scrollState.value / rate else scrollState.value
            layout(placeable.width, placeable.height) {
                placeable.place(0, height)
            }
        }

    val scrollState = rememberScrollState()
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .verticalScroll(scrollState),
    ) {

        Image(
            painterResource(id = R.drawable.cupcake),
            contentDescription = "Android logo",
            contentScale = ContentScale.Fit,
            // Reduce scrolling rate by half.
            modifier = Modifier.parallaxLayoutModifier(scrollState, 2)
        )

        Text(
            text = stringResource(R.string.detail_placeholder),
            modifier = Modifier
                .background(Color.White)
                .padding(horizontal = 8.dp),

        )
    }
}
ParallaxEffect.kt

Ключевые моменты о коде

  • Создает пользовательский модификатор layout для регулировки скорости прокрутки компонуемого элемента.
  • Image прокручивается медленнее, чем Text , создавая эффект параллакса, поскольку два компонуемых объекта перемещаются по вертикали с разной скоростью.

Результаты

Рисунок 1. Прокручиваемый список с эффектом параллакса.

Коллекции, содержащие это руководство

Это руководство является частью тщательно подобранной коллекции быстрых руководств, охватывающих более широкие цели разработки Android:

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

Отображать текст

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

Есть вопросы или отзывы

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