Indietro predittivo in Scrittura

Indietro predittivo, una funzionalità di navigazione con gesti, consente agli utenti di visualizzare l'anteprima della destinazione del gesto scorrimento indietro. Il pulsante Indietro predittivo si integra perfettamente con Scrivi per migliorare l'esperienza di navigazione della tua app. Gli utenti possono usufruire di transizioni più fluide e intuitive quando tornano indietro all'interno dell'app. La Figura 1 mostra come funziona nell'app di esempio SociaLite.

Questa guida descrive come eseguire le seguenti operazioni con il ritorno previsto:

• Attivare il gesto Indietro predittivo
• Attivare le animazioni di sistema predefinite
• Attivare il gesto Indietro predittivo con Composizione navigazione
• Integrazione con le transizioni degli elementi condivisi
• Supporto del backup predittivo con i componenti Material Compose
• Accedere manualmente all'avanzamento con PredictiveBackHandler
• Testare l'animazione del gesto Indietro predittivo

Attivare il gesto Indietro predittivo

Per attivare le animazioni Indietro predittive, devi attivare il supporto del gesto Indietro predittivo. Per attivare questa funzionalità, aggiungi android:enableOnBackInvokedCallback="true" al tag <application> o ai singoli tag <activity> all'interno del file AndroidManifest.xml.

Attivare le animazioni di sistema predefinite

Le animazioni di sistema per il ritorno alla schermata Home, il passaggio da un'attività all'altra e il passaggio da un'attività all'altra sono disponibili su Android 15 e versioni successive per le app che hanno eseguito la migrazione alle API di gestione del pulsante Indietro supportate.

• Torna alla home page: consente all'utente di tornare alla schermata Home.
• Tra attività: transizioni tra attività all'interno dell'app.
• Tra attività: transizioni tra attività.

Queste animazioni sono attivate per impostazione predefinita su Android 15 e versioni successive. Sui dispositivi con Android 13 o 14, gli utenti possono attivarli tramite le Opzioni per sviluppatori.

Per ottenere le animazioni di sistema, aggiorna la dipendenza Activity AndroidX a 1.6.0 o versioni successive.

Attivare il gesto Indietro predittivo con Composizione navigazione

Per utilizzare il pulsante Indietro predittivo in Componi navigazione, assicurati di utilizzare la libreria navigation-compose 2.8.0 o versioni successive.

La funzionalità di navigazione Componi applica automaticamente transizioni tra le schermate quando l'utente scorra verso il retro:

Durante la navigazione, puoi creare transizioni personalizzate con popEnterTransition e popExitTransition. Se applicati al NavHost, questi modificatori ti consentono di definire l'animazione delle schermate di accesso e di uscita. Puoi utilizzarli per creare una serie di effetti, come la scalabilità, la dissolvenza o lo scorrimento.

In questo esempio, scaleOut viene utilizzato all'interno di popExitTransition per ridurre la dimensione della schermata di uscita quando l'utente torna indietro. Inoltre, il parametro transformOrigin determina il punto intorno al quale avviene l'animazione di ridimensionamento. Per impostazione predefinita, è il centro dello schermo (0.5f, 0.5f). Puoi modificare questo valore per fare in modo che la scalatura abbia origine da un punto diverso.

NavHost(
    navController = navController,
    startDestination = Home,
    popExitTransition = {
        scaleOut(
            targetScale = 0.9f,
            transformOrigin = TransformOrigin(pivotFractionX = 0.5f, pivotFractionY = 0.5f)
        )
    },
    popEnterTransition = {
        EnterTransition.None
    },
    modifier = modifier,
)
PredictiveBackSnippets.kt

Questo codice produce il seguente risultato:

popEnterTransition e popExitTransition controllano in modo specifico le animazioni quando viene visualizzata la pila precedente, ad esempio con un gesto Indietro. Puoi anche utilizzare enterTransition e exitTransition per definire le animazioni per l'ingresso e l'uscita dai composabili in generale, non solo per il pulsante Indietro predittivo. Se imposti solo enterTransition e exitTransition, questi vengono utilizzati sia per la navigazione normale sia per il popping della pila di navigazione a ritroso. Tuttavia, l'utilizzo di popEnterTransition e popExitTransition ti consente di creare animazioni distinte per la navigazione a ritroso.

Integrazione con le transizioni degli elementi condivisi

Le transizioni degli elementi condivisi forniscono una connessione visiva fluida tra gli elementi composibili con contenuti condivisi, spesso utilizzati per la navigazione.

Per utilizzare gli elementi condivisi con la funzionalità di composizione di navigazione, consulta Torna indietro con elementi condivisi.

Supporto del backup predittivo con i componenti Material Compose

Molti componenti della libreria Material Compose sono progettati per funzionare senza problemi con i gesti di ritorno predittivi. Per attivare le animazioni di ritorno predittive in questi componenti, includi la dipendenza Material3 più recente (androidx.compose.material3:material3-*:1.3.0 o successive) nel tuo progetto.

I componenti Material che supportano le animazioni Indietro predittive includono:

• SearchBar
• ModalBottomSheet
• ModalDrawerSheet/DismissibleDrawerSheet
• ModalNavigationDrawer/DismissibleNavigationDrawer

SearchBar e ModalBottomSheet si animano automaticamente con gesti di Indietro predittivi. ModalNavigationDrawer, ModalDrawerSheet, DismissibleDrawerSheet e DismissibleNavigationDrawer richiedono di passare drawerState ai rispettivi composabili dei contenuti del foglio.

Accedere manualmente ai progressi con PredictiveBackHandler

Il composable PredictiveBackHandler[5] in Jetpack Compose ti consente di intercettare il gesto Indietro e accedere al relativo avanzamento. Puoi reagire al gesto di scorrimento indietro dell'utente in tempo reale, creando animazioni o comportamenti personalizzati in base alla distanza dello scorrimento.

Per utilizzare PredictiveBackHandler, assicurati di utilizzare androidx.activity:activity:1.6.0 o versioni successive.

PredictiveBackHandler fornisce un Flow<BackEventCompat> che emette eventi rappresentanti l'avanzamento del gesto Indietro. Ogni evento contiene informazioni come:

• progress: un valore float compreso tra 0 e 1 che indica l'avanzamento del gesto di riavvolgimento (0 = gesto avviato, 1 = gesto completato).
• touchX e touchY: le coordinate X e Y dell'evento tocco.

Il seguente snippet mostra l'utilizzo di base di PredictiveBackHandler:

PredictiveBackHandler(true) { progress: Flow<BackEventCompat> ->
    // code for gesture back started
    try {
        progress.collect { backEvent ->
            // code for progress
            boxScale = 1F - (1F * backEvent.progress)
        }
        // code for completion
        boxScale = 0F
    } catch (e: CancellationException) {
        // code for cancellation
        boxScale = 1F
    }
}
PredictiveBackSnippets.kt

Esempio: integrazione con un riquadro di navigazione a scomparsa

Questo esempio mostra come implementare un'animazione in-app personalizzata utilizzando PredictiveBackHandler per creare un'interazione fluida con un riquadro di navigazione in risposta ai gesti di ritorno in JetLagged:

In questo esempio, PredictiveBackHandler viene utilizzato per:

• Monitora l'avanzamento del gesto Indietro.
• Aggiorna il translationX del riquadro in base all'avanzamento del gesto.
• Usa un velocityTracker per aprire o chiudere dolcemente il riquadro in base alla velocità del gesto quando il gesto viene completato o annullato.

Testare l'animazione del gesto Indietro predittivo

Se utilizzi ancora Android 13 o Android 14, puoi testare l'animazione di ritorno alla schermata Home.

Per testare questa animazione, segui questi passaggi:

1. Sul dispositivo, vai a Impostazioni > Sistema > Opzioni sviluppatore.
2. Seleziona Animazioni Indietro predittive.
3. Avvia l'app aggiornata e usa il gesto Indietro per vederla in azione.

Su Android 15 e versioni successive, questa funzionalità è attiva per impostazione predefinita.

Risorse aggiuntive

• Codelab per aggiungere animazioni Indietro predittive
• Animazioni di layout avanzate in Compose video