Creare un effetto di scorrimento con parallasse

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),

        )
    }
}
ParallaxEffect.kt

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 al Text, 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:

Mostrare un elenco o una griglia

Elenchi e griglie consentono alla tua app di mostrare le raccolte in un formato piacevole dal punto di vista visivo e facilmente fruibile dagli utenti.

Collezione di guide rapide

Visualizza immagini

Scopri le tecniche per utilizzare immagini brillanti e coinvolgenti per conferire un aspetto accattivante alla tua app per Android.

Collezione di guide rapide

Testo visualizzato

Il testo è un elemento centrale di qualsiasi interfaccia utente. Scopri diversi modi per presentare il testo nella tua app in modo da offrire un'esperienza utente piacevole.

Collezione di guide rapide

Domande o feedback

Visita la nostra pagina delle domande frequenti e scopri le guide rapide o contattaci per farci sapere cosa ne pensi.

Vai alle domande frequenti Lascia un feedback