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

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

Результаты

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

Для данной реализации требуется, чтобы в вашем проекте был установлен уровень 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 , создавая эффект параллакса, поскольку два элемента, являющиеся составными частями, перемещаются по вертикали с разной скоростью.

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

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

Отобразить список или сетку

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

Краткий справочник

Отображение изображений

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

Краткий справочник

Отобразить текст

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

Краткий справочник

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

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

Перейти к разделу часто задаваемых вопросов Оставить отзыв