Aggiungere il supporto per le animazioni predittive per la schiena

Quando utilizzi le API di navigazione indietro del sistema, puoi attivare la ricezione di animazioni in-app e supportare le transizioni personalizzate.

Dopo l'attivazione, l'app mostra le animazioni per il ritorno alla schermata Home, il passaggio da un'attività all'altra e il multitasking.

Il video mostra un breve esempio di animazioni per il gesto Indietro predittivo per il passaggio da un'attività all'altra e il ritorno alla schermata Home utilizzando l'app Impostazioni di Android.

1. Nell'animazione, l'utente scorre indietro per tornare alla schermata delle impostazioni precedente, un esempio di animazione tra attività.
2. Ora, nella schermata precedente, l'utente inizia a scorrere indietro una seconda volta, mostrando un'anteprima della schermata Home con lo sfondo, un esempio dell'animazione di ritorno alla schermata Home.
3. L'utente continua a scorrere verso destra, mostrando un'animazione della finestra che si riduce all'icona nella schermata Home.
4. L'utente è tornato alla schermata Home.

Scopri di più su come aggiungere il supporto per i gesti di navigazione predittiva.

Aggiungere transizioni e animazioni in-app personalizzate

Puoi creare animazioni e transizioni personalizzate delle proprietà in-app, animazioni personalizzate tra attività e animazioni personalizzate tra frammenti con gesti di indietro predittivi.

Aggiungere transizioni personalizzate in Jetpack Compose

Puoi utilizzare PredictiveBackHandler per gestire i gesti di indietro predittivi in Jetpack Compose per creare transizioni in-app personalizzate. Questa funzionalità è disponibile in androidx.activity:activity-compose:1.8.0-alpha01 o versioni successive.

PredictiveBackHandler fornisce una lambda di callback che espone un Flow<BackEventCompat> che emette eventi quando l'utente scorre indietro dal bordo. Questi eventi forniscono informazioni sulla posizione del tocco dell'utente, sul bordo dello scorrimento e, cosa più importante, progress, che possono essere utilizzate per animare i componenti come parte della gestione del gesto Indietro.

Il seguente snippet mostra un esempio di utilizzo di PredictiveBackHandler per animare la riduzione e l'allontanamento di un Surface con l'avanzamento del gesto:

@Composable
fun DetailScreen(onBack: () -> Unit) {
    var scale by remember { mutableFloatStateOf(1f) }
    var xOffset by remember { mutableFloatStateOf(0f) }
    val scope = rememberCoroutineScope()

    PredictiveBackHandler { progressFlow ->
        try {
            progressFlow.collectLatest { backEvent ->
                scale = 1f - backEvent.progress
                xOffset = backEvent.progress * 100f
            }
            // User completed gesture
            onBack()
        } catch (e: CancellationException) {
            // User cancelled gesture
            // Animate scale and xOffset back to 1f and 0f respectively
            scope.launch {
                animate(scale, 1f) { value, _ -> scale = value }
            }
            scope.launch {
                animate(xOffset, 0f) { value, _ -> xOffset = value }
            }
        }
    }
    Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Surface(
            modifier = Modifier
                .size(200.dp)
                .scale(scale)
                .offset(x = xOffset.dp, y = 0.dp),
            color = Color.Blue
        ) {}
    }
}