Crea un efecto de desplazamiento de paralaje

El desplazamiento de paralaje es una técnica en la que el contenido de fondo y el contenido de primer plano se desplazan a diferentes velocidades. Puedes implementar esta técnica para mejorar la IU de tu app y crear una experiencia más dinámica a medida que los usuarios se desplazan.

Resultados

Figura 1: Una lista de desplazamiento con un efecto de paralaje.

Compatibilidad de versiones

Esta implementación requiere que el minSDK de tu proyecto se establezca en el nivel de API 21 o superior.

Dependencias

Crea un efecto de paralaje

Para lograr el efecto de paralaje, debes aplicar una fracción del valor de desplazamiento del elemento componible de desplazamiento al elemento componible que necesita el efecto de paralaje. El siguiente fragmento toma dos elementos visuales anidados (una imagen y un bloque de texto) y los desplaza en la misma dirección a diferentes velocidades:

@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

Puntos clave sobre el código

  • Crea un modificador layout personalizado para ajustar la velocidad con la que se desplaza el elemento componible.
  • El elemento Image se desplaza a una velocidad más lenta que el elemento Text, lo que produce un efecto de paralaje a medida que los dos elementos componibles se desplazan verticalmente a diferentes velocidades.

Colecciones que contienen esta guía

Esta guía forma parte de las colecciones seleccionadas de Guías rápidas que abarcan objetivos más amplios de desarrollo para Android:

Las listas y las cuadrículas permiten que tu app muestre colecciones de una forma visualmente atractiva y fácil de usar para los usuarios.
Colección de guías rápidas
Descubre técnicas para usar imágenes atractivas y brillantes que le den a tu app para Android un aspecto atractivo.
Colección de guías rápidas

Texto visible

El texto es una pieza central de cualquier IU. Descubre diferentes formas de presentar texto en tu app para brindar una experiencia del usuario agradable.
Colección de guías rápidas

¿Tienes preguntas o comentarios?

Visita nuestra página de preguntas frecuentes y consulta las guías rápidas, o bien comunícate con nosotros y comparte tu opinión.
Ir a las preguntas frecuentes Enviar comentarios