Creare un effetto di scorrimento con parallasse

Lo scorrimento parallasse è una tecnica in cui i contenuti di sfondo e di primo piano scorrono a velocità diverse. Puoi implementare questa tecnica per migliorare l'interfaccia utente della tua app, creando un'esperienza più dinamica mentre gli utenti scorrono i contenuti.

Risultati

Figura 1. Un elenco scorrevole con un effetto parallasse.

Compatibilità con le versioni

Questa implementazione richiede che il minSDK del progetto sia impostato sul livello API 21 o superiore.

Dipendenze

Creare un effetto parallasse

Per ottenere l'effetto parallasse, devi applicare una frazione del valore di scorrimento del composable di scorrimento al composable che richiede l'effetto parallasse. Il seguente snippet prende due elementi visivi nidificati, un'immagine e un blocco di testo, e li scorre nella stessa direzione a velocità diverse:

@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

Punti chiave sul codice

  • Crea un modificatore layout personalizzato per regolare la velocità di scorrimento del composable.
  • L'elemento Image scorre a una velocità inferiore rispetto all'elemento Text, producendo un effetto parallasse quando i due composable si spostano verticalmente a velocità diverse.

Raccolte che contengono questa guida

Questa guida fa parte di queste raccolte di guide rapide curate che riguardano obiettivi di sviluppo Android più ampi:

Gli elenchi e le griglie consentono alla tua app di mostrare le raccolte in un formato visivamente accattivante e facile da consultare per gli utenti.
Raccolta di guide rapide
Scopri le tecniche per utilizzare immagini luminose e coinvolgenti per dare alla tua app per Android un aspetto accattivante.
Raccolta di guide rapide

Testo visualizzato

Il testo è un elemento centrale di qualsiasi UI. Scopri i diversi modi in cui puoi presentare il testo nella tua app per offrire un'esperienza utente piacevole.
Raccolta di guide rapide

Hai domande o commenti

Visita la nostra pagina delle domande frequenti e scopri le guide rapide oppure contattaci per comunicarci la tua opinione.
Vai alle Domande frequenti Lascia un feedback