Aggiungere il supporto per le animazioni predittive per la schiena

Quando utilizzi le API di sistema per il gesto Indietro, puoi attivare le animazioni in-app e supportare le transizioni personalizzate.

Video 1: animazioni del gesto Indietro predittivo

Dopo l'attivazione, l'app mostra le animazioni per il gesto Indietro alla schermata Home, tra le attività e tra le app.

Il video mostra un breve esempio di animazioni del gesto Indietro predittivo tra le attività e alla schermata Home utilizzando l'app Impostazioni di Android.

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

Scopri di più su come aggiungere il supporto per i gesti Indietro predittivi.

Aggiungere transizioni e animazioni in-app personalizzate

Puoi creare animazioni e transizioni di proprietà in-app personalizzate, animazioni tra le attività personalizzate e animazioni tra i fragment personalizzate con i gesti Indietro predittivi.

Aggiungere transizioni personalizzate in Jetpack Compose

Puoi utilizzare PredictiveBackHandler per gestire i gesti Indietro predittivi in Jetpack Compose per la creazione di 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 genera eventi quando l'utente scorre verso sinistra dal bordo. Questi eventi forniscono informazioni sulla posizione del tocco dell'utente, sul bordo di scorrimento e, soprattutto, sul progress, che può essere utilizzato per animare i componenti come parte della gestione del gesto Indietro.

Il seguente snippet mostra un esempio di utilizzo di PredictiveBackHandler per animare una Surface che si riduce e si allontana 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 { IntOffset(x = xOffset.dp.roundToPx(), y = 0) },
            color = Color.Blue
        ) {}
    }
}