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 en 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.

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, aplicas una fracción del valor de desplazamiento del elemento componible desplazable al elemento componible que necesita el efecto de paralaje. En el siguiente fragmento, se toman dos elementos visuales anidados (una imagen y un bloque de texto) y se desplazan 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 a la que se desplaza el elemento componible.
  • El Image se desplaza a una velocidad más lenta que el Text, lo que produce un efecto de paralaje a medida que los dos elementos componibles se traducen verticalmente a diferentes velocidades.

Resultados

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

Colecciones que contienen esta guía

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

Las listas y las cuadrículas permiten que tu app muestre colecciones de una forma visualmente atractiva y fácil de consumir 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 las diferentes formas en que puedes presentar texto en tu app para proporcionar una experiencia del usuario encantadora.
Colección de guías rápidas

Tienes preguntas o comentarios

Ve a nuestra página de preguntas frecuentes para obtener información sobre las guías rápidas o comunícate con nosotros para contarnos tu opinión.
Ir a las Preguntas frecuentes Enviar comentarios