Aggiorna l'app per supportare il gesto Indietro predittivo futuro

1. Introduzione

In Android 13, abbiamo aggiunto API che fungono da base per il futuro supporto di un gesto Indietro predittivo.

Questa funzionalità consente a un utente di visualizzare l'anteprima del risultato di un gesto Indietro prima di completarlo, consentendogli di decidere se rimanere nella visualizzazione corrente o completare l'azione e tornare alla schermata Home, a un'attività precedente o a una pagina visitata in precedenza in una WebView. Ecco un esempio di come apparirà:

$Questa animazione mostra un'approssimazione di una futura implementazione\n di come appare per un utente aprire il browser Chrome,\n visualizzare il browser Chrome su un dispositivo mobile Android, quindi scorrere\n indietro per vedere la schermata Home come destinazione successiva visualizzata\n dietro.$

Nel caso di questo codelab, correggeremo un frammento di sondaggio che implementa una WebView.

Obiettivo di questo codelab

Questo codelab mostra come preparare un'app AndroidX che intercetta il pulsante Indietro del sistema eseguendo la migrazione per supportare il gesto Indietro predittivo con una WebView, utilizzando le API che implementano il modello di navigazione Indietro ahead-of-time. In altre parole, affinché le nuove animazioni funzionino, il sistema deve sapere in anticipo se l'app intercetta il gesto di navigazione indietro.

Cosa creerai

In questo codelab, utilizzerai le librerie API AndroidX per gestire i gesti Indietro nell'app Sunflower.

Obiettivi didattici

Come intercettare la chiamata di ritorno per AndroidX
Come restituire l'evento Indietro al sistema
Altre opzioni per la gestione dei gesti Indietro
La nuova esperienza utente disponibile in Android 13 e versioni successive, che offre una navigazione più predittiva con il gesto Indietro

Che cosa ti serve

Android Studio
Un dispositivo Android con la navigazione tramite gesti attivata
(Facoltativo) Git

2. Pianificare il supporto per il gesto Indietro predittivo

Utilizza le API AndroidX per implementare questa funzionalità

Questo codelab è progettato per le app che utilizzano già AndroidX.

Implementerai OnBackPressedDispatcher e OnBackPressedCallback per supportare la navigazione indietro.

Altre opzioni

Abbiamo altre opzioni per gestire questa funzionalità, a seconda delle diverse esigenze della tua app:

Per le app che non possono utilizzare AndroidX: se rientri in questa categoria, non preoccuparti. Utilizza le nuove classi della piattaforma OnBackInvokedDispatcher e OnBackInvokedCallback che stiamo introducendo in Android 13, che ti consentono di utilizzare le API ahead-of-time senza richiedere AndroidX. Per ulteriori dettagli, consulta la documentazione.
Per le app temporaneamente impossibilitate a eseguire la migrazione: se rientri in questa categoria, non preoccuparti. Puoi disattivare la gesture Indietro predittiva se al momento non è possibile eseguire la migrazione alle librerie AndroidX o alle API della piattaforma. Per ulteriori dettagli, consulta la documentazione.

3. Prima di iniziare

Installare Android Studio

Installa Android Studio e l'SDK Android 13.

Ottenere un dispositivo

Puoi utilizzare un dispositivo Android virtuale o fisico per eseguire l'app che crei utilizzando questo codelab.

Se esegui una nuova istanza dell'emulatore con il livello API 29, la navigazione tramite gesti potrebbe non essere attivata per impostazione predefinita. Per attivare la navigazione tramite gesti, seleziona Impostazioni di sistema > Sistema > Navigazione del sistema > Navigazione tramite gesti.

Ottieni il codice

Ottieni il codice in uno dei seguenti modi:

Scarica il file ZIP

Download tramite Git

Se preferisci scaricare il codice utilizzando Git, segui questi passaggi:

Installa Git.
Clona il ramo starter-code o main per ottenere l'app per questo esercizio:

Terminal

// Get starter app.
git clone --branch starter-code \
https://github.com/android/codelab-handling-back-navigation.git

Esegui l'app

Completa i seguenti passaggi:

Apri e crea l'app in Android Studio.
Crea un nuovo dispositivo virtuale e seleziona Tiramisu. In alternativa, puoi connettere un dispositivo fisico che esegue il livello API 33 o versioni successive.
Esegui l'app Sunflower.

Successivamente, stabilirai una base di riferimento e analizzerai un'esperienza negativa che fa parte dell'app Sunflower.

4. Stabilire una base di riferimento

Il nostro punto di partenza è l'app Sunflower, che include un sondaggio presentato in una WebView che gestisce male i gesti Indietro. Quando un utente scorre dal bordo sinistro o destro per tornare indietro nella WebView, l'app lo riporta a un frammento precedente anziché alla pagina precedente, facendogli perdere tutti i dati non inviati.

Esplora la demo

A partire dalla schermata principale, esaminiamo il flusso di lavoro principale della tua app per analizzare l'esperienza negativa con la funzionalità WebView.

Nella schermata predefinita dell'app Sunflower, tocca ELENCO PIANTE.

Nel catalogo delle piante, tocca una pianta. In questo esempio, utilizzeremo il frutto dell'avocado.

Nella schermata delle informazioni della pianta che hai toccato, tocca l'icona Mi piace (nell'angolo in alto a destra) per valutare la pianta.

Inizia a compilare il sondaggio, ma fermati alla domanda n. 3.

Scorri verso l'interno dal bordo sinistro (o destro) dello schermo per usare il gesto Indietro. Tieni presente che, anziché portarti alla domanda n. 2 del sondaggio, se scorri indietro, viene visualizzato il frammento dei dettagli della pianta (in questo esempio, la pagina delle informazioni sull'avocado). In questo modo, le risposte vengono perse e l'esperienza utente risulta scadente.

Iniziamo subito a risolvere questi problemi.

5. Attivare il gesto Indietro predittivo

La nostra app utilizza già AndroidX, quindi utilizzerai le API di navigazione Indietro. Questi supportano già il modello ahead-of-time.

Target Android 13

Nel progetto Studio della nostra app, aggiorna la configurazione di build dell'app in modo che abbia come target Android 13, come mostrato nello snippet di codice seguente.

build.gradle (progetto)

buildscript {
   ext {
       // Sdk and tools
       minSdkVersion = 29
       compileSdkVersion = 33
       targetSdkVersion = 33
   }
...
}

Esegui l'upgrade delle dipendenze

In build.gradle, imposta appCompatVersion su 1.6.0 o versioni successive.

build.gradle (progetto)

buildscript {
   ext {

    // App dependencies
    appCompatVersion = '1.6.0-rc01' // Built original with changes

...
}

Esegui l'upgrade ad AndroidX Activity 1.6.0 o versioni successive.

build.gradle (modulo)

dependencies {
    implementation "androidx.activity:activity-ktx:1.6.0"
    ...
}

Attivare il gesto Indietro predittivo

Per attivare le API del gesto Indietro predittivo, imposta enableOnBackInvokedCallback su true nel manifest.

AndroidManifest.xml

<application
   ...
   android:enableOnBackInvokedCallback="true" // Enables this feature.
   ... >
...
</application>

Dichiarare e registrare OnBackPressedCallback per gestire i gesti Indietro

Crea il callback e sostituisci il metodo handleOnBackPressed per gestire i gesti Indietro. Per il caso d'uso di WebView, utilizziamo il gesto Indietro per tornare indietro nello stack di pagine finché non ce ne sono più.

SurveyFragment.kt

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
...
  val onBackPressedCallback = object: OnBackPressedCallback(true) {
    override fun handleOnBackPressed() {
      when {
        webView.canGoBack() -> webView.goBack()
      }
    }
  }
  requireActivity().onBackPressedDispatcher
    .addCallback(onBackPressedCallback)
}

Provare ciò che hai creato

Ora verificherai che la navigazione WebView funzioni correttamente.

In Android Studio, compila ed esegui di nuovo l'app.
Come hai fatto quando hai eseguito la demo per la prima volta, tocca una pianta a tua scelta, poi tocca l'icona Mi piace e compila il sondaggio fino alla domanda n. 3.
Scorri verso l'interno dal bordo sinistro (o destro) dello schermo per usare il gesto Indietro. La WebView dovrebbe riportarti alla domanda n. 2 del sondaggio.

Questo è esattamente il comportamento che vogliamo. Tuttavia, siamo solo a metà strada: il problema non è ancora completamente risolto. Continuiamo a vedere cosa intendiamo:

Dalla domanda n. 2, scorri indietro fino alla domanda n. 1, quindi scorri indietro un'altra volta per tornare al frammento dei dettagli della pianta.

Tieni presente che non puoi tornare dalla domanda n. 1 al frammento dei dettagli della pianta. I motivi sono i seguenti:

WebView gestisce la navigazione Indietro evitando di uscire da WebView quando si utilizza la navigazione Indietro.
La tua app deve restituire la navigazione Indietro al sistema quando non ne ha più bisogno. Passiamo alla sezione successiva per risolvere il problema.

6. Correggere il gesto Indietro

Nel passaggio precedente, la nostra app ha intercettato il gesto Indietro senza restituirlo al frammento dei dettagli della pianta nei passaggi precedenti. Di conseguenza, i nostri utenti non possono uscire dall'app e rimangono bloccati in WebView con un'esperienza utente scadente.

Esegui l'override del metodo doUpdateVisitedHistory per determinare se la navigazione indietro deve essere intercettata. La logica per gestire la navigazione Indietro è la seguente:
- Se ci sono altre pagine a cui tornare in WebView (webView.canGoBack()), il metodo OnBackPressedCallback deve essere attivato.
- Al contrario, se non ci sono altre pagine a cui tornare nella WebView, il metodo OnBackPressedCallback deve essere disattivato. Di conseguenza, il gesto Indietro tornerà al fragment in primo piano nello stack indietro.

SurveyFragment.kt

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
  ...
  requireActivity().onBackPressedDispatcher
    .addCallback(onBackPressedCallback)

  disableOnBackPressedCallback(webView, onBackPressedCallback)
  }
}

private fun disableOnBackPressedCallback(webView: WebView, onBackPressedCallback: OnBackPressedCallback) {
  webView.webViewClient = object: WebViewClient() {
    override fun doUpdateVisitedHistory(view: WebView?, url: String?, isReload: Boolean) {
      // Disable the on-back press callback if there are no more questions in the
      // WebView to go back to, allowing us to exit the WebView and go back to
      // the fragment.
      onBackPressedCallback.isEnabled = webView.canGoBack()

    }
  }
}

Per testare di nuovo la WebView, compila di nuovo il sondaggio fino alla domanda n. 3.
Utilizzando i gesti Indietro, torna alla visualizzazione dei dettagli della pianta. Dovresti riuscire a farlo senza problemi.

Ecco un esempio di come dovrebbe apparire il tutto dopo la correzione:

Visualizzare l'anteprima della nuova animazione del gesto per tornare alla schermata Home

Nelle prossime versioni di Android, inizierai a utilizzare il gesto di Indietro predittivo, come mostrato nell'animazione seguente. Ti consigliamo vivamente di iniziare a implementare queste modifiche il prima possibile.

Puoi visualizzare l'anteprima della nuova navigazione con il gesto Indietro alla home page attivando l'opzione sviluppatore.

7. Complimenti

Complimenti! Hai trattato molti contenuti. Ci auguriamo che tu abbia acquisito una migliore comprensione delle opzioni e delle API per iniziare ad aggiornare la tua app in modo da supportare il gesto Indietro predittivo offerto in Android.

Argomenti trattati

Come consentire all'app di iniziare a utilizzare le API che supportano il gesto Indietro predittivo
Come intercettare la chiamata di ritorno per AndroidX
Come ripristinare la navigazione Indietro nel sistema
Altre opzioni per gestire i gesti Indietro
La nuova esperienza UX in arrivo su Android 13, che offre un gesto Indietro più predittivo

Codelab completato

// Get completed app.
git clone --branch main \
https://github.com/android/codelab-handling-back-navigation.git

Materiale aggiuntivo

Guida per gli sviluppatori

Aggiorna l'app per supportare il gesto Indietro predittivo futuro

1. Introduzione

Obiettivo di questo codelab

Cosa creerai

Obiettivi didattici

Che cosa ti serve

2. Pianificare il supporto per il gesto Indietro predittivo

Utilizza le API AndroidX per implementare questa funzionalità

Altre opzioni

3. Prima di iniziare

Installare Android Studio

Ottenere un dispositivo

Attivare la navigazione tramite gesti

Ottieni il codice

Scarica il file ZIP

Download tramite Git

Esegui l'app

4. Stabilire una base di riferimento

Esplora la demo

5. Attivare il gesto Indietro predittivo

Target Android 13

Esegui l'upgrade delle dipendenze

Attivare il gesto Indietro predittivo

Dichiarare e registrare OnBackPressedCallback per gestire i gesti Indietro

Provare ciò che hai creato

6. Correggere il gesto Indietro

Attivare o disattivare la navigazione indietro con OnBackPressedCallback

Visualizzare l'anteprima della nuova animazione del gesto per tornare alla schermata Home

7. Complimenti

Argomenti trattati

Codelab completato

Materiale aggiuntivo

Documenti di riferimento