Configurare Indietro predittivo

Il gesto Indietro predittivo e le animazioni di sistema sono attivati per impostazione predefinita. Se la tua app intercetta l'evento Indietro e non hai eseguito la migrazione alla navigazione predittiva, aggiorna l'app per utilizzare le API di navigazione Indietro supportate.

L'animazione predittiva per tornare alla home page.
L'animazione predittiva cross-activity.
L'animazione predittiva tra le attività.

Attivare le animazioni di sistema predefinite

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

  • Torna alla schermata Home: riporta l'utente alla schermata Home.
  • Tra attività: transizioni tra le 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 attivarle tramite le Opzioni sviluppatore.

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

Attivare Indietro predittivo con Navigation Compose

Per utilizzare la navigazione predittiva in Navigation Compose, assicurati di utilizzare la libreria navigation-compose 2.8.0 o versioni successive.

La composizione della navigazione esegue automaticamente la dissolvenza incrociata tra le schermate quando l'utente scorri indietro:

Figura 2. L'animazione di dissolvenza incrociata predefinita in-app in SociaLite.

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

In questo esempio, scaleOut viene utilizzato all'interno di popExitTransition per ridurre la schermata di uscita mentre l'utente torna indietro. Inoltre, il parametro transformOrigin determina il punto intorno al quale si verifica l'animazione di ridimensionamento. Per impostazione predefinita, è il centro dello schermo (0.5f, 0.5f). Puoi modificare questo valore per fare in modo che il ridimensionamento 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:

Figura 3. Un'animazione in-app personalizzata in SociaLite.

popEnterTransition e popExitTransition controllano in modo specifico le animazioni quando si esce dallo stack precedente, ad esempio con un gesto indietro. Puoi anche utilizzare enterTransition e exitTransition per definire le animazioni per l'inserimento e l'uscita dei composable 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 ripristino dello stack precedente. Tuttavia, l'utilizzo di popEnterTransition e popExitTransition ti consente di creare animazioni distinte per la navigazione indietro.

Eseguire l'integrazione con le transizioni degli elementi condivisi

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

Figura 4. Transizione degli elementi condivisi con Indietro predittivo in Navigation Compose.

Per utilizzare gli elementi condivisi con Navigation Compose, vedi Predictive Back con elementi condivisi.

Supportare Indietro predittivo con i componenti Material Compose

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

I componenti Material che supportano le animazioni predittive per Indietro includono:

SearchBar e ModalBottomSheet vengono animate automaticamente con i gesti Indietro predittivi. ModalNavigationDrawer, ModalDrawerSheet, DismissibleDrawerSheet e DismissibleNavigationDrawer richiedono di superare drawerState per i rispettivi composable dei contenuti del foglio.

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 predittive per Indietro.
  3. Avvia l'app aggiornata e usa il gesto Indietro per vederla in azione.

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

Risorse aggiuntive

Indietro
Informazioni sul gesto Indietro predittivo
Avanti
Monitorare manualmente l'avanzamento dell'accesso