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 del 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 un 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.$

In questo codelab, correggeremo un frammento di sondaggio che implementa un WebView.

Obiettivo di questo codelab

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

Che cosa creerai

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

Obiettivi didattici

Come intercettare la chiamata on-back per AndroidX
Come restituire l'evento Indietro al sistema
Altre opzioni per la gestione dei gesti Indietro
La nuova esperienza utente in arrivo su Android 13 e versioni successive che offre una navigazione con gesto Indietro predittivo più predittiva

Che cosa ti serve

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

2. Pianificare il supporto del gesto Indietro predittivo

Utilizzare 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 a ritroso.

Altre opzioni

Abbiamo altre opzioni per la gestione di 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 di piattaforma OnBackInvokedDispatcher e OnBackInvokedCallback che stiamo introducendo in Android 13, che ti consentono di utilizzare le API anticipate senza richiedere AndroidX. Per maggiori dettagli, consulta la documentazione.
Per le app che non possono eseguire la migrazione temporaneamente : se rientri in questa categoria, non preoccuparti. Puoi disattivare il gesto Indietro predittivo se al momento non è possibile eseguire la migrazione alle librerie AndroidX o alle API della piattaforma. Per maggiori 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.

Ottenere il codice

Ottieni il codice in uno dei seguenti modi:

Scaricare il file ZIP

Scaricare 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

Eseguire 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 collegare un dispositivo fisico con il livello API 33 o superiore.
Esegui l'app Sunflower.

Dopodiché stabilirai una base di riferimento e analizzerai un'esperienza scadente 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 un WebView che gestisce male i gesti Indietro. Quando un utente scorre dal bordo sinistro o destro per tornare indietro nel WebView, l'app lo riporta a un frammento precedente anziché alla pagina precedente, facendogli perdere tutti i dati non inviati.

Esplorare la demo

Partendo dalla schermata principale, esaminiamo il flusso di lavoro principale dell'app per rivedere l'esperienza scadente con la funzionalità WebView.

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

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

Nella schermata delle informazioni della pianta che hai toccato, tocca l'icona del pollice in su (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 utilizzare il gesto Indietro. Tieni presente che, anziché portarti alla domanda n. 2 del sondaggio, il gesto Indietro ti porta al frammento dei dettagli della pianta (in questo esempio, la pagina delle informazioni sull'avocado). In questo modo perdi le risposte e l'esperienza utente è 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 a ritroso. Queste supportano già il modello anticipato.

Scegliere come target Android 13

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

build.gradle (Project)

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

Eseguire l'upgrade delle dipendenze

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

build.gradle (Project)

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 (Module)

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 handleOnBackPressed metodo 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 altre.

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 testerai il corretto funzionamento della navigazione WebView.

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

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

Dalla domanda n. 2, scorri indietro fino alla domanda n. 1, poi scorri di nuovo indietro per provare a tornare al frammento dei dettagli della pianta.

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

WebView gestisce la navigazione a ritroso evitando di uscire da WebView quando utilizzi la navigazione a ritroso.
L'app deve restituire la navigazione a ritroso 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.

Sostituisci il doUpdateVisitedHistory metodo per determinare se la navigazione a ritroso deve essere intercettata. La logica per gestire la navigazione a ritroso è la seguente:
- Se ci sono altre pagine a cui tornare in WebView (webView.canGoBack()), OnBackPressedCallback metodo deve essere attivato.
- Al contrario, se non ci sono altre pagine a cui tornare in WebView, il metodo OnBackPressedCallback deve essere disattivato. Di conseguenza, il gesto Indietro tornerà al frammento più in alto 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 WebView, compila di nuovo il sondaggio fino alla domanda n. 3.
Utilizzando i gesti Indietro, torna alla visualizzazione dei dettagli della pianta. Dovresti essere in grado di farlo senza problemi.

Ecco un esempio di come dovrebbe apparire il tutto dopo averlo corretto:

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

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

Puoi visualizzare l'anteprima della nuova navigazione tramite gesti Indietro alla schermata Home attivando l'opzione sviluppatore.

7. Complimenti

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

Argomenti trattati

Come abilitare l'app per iniziare a utilizzare le API che supportano il gesto Indietro predittivo
Come intercettare la chiamata on-back per AndroidX
Come ripristinare la navigazione a ritroso nel sistema
Altre opzioni per la gestione dei gesti Indietro
La nuova esperienza utente in arrivo su Android 13 che offre un gesto Indietro 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

Che cosa creerai

Obiettivi didattici

Che cosa ti serve

2. Pianificare il supporto del gesto Indietro predittivo

Utilizzare le API AndroidX per implementare questa funzionalità

Altre opzioni

3. Prima di iniziare

Installare Android Studio

Ottenere un dispositivo

Attivare la navigazione tramite gesti

Ottenere il codice

Scaricare il file ZIP

Scaricare tramite Git

Eseguire l'app

4. Stabilire una base di riferimento

Esplorare la demo

5. Attivare il gesto Indietro predittivo

Scegliere come target Android 13

Eseguire 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 disabilitare la navigazione a ritroso con OnBackPressedCallback

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

7. Complimenti

Argomenti trattati

Codelab completato

Materiale aggiuntivo

Documenti di riferimento