Criar um efeito de rolagem de paralaxe

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

Resultados

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

Compatibilidade de versões

Essa implementação exige que o minSDK do projeto seja definido como nível da API 21 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 combinável.
  • O Image rola em uma taxa mais lenta do que o Text, produzindo um efeito de paralaxe à medida que os dois elementos combináveis são transladados verticalmente em taxas diferentes.

Coleções que contêm este guia

Este guia faz parte das coleções de guias rápidos selecionados que abrangem objetivos mais amplos de desenvolvimento para Android:

Com listas e grades, seu app pode mostrar coleções de uma forma visualmente agradável e fácil de consumir para os usuários.
Coleção de guias rápidos
Descubra técnicas para usar recursos visuais vibrantes e envolventes para dar ao seu app Android uma aparência incrível.
Coleção de guias rápidos

Texto de exibição

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

Tem dúvidas ou quer dar feedback?

Acesse nossa página de perguntas frequentes e confira guias rápidos ou entre em contato para compartilhar sua opinião.
Acessar as perguntas frequentes Enviar feedback