Criar um efeito de rolagem de paralaxe

A rolagem de paralaxe é uma técnica em que o conteúdo de primeiro e segundo plano rolam em velocidades diferentes. É possível implementar essa técnica para aprimorar a interface do app, criando uma experiência mais dinâmica à medida que os usuários rolam a tela.

Compatibilidade de versões

Essa implementação exige que o minSDK do projeto seja definido como nível 21 da API ou mais recente.

Dependências

Criar um efeito de paralaxe

Para conseguir o efeito de paralaxe, aplique uma fração do valor de rolagem do elemento combinável de rolagem ao elemento combinável que precisa do efeito de paralaxe. O snippet a seguir usa dois elementos visuais aninhados (uma imagem e um bloco de texto) e os rola na mesma direção em velocidades diferentes:

@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

Pontos principais sobre o código

  • Cria um modificador layout personalizado para ajustar a taxa de rolagem do elemento combinável.
  • O Image rola com uma taxa mais lenta do que o Text, produzindo um efeito de paralaxe à medida que os dois elementos combináveis são traduzidos verticalmente em taxas diferentes.

Resultados

Figura 1. Uma lista de rolagem com um efeito de paralaxe.

Coleções que contêm este guia

Este guia faz parte destas coleções selecionadas de guias rápidos que abrangem metas mais amplas de desenvolvimento para Android:

As listas e as grades permitem que o app exiba coleções de uma forma agradável e fácil de consumir.
Coletânea de guias rápidos
Descubra técnicas para usar recursos visuais vibrantes e envolventes e dar ao seu app Android uma aparência bonita.
Coletânea de guias rápidos

Texto de exibição

O texto é uma peça central de qualquer interface. Descubra maneiras diferentes de apresentar texto no app para oferecer uma experiência agradável ao usuário.
Coletânea de guias rápidos

Tem dúvidas ou feedback?

Acesse a página de perguntas frequentes e saiba mais sobre os guias rápidos ou entre em contato e conte o que você pensa.
Acessar as perguntas frequentes Enviar feedback