Lo scorrimento parallasse è una tecnica in cui i contenuti di sfondo e quelli in primo piano scorrono a velocità diverse. Puoi implementare questa tecnica per migliorare l'interfaccia utente della tua app, creando un'esperienza più dinamica man mano che gli utenti scorrono.
Compatibilità delle versioni
Questa implementazione richiede che il valore minSDK del progetto sia impostato sul livello API 21 o superiore.
Dipendenze
Creare un effetto parallasse
Per ottenere l'effetto parallasse, applica una frazione del valore di scorrimento del composable con scorrimento al composable che ha bisogno dell'effetto parallasse. Il seguente snippet prende due elementi visivi nidificati, un'immagine e un blocco di testo, e li fa scorrere 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), ) } }
Punti chiave del codice
- Crea un modificatore
layout
personalizzato per regolare la velocità di scorrimento del componibile. - Il
Image
scorre a una velocità inferiore rispetto alText
, producendo un effetto di parallasse poiché i due composabili si traducono verticalmente a velocità diverse.
Risultati
Raccolte che contengono questa guida
Questa guida fa parte di queste raccolte di guide rapide selezionate che coprono obiettivi di sviluppo Android più ampi:
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=it)
Mostrare un elenco o una griglia
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=it)
Visualizza immagini
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=it)