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 künftige Unterstützung von vorausschauenden Touch-Gesten dienen sollen.

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 abschließen und zum Startbildschirm, zu einer vorherigen Aktivität oder zu einer zuvor besuchten Seite in einem WebView zurückkehren möchten. Hier ist ein Beispiel dafür:

Zur Unterstützung der vorausschauenden Zurück-Touch-Geste wird in Android 13 die neue OnBackInvokedCallback-Plattform-API auf Fensterebene hinzugefügt. Diese API ersetzt die KeyEvent.KEYCODE_BACK API und alle Plattformklassen, die OnBackPressed verwenden. Diese werden demnächst eingestellt und erfordern eine Migration in die nächste Android-Hauptversion nach 13. Weitere Informationen finden Sie in unserer Dokumentation.

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

Ziel dieses Codelabs

In diesem Codelab erfahren Sie, wie Sie eine AndroidX-App vorbereiten, die das System „Back“ abfängt. Dazu migrieren Sie es so, dass es die vorausschauende Zurück-Touch-Geste mit WebView unterstützt. Dazu verwenden Sie die APIs, die das Ahead-of-Time-Zurücknavigationsmodell implementieren. Mit anderen Worten: Damit die neuen Animationen funktionieren, muss das System im Voraus wissen, ob die App die Touch-Geste für 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

• So fangen Sie den Onback-Aufruf für AndroidX ab
• Zurück-Ereignis an das System zurückgeben
• Weitere Optionen für Touch-Gesten auf dem Rücken
• Die neue Benutzeroberfläche in Android 13 und höher bietet eine genauere Navigation über Gesten „Zurück“

Voraussetzungen

• Android Studio
• Ein Android-Gerät mit Bedienung über Gesten
• Git (optional)

2. Unterstützung für „Wortsüchtige Touch-Gesten“ planen

Die Touch-Geste „Zurück“ wird bei Apps, die die standardmäßige „Zurück“-Navigation verwenden, automatisch unterstützt. Wenn Sie sie aktivieren möchten, müssen Sie nur enableOnBackInvokedCallback aktivieren. Weitere Informationen dazu finden Sie unter „Rückwärtserkennung“ aktivieren.

AndroidX-APIs verwenden, um diese Funktion zu implementieren

Dieses Codelab wurde für Apps entwickelt, die bereits AndroidX verwenden.

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

Sonstige Optionen

Je nach Anforderungen Ihrer App gibt es noch weitere Möglichkeiten, diese Funktion zu nutzen:

• Für Apps, die AndroidX nicht verwenden können: Falls das auch Sie sind, haben wir eine Lösung für Sie. Sie können die neuen Plattformklassen OnBackInvokedDispatcher und OnBackInvokedCallback verwenden, die wir in Android 13 einführen. Damit können Sie frühzeitige APIs nutzen, ohne dass AndroidX erforderlich ist. Weitere Informationen finden Sie in der Dokumentation.
• Apps, die vorübergehend nicht migriert werden können: Falls das auch auf Sie zutrifft, können wir Ihnen helfen. Sie können die vorausschauende Zurück-Touch-Geste deaktivieren, wenn eine Migration zu den AndroidX-Bibliotheken oder zu 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 besorgen

Sie können die App, die Sie mit diesem Codelab erstellen, auf einem virtuellen oder physischen Android-Gerät ausführen.

Bedienung über Gesten aktivieren

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

Code abrufen

Rufen Sie den Code auf eine der folgenden Arten ab:

ZIP-Datei herunterladen

ZIP-Datei herunterladen (Start)

Über Git herunterladen

Wenn Sie den Code lieber mit Git herunterladen möchten, gehen Sie folgendermaßen vor:

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

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 verbinden, auf dem API-Level 33 oder höher ausgeführt wird.
3. Führen Sie die Sunflower-App aus.

Als Nächstes legen Sie einen Ausgangswert fest und gehen eine schlechte User Experience durch, die Teil der Sunflower-App ist.

4. Baseline festlegen

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

Demo ansehen

Gehen wir vom Hauptbildschirm aus den Hauptworkflow Ihrer App durch, um die schlechte Erfahrung mit der WebView-Funktion zu überprüfen.

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 Avocadofrucht.)

3. Tippen Sie auf dem Infobildschirm der Pflanze, auf die Sie getippt haben, auf das Daumen-hoch-Symbol (in der oberen rechten Ecke), um die Pflanze zu bewerten.

4. Beginnen Sie mit dem Ausfüllen der Umfrage, aber hören Sie auf, wenn Sie bei Frage 3 angekommen sind.

5. Wischen Sie vom linken (oder rechten) Displayrand nach innen, um die Touch-Geste „Zurück“ zu verwenden. Anstatt zu Frage Nr. 2 der Umfrage zu gelangen, gelangen Sie durch Wischen zurück zum Pflanzendetailfragment (in diesem Beispiel die Avocado-Informationsseite). Dies führt dazu, dass Sie Ihre Antworten verlieren, was zu einer schlechten Nutzererfahrung führt.

Lassen Sie uns jetzt beginnen, diese Probleme zu beheben.

5. „Zurück“-Touch-Geste aktivieren

Unsere App verwendet bereits AndroidX, daher werden die Back-Navigations-APIs verwendet. Diese unterstützen bereits das vorzeitige Modell.

Auf Android 13 ausrichten

Aktualisieren Sie die Build-Konfiguration der App im Studio-Projekt Ihrer App so, dass 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

...
}

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"
    ...
}

„Zurück“-Touch-Geste aktivieren

Wenn du die APIs für vorausschauende Zurück-Gesten aktivieren möchtest, setze enableOnBackInvokedCallback im Manifest auf true.

AndroidManifest.xml

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

OnBackPressedCallback für die Verarbeitung von Zurück-Gesten deklarieren und registrieren

Erstellen Sie den Callback und überschreiben Sie die handleOnBackPressed-Methode, um „Zurück“-Gesten zu verarbeiten. Für den Anwendungsfall WebView 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)
}

Testen Sie, was Sie erstellt haben

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. Tippe auf eine Pflanze deiner Wahl und dann auf das „Mag ich“-Symbol. Fülle dann die Umfrage aus, bis du bei Frage 3 bist.
3. Wischen Sie vom linken oder rechten Displayrand nach innen, um die Touch-Geste „Zurück“ zu verwenden. Das WebView sollte Sie zu Frage 2 der Umfrage zurückführen.

Das ist genau das Verhalten, das wir uns wünschen. Wir haben allerdings erst die Hälfte geschafft und das Problem ist noch nicht ganz gelöst. Schauen wir uns nun einmal genauer an, was wir damit meinen:

4. Wischen Sie von Frage 2 zurück zu Frage 1 und wischen Sie dann noch einmal zurück, um zum Pflanzendetailfragment zurückzukehren.

Beachten Sie, dass Sie nicht von Frage 1 zum Pflanzendetailfragment zurückwechseln können. Dies hat folgende Gründe:

• Ihr WebView verarbeitet die „Zurück“-Navigation, indem es verhindert, dass WebView verlassen wird, wenn die „Zurück“-Navigation verwendet wird.
• Ihre App muss die „Zurück“-Navigation an das System zurückgeben, wenn sie sie nicht mehr benötigt. Fahren wir mit dem nächsten Abschnitt fort, um das Problem zu beheben.

6. Touch-Geste „Zurück“ korrigieren

Im vorherigen Schritt hat unsere App die „Zurück“-Geste abgefangen, ohne sie zum Fragment der Pflanzendetails aus den vorherigen Schritten zurückzukehren. Daher können unsere Nutzer die App nicht verlassen und bleiben in WebView fest, was eine schlechte Nutzererfahrung darstellt.

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

1. Überschreiben Sie die Methode doUpdateVisitedHistory, um festzustellen, ob die Zurück-Navigation abgefangen werden soll. Die Logik für die Zurück-Navigation lautet wie folgt:
   • Wenn es mehr Seiten gibt, zu denen in WebView (webView.canGoBack()) zurückgekehrt werden kann, sollte die Methode OnBackPressedCallback aktiviert werden.
   • Wenn es keine weiteren Seiten gibt, zu denen in WebView zurückgekehrt werden kann, sollte die Methode OnBackPressedCallback deaktiviert werden. Daher kehrt die „Zurück“-Geste zum obersten Fragment im Back Stack zurück.

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 WebView noch einmal testen möchten, füllen Sie die Umfrage noch einmal aus, bis Sie bei Frage 3 angelangt sind.
3. Navigieren Sie mithilfe der „Zurück“-Gesten zurück zur Pflanzendetailansicht. Das sollte problemlos möglich sein.

Beachten Sie, dass wir WebView jetzt beenden und zurückgehen können, um das Pflanzendetailfragment zu überprüfen, ohne hängen zu bleiben.

Hier ist ein Beispiel dafür, wie all dies nach der Korrektur aussehen sollte:

Vorschau der neuen Touch-Geste „Zurück zum Startbildschirm“

In zukünftigen Android-Versionen können Sie auch die Touch-Geste „Zurücksagen“ verwenden, wie in der folgenden Animation gezeigt. Wir empfehlen Ihnen dringend, diese Änderungen so bald wie möglich zu implementieren.

Wenn du die Entwickleroption aktivierst, kannst du eine Vorschau der neuen Gestensteuerung zurück zur Startseite sehen.

7. Glückwunsch

Glückwunsch! Sie haben viele Inhalte abgedeckt. Wir hoffen, dass du die Optionen und APIs zum Aktualisieren deiner App im Hinblick auf die Touch-Geste „Zurücksagen“ unter Android besser kennst.

Behandelte Themen

• So aktivieren Sie Ihre App, um APIs zu verwenden, die die Funktion „Zurücksagen“ unterstützen
• So fangen Sie den On-back-Aufruf für AndroidX ab
• So geben Sie die „Zurück“-Navigation wieder an das System an
• Weitere Optionen zum Umgang mit „Zurück“-Touch-Gesten
• Das neue UX-Design ist in Android 13 verfügbar und bietet eine prädiktive „Zurück“-Touch-Geste

Codelab abgeschlossen

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