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 transizioni personalizzate.

Video 1: Animazioni Indietro predittivo

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

Il video mostra un breve esempio di animazioni per il gesto Indietro predittivo per passare da un'attività all'altra e tornare 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 Indietro predittivi.

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 utilizzando Compose o Views. Per scoprire come creare transizioni utilizzando Views, consulta Aggiungere il supporto per le animazioni di indietro predittive in Views.

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 genera eventi quando l'utente scorre indietro dal bordo. Questi eventi forniscono informazioni sulla posizione del tocco dell'utente, sul bordo dello scorrimento e, soprattutto, su progress, che può essere utilizzato per animare i componenti in modo che scompaiano durante la 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 { IntOffset(x = xOffset.dp.roundToPx(), y = 0) },
            color = Color.Blue
        ) {}
    }
}