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 die Grundlage für die demnächst verfügbare Unterstützung für eine vorhersagende Zurück-Geste bilden.

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

Zur Unterstützung der vorhersagenden Zurück-Geste wird in Android 13 die neue Plattform-API OnBackInvokedCallback auf Fensterebene eingeführt. Diese API ersetzt die KeyEvent.KEYCODE_BACK API und alle Plattformklassen, die OnBackPressed verwenden. Diese sind für die Einstellung geplant und erfordern eine Migration im nächsten großen Android-Release nach Android 13. Weitere Informationen finden Sie in unserer Dokumentation.

In diesem Codelab beheben wir ein Umfragefragment, in dem ein WebView implementiert ist.

Ziel dieses Codelabs

In diesem Codelab erfahren Sie, wie Sie eine AndroidX-App vorbereiten, die das System „Zurück“ abfängt, indem Sie sie migrieren, um die vorhersagende 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. Damit die neuen Animationen funktionieren, muss das System also im Voraus wissen, ob die App die Zurück-Geste abfängt.

Aufgaben

In diesem Codelab verwenden Sie AndroidX-API-Bibliotheken, um Rückwärtsgesten in der Sunflower-App zu verarbeiten.

Lerninhalte

• „on-back“-Aufruf für AndroidX abfangen
• „Zurück“-Ereignis an das System zurückgeben
• Weitere Optionen für die Verarbeitung von Zurück-Gesten
• Die neue Benutzeroberfläche in Android 13+ bietet eine bessere Vorhersage bei der Navigation mit der Zurück-Geste.

Voraussetzungen

• Android Studio
• Ein Android-Gerät, auf dem die Bedienung über Gesten aktiviert ist
• (Optional) Git

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

Die vorhersagende Zurück-Geste wird automatisch für Apps unterstützt, die die Standard-Zurück-Navigation verwenden. Dazu müssen Sie nur enableOnBackInvokedCallback aktivieren, wie unter Vorhersagende Geste „Zurück“ aktivieren beschrieben.

AndroidX-APIs zum Implementieren dieser Funktion verwenden

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

Sie implementieren OnBackPressedDispatcher und OnBackPressedCallback, um die Rückwärtsnavigation zu unterstützen.

Weitere Optionen

Je nach den Anforderungen Ihrer App haben wir andere Optionen für den Umgang mit 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 Plattformklassen OnBackInvokedDispatcher und OnBackInvokedCallback, 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.
• Apps, die vorübergehend nicht migriert werden können: Auch hier können wir dir helfen. Sie können die Vorhersage für die Zurück-Geste deaktivieren, wenn eine Migration zu den AndroidX-Bibliotheken oder den Plattform-APIs derzeit nicht möglich ist. Weitere Informationen finden Sie in der Dokumentation.

3. Hinweis

Android Studio installieren

Installieren Sie Android Studio und das Android 13 SDK.

Gerät erhalten

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

Bedienung über Gesten aktivieren

Wenn Sie eine neue Emulatorinstanz mit API-Level 29 ausführen, ist die Gestensteuerung möglicherweise nicht standardmäßig aktiviert. Wenn Sie die Bedienung über Gesten aktivieren möchten, wählen Sie Systemeinstellungen > System > Systemsteuerung > Bedienung über Gesten aus.

Code abrufen

Sie haben folgende Möglichkeiten, den Code zu erhalten:

ZIP-Datei herunterladen

ZIP-Datei herunterladen (Start)

Ü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 Branch 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 Sie die App in Android Studio und erstellen Sie sie.
2. Erstellen Sie ein neues virtuelles Gerät und wählen Sie Tiramisu aus. Alternativ können Sie ein physisches Gerät mit API‑Level 33 oder höher anschließen.
3. Führen Sie die Sunflower App aus.

Als Nächstes legen Sie eine Baseline fest und sehen sich eine schlechte Nutzererfahrung in der Sunflower App an.

4. Baseline festlegen

Wir gehen von der Sunflower-App aus, die eine Umfrage in einer WebView enthält, die Rückwärtsgesten schlecht verarbeitet. Wenn ein Nutzer vom linken oder rechten Rand wischt, um im WebView zurückzugehen, wird er von der App zu einem vorherigen Fragment zurückgeleitet, anstatt zur vorherigen Seite. Dadurch gehen alle nicht gesendeten Daten verloren.

Demo ansehen

Sehen wir uns den Haupt-Workflow Ihrer App an, um die Probleme mit der WebView-Funktion zu untersuchen.

1. Tippen Sie auf dem Standardbildschirm der Sunflower App auf 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, halten Sie aber an, wenn Sie zu Frage 3 kommen.

5. Wischen Sie vom linken (oder rechten) Displayrand nach innen, um die Geste „Zurück“ zu verwenden. Wenn Sie zurückwischen, gelangen Sie nicht zur zweiten Frage der Umfrage, sondern zum Fragment mit den Pflanzendetails (in diesem Beispiel die Informationsseite zur Avocado). Dadurch gehen Ihre Antworten verloren und die Nutzerfreundlichkeit wird beeinträchtigt.

Legen wir jetzt los, um diese Probleme zu beheben.

5. Intelligente „Zurück“-Touchgeste aktivieren

In unserer App wird bereits AndroidX verwendet. Sie verwenden also die APIs für die Zurück-Navigation. Diese unterstützen bereits das Ahead-of-Time-Modell.

Android 13 als Zielplattform festlegen

Aktualisieren Sie in unserem Studio-Projekt die Build-Konfiguration der App, damit sie auf Android 13 ausgerichtet ist, 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 appCompatVersion auf 1.6.0 oder höher fest.

build.gradle (Projekt)

buildscript {
   ext {

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

...
}

Aktualisieren Sie auf AndroidX Activity 1.6.0 oder höher.

build.gradle (Modul)

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

Intelligente „Zurück“-Touchgeste aktivieren

Wenn Sie die APIs für die intelligente „Zurück“-Touchgeste 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 Touch-Gesten „Zurück“ zu verarbeiten

Erstellen Sie den Callback und überschreiben Sie die Methode handleOnBackPressed, um Rückwärtsgesten 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)
}

Erstellte Inhalte ausprobieren

Als Nächstes testen Sie, ob die WebView-Navigation ordnungsgemäß funktioniert.

1. Erstellen Sie die App in Android Studio noch einmal und führen Sie sie aus.
2. Tippen Sie wie beim ersten Ausführen der Demo auf eine beliebige Pflanze und dann auf das Symbol mit dem Daumen nach oben. Füllen Sie dann die Umfrage bis Frage 3 aus.
3. Wischen Sie vom linken (oder rechten) Displayrand nach innen, um die Geste „Zurück“ zu verwenden. Über die WebView sollten Sie zur Frage 2 in der Umfrage zurückkehren.

Genau das ist das gewünschte Verhalten. Wir sind jedoch erst auf halbem Weg – 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 zurück, um zum Fragment mit den Pflanzendetails zurückzukehren.

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

• Ihr WebView-Element verarbeitet die Rückwärtsnavigation, indem es beim Verwenden der Rückwärtsnavigation nicht verlassen wird.
• Ihre App muss die Zurück-Navigation an das System zurückgeben, sobald sie sie nicht mehr benötigt. Im nächsten Abschnitt erfährst du, wie du das beheben kannst.

6. Touch-Geste „Zurück“ korrigieren

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.

Rückwärtsnavigation mit OnBackPressedCallback aktivieren oder deaktivieren

1. Überschreiben Sie die Methode doUpdateVisitedHistory, um festzulegen, ob die Zurück-Navigation abgefangen werden soll. Die Logik für die Rückwärtsnavigation ist folgende:
   • Wenn es in der WebView weitere Seiten gibt, zu denen zurückgekehrt werden kann (webView.canGoBack()), sollte die Methode OnBackPressedCallback aktiviert werden.
   • Wenn es im WebView keine Seiten mehr gibt, zu denen zurückgekehrt werden kann, sollte die Methode OnBackPressedCallback deaktiviert werden. Daher wird mit der Zurück-Geste zum obersten Fragment im Backstack 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 Frage 3 erreichen.
3. Kehren Sie mit der Zurück-Geste zur Detailansicht der Pflanze zurück. Das sollte problemlos möglich sein.

Wir können die WebView jetzt verlassen und zum Fragment mit den Pflanzendetails zurückkehren, ohne dass es zu Problemen kommt.

So sollte das Ganze aussehen, nachdem Sie die Probleme behoben haben:

Vorschau der neuen Animation für die Touch-Geste „Zurück zur Startseite“

In zukünftigen Android-Versionen wird die vorhersagende Zurück-Geste eingeführt, wie in der folgenden Animation zu sehen ist. Wir empfehlen Ihnen dringend, so schnell wie möglich mit der Umsetzung dieser Änderungen zu beginnen.

Sie können sich eine Vorschau der neuen „Zurück zur Startseite“-Geste ansehen, indem Sie die Entwickleroption aktivieren.

7. Glückwunsch

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

Behandelte Themen

• So aktivieren Sie die Unterstützung der Vorhersage-Geste „Zurück“ in Ihrer App
• „Zurück“-Aufruf für AndroidX abfangen
• Zurück-Navigation an das System zurückgeben
• Weitere Optionen für die Verarbeitung von Zurück-Gesten
• Die neue Benutzeroberfläche in Android 13 bietet eine vorhersagbarere Geste „Zurück“.

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