Aktualisiere deine App, um zukünftige voraussagende Touch-Gesten für „Zurück“ zu unterstützen

1. Einführung

In Android 13 haben wir APIs hinzugefügt, die als Grundlage für die kommende Unterstützung der intelligenten „Zurück“-Geste dienen.

Mit dieser Funktion können Nutzer das Ergebnis einer „Zurück“-Geste in einer Vorschau ansehen , bevor sie sie vollständig ausführen. Sie können also entscheiden, ob sie in der aktuellen Ansicht bleiben oder die Aktion abschließen und zum Startbildschirm, zu einer vorherigen Aktivität oder zu einer zuvor besuchten Seite in einer WebView zurückkehren möchten. So sieht das aus:

Zur Unterstützung der intelligenten „Zurück“-Geste wird in Android 13 die neue Plattform-API OnBackInvokedCallback auf Fensterebene hinzugefügt. Diese API ersetzt die KeyEvent.KEYCODE_BACK API und alle Plattformklassen, die OnBackPressed verwenden. Diese sollen eingestellt werden und müssen in der nächsten Hauptversion von Android nach 13 migriert werden. Weitere Informationen finden Sie in unserer Dokumentation.

In diesem Codelab beheben wir ein Umfragefragment, das eine WebView implementiert.

Ziel dieses Codelabs

In diesem Codelab erfahren Sie, wie Sie eine AndroidX-App vorbereiten, die das „Zurück“-System abfängt, indem Sie sie migrieren, um die intelligente „Zurück“-Geste mit einer WebView zu unterstützen. Dazu verwenden Sie die APIs, die das Ahead-of-Time-Modell für die „Zurück“-Navigation implementieren. Mit anderen Worten: Damit die neuen Animationen funktionieren, muss das System im Voraus wissen, ob die App die „Zurück“-Navigation abfängt.

Aufgaben

In diesem Codelab verwenden Sie AndroidX-API-Bibliotheken, um „Zurück“-Gesten in der Sunflower-App zu verarbeiten.

Lerninhalte

• Das Abfangen des „Zurück“-Aufrufs für AndroidX
• Das Zurückgeben des „Zurück“-Ereignisses an das System
• Weitere Optionen zum Verarbeiten von „Zurück“-Gesten
• Die neue Nutzererfahrung in Android 13 und höher, die eine intelligentere „Zurück“-Navigation bietet

Voraussetzungen

• Android Studio
• Ein Android-Gerät mit aktivierter Gestennavigation
• (Optional) Git

2. Unterstützung für die intelligente „Zurück“-Geste planen

Die intelligente „Zurück“-Geste wird automatisch für Apps unterstützt, die die Standard-„Zurück“-Navigation verwenden. Um sie zu aktivieren, müssen Sie nur enableOnBackInvokedCallback aktivieren, wie unter Intelligente „Zurück“-Geste aktivieren beschrieben.

AndroidX-APIs verwenden, um diese Funktion zu implementieren

Dieses Codelab ist für Apps konzipiert, die bereits AndroidX verwenden.

Sie implementieren OnBackPressedDispatcher und OnBackPressedCallback, um die „Zurück“-Navigation zu unterstützen.

Weitere Optionen

Je nach den Anforderungen Ihrer App haben wir weitere Optionen für die Verarbeitung dieser Funktion:

• Für Apps, die AndroidX nicht verwenden können : Wenn das auf Sie zutrifft, haben wir eine Lösung für Sie. Verwenden Sie die neuen OnBackInvokedDispatcher und OnBackInvokedCallback Plattformklassen, die wir in Android 13 einführen. Damit können Sie die Ahead-of-Time-APIs verwenden, ohne AndroidX zu benötigen. Weitere Informationen finden Sie in der Dokumentation.
• Für Apps, die vorübergehend nicht migriert werden können : Auch hier haben wir eine Lösung für Sie. Sie können die intelligente „Zurück“-Geste deaktivieren, wenn es derzeit nicht möglich ist, zu den AndroidX-Bibliotheken oder den Plattform-APIs zu migrieren. Weitere Informationen finden Sie in der Dokumentation.

3. Hinweis

Android Studio installieren

Installieren Sie Android Studio und das Android 13 SDK.

Gerät besorgen

Sie können ein virtuelles oder physisches Android-Gerät verwenden, um die App auszuführen, die Sie mit diesem Codelab erstellen.

Gestennavigation aktivieren

Wenn Sie eine neue Emulatorinstanz mit API-Level 29 ausführen, ist die Gestennavigation möglicherweise nicht standardmäßig aktiviert. Um die Gestennavigation zu aktivieren, wählen Sie Systemeinstellungen > System > Systemnavigation > Gestennavigation aus.

Code abrufen

Sie können den Code auf eine der folgenden Arten abrufen:

ZIP-Datei herunterladen

ZIP-Datei herunterladen (Startcode)

Über Git herunterladen

Wenn Sie den Code lieber mit Git herunterladen möchten, gehen Sie so vor:

1. Installieren Sie Git.
2. Klonen Sie den Zweig starter-code oder main, um die App für diese Übung zu erhalten:

Terminal

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

Anwendung ausführen

Gehen Sie folgendermaßen vor:

1. Öffnen und erstellen Sie die App in Android Studio.
2. Erstellen Sie ein neues virtuelles Gerät und wählen Sie Tiramisu aus. Alternativ können Sie ein physisches Gerät anschließen, auf dem API-Level 33 oder höher ausgeführt wird.
3. Führen Sie die Sunflower-App aus.

Als Nächstes legen Sie eine Basislinie fest und gehen eine schlechte Nutzererfahrung durch, die Teil der Sunflower-App ist.

4. Basislinie festlegen

Unser Ausgangspunkt ist die Sunflower-App, die eine Umfrage enthält, die in einer WebView präsentiert wird, die „Zurück“-Gesten schlecht verarbeitet. Wenn ein Nutzer vom linken oder rechten Rand wischt, um in der WebView zurückzugehen, kehrt die App zu einem vorherigen Fragment zurück, anstatt zur vorherigen Seite zurückzukehren. Dadurch gehen alle nicht gesendeten Daten verloren.

Demo ansehen

Sehen wir uns den Hauptworkflow Ihrer App an, um die schlechte Nutzererfahrung mit der WebView-Funktion zu überprüfen.

1. Tippen Sie auf dem Standardbildschirm der Sunflower-App auf PLANT LIST (PFLANZENLISTE).

2. Tippen Sie im Pflanzenkatalog auf eine beliebige Pflanze. In diesem Beispiel verwenden wir die Avocado.

3. Tippen Sie auf dem Infobildschirm für die Pflanze, die Sie ausgewählt haben, oben rechts auf das Symbol „Daumen hoch“, um die Pflanze zu bewerten.

4. Beginnen Sie mit dem Ausfüllen der Umfrage, aber halten Sie an, wenn Sie zu Frage 3 kommen.

5. Wischen Sie vom linken oder rechten Rand des Bildschirms nach innen, um die „Zurück“-Geste zu verwenden. Anstatt zu Frage 2 in der Umfrage zu gelangen, werden Sie zum Fragment mit den Pflanzendetails weitergeleitet (in diesem Beispiel zur Informationsseite der Avocado). Dadurch gehen Ihre Antworten verloren und die Nutzererfahrung ist schlecht.

Beginnen wir jetzt mit der Behebung dieser Probleme.

5. Intelligente „Zurück“-Geste aktivieren

Unsere App verwendet bereits AndroidX, daher verwenden wir die APIs für die „Zurück“-Navigation. Diese unterstützen bereits das Ahead-of-Time-Modell.

Android 13 als Ziel festlegen

Aktualisieren Sie in Ihrem Studio-Projekt die Build-Konfiguration der App, um Android 13 als Ziel festzulegen, wie im folgenden Code-Snippet gezeigt.

build.gradle (Projekt)

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

Upgrade der Abhängigkeiten durchführen

Legen Sie in „build.gradle“ für appCompatVersion den Wert 1.6.0 oder höher fest.

build.gradle (Projekt)

buildscript {
   ext {

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

...
}

Führen Sie ein Upgrade auf AndroidX Activity 1.6.0 oder höher durch.

build.gradle (Modul)

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

Intelligente „Zurück“-Geste aktivieren

Wenn Sie die APIs für die intelligente „Zurück“-Geste aktivieren möchten, legen Sie im Manifest für enableOnBackInvokedCallback den Wert true fest.

AndroidManifest.xml

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

OnBackPressedCallback deklarieren und registrieren, um „Zurück“-Gesten zu verarbeiten

Erstellen Sie den Callback und überschreiben Sie die handleOnBackPressed Methode, um „Zurück“-Gesten zu verarbeiten. Für den WebView-Anwendungsfall verwenden wir die „Zurück“-Geste, um im Seitenstapel zurückzugehen, bis keine Seiten mehr vorhanden sind.

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)
}

Erstelltes ausprobieren

Jetzt testen Sie, ob die WebView-Navigation ordnungsgemäß funktioniert.

1. Erstellen Sie die App in Android Studio und führen Sie sie noch einmal aus.
2. Tippen Sie wie beim ersten Ausführen der Demo auf eine Pflanze Ihrer Wahl und dann auf das Symbol „Daumen hoch“. Füllen Sie dann die Umfrage aus, bis Sie zu Frage 3 kommen.
3. Wischen Sie vom linken oder rechten Rand des Bildschirms nach innen, um die „Zurück“-Geste zu verwenden. Die WebView sollte Sie zu Frage 2 in der Umfrage zurückbringen.

Das ist genau das gewünschte Verhalten. Wir sind jedoch erst halb fertig. Das Problem ist noch nicht vollständig behoben. Sehen wir uns an, was wir damit meinen:

4. Wischen Sie von Frage 2 zurück zu Frage 1 und dann noch einmal, um zum Fragment mit den Pflanzendetails zurückzukehren.

Sie können nicht von Frage 1 zum Fragment mit den Pflanzendetails zurückkehren. Das hat folgende Gründe:

• Ihre WebView verarbeitet die „Zurück“-Navigation, indem sie die WebView nicht verlässt, wenn die „Zurück“-Navigation verwendet wird.
• Ihre App muss die „Zurück“-Navigation an das System zurückgeben, sobald sie sie nicht mehr benötigt. Im nächsten Abschnitt erfahren Sie, wie Sie das beheben.

6. „Zurück“-Geste beheben

Im vorherigen Schritt hat unsere App die „Zurück“-Geste abgefangen, ohne sie an das Fragment mit den Pflanzendetails in den vorherigen Schritten zurückzugeben. Daher können unsere Nutzer die App nicht verlassen und sind in der WebView gefangen, was zu einer schlechten Nutzererfahrung führt.

„Zurück“-Navigation mit OnBackPressedCallback aktivieren oder deaktivieren

1. Überschreiben Sie die doUpdateVisitedHistory Methode, um zu bestimmen, ob die „Zurück“-Navigation abgefangen werden soll. Die Logik für die Verarbeitung der „Zurück“-Navigation ist wie folgt:
   • Wenn in der WebView weitere Seiten vorhanden sind, zu denen zurückgekehrt werden kann (webView.canGoBack()), sollte die Methode OnBackPressedCallback aktiviert werden.
   • Wenn in der WebView keine weiteren Seiten vorhanden sind, zu denen zurückgekehrt werden kann, sollte die Methode OnBackPressedCallback deaktiviert werden. Dadurch wird mit der „Zurück“-Geste zum obersten Fragment im Back-Stack zurückgekehrt.

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

    }
  }
}

2. Wenn Sie die WebView noch einmal testen möchten, füllen Sie die Umfrage noch einmal aus, bis Sie zu Frage 3 kommen.
3. Navigieren Sie mit „Zurück“-Gesten ganz zurück zur Ansicht mit den Pflanzendetails. Das sollte problemlos möglich sein.

Wir können die WebView jetzt verlassen und zum Fragment mit den Pflanzendetails zurückkehren, ohne hängen zu bleiben.

So sollte das Ganze aussehen, nachdem Sie es behoben haben:

Vorschau der neuen Animation für die „Zurück zum Startbildschirm“-Geste

In zukünftigen Versionen von Android wird die intelligente „Zurück“-Geste wie in der folgenden Animation dargestellt. Wir empfehlen dringend, diese Änderungen so schnell wie möglich zu implementieren.

Sie können sich eine Vorschau der neuen Navigation für die „Zurück zum Startbildschirm“-Geste ansehen, indem Sie die Entwickleroption aktivieren.

7. Glückwunsch

Glückwunsch! Sie haben viele Inhalte behandelt. Wir hoffen, dass Sie jetzt ein besseres Verständnis der Optionen und APIs haben, um Ihre App für die intelligente „Zurück“-Geste in Android zu aktualisieren.

Behandelte Themen

• So aktivieren Sie Ihre App, damit sie die APIs verwenden kann, die die intelligente „Zurück“-Geste unterstützen
• Das Abfangen des „Zurück“-Aufrufs für AndroidX
• Das Zurückgeben der „Zurück“-Navigation an das System
• Weitere Optionen zum Verarbeiten von „Zurück“-Gesten
• Die neue UX-Erfahrung in Android 13, die eine intelligentere „Zurück“-Geste bietet

Abgeschlossenes Codelab

ZIP-Datei herunterladen (abgeschlossen)

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

Zusätzliches Material

• Entwicklerleitfaden

Referenzdokumente

• OnBackPressedDispatcher und OnBackPressedCallback
• OnBackInvokedDispatcher und OnBackInvokedCallback