Intelligente „Zurück“-Geste in der Eingabeleiste

Mit der Funktion „Intelligente „Zurück“-Touch-Geste“ können Nutzer eine Vorschau der Seite aufrufen, zu der sie mit dem Wischen nach „Zurück“ gelangen. Die Vorhersagefunktion für Rückgaben lässt sich nahtlos in Compose einbinden, um die Navigation in Ihrer App zu verbessern. Nutzer profitieren von flüssigeren und intuitiveren Übergängen, wenn sie innerhalb Ihrer App zurückwechseln. Abbildung 1 zeigt, wie das in der Beispiel-App SociaLite funktioniert.

In diesem Leitfaden wird beschrieben, wie Sie mit der Funktion „Vorherige Seite“ Folgendes tun können:

• Intelligente „Zurück“-Touch-Geste aktivieren
• Standardsystemanimationen aktivieren
• Vorhersagefunktion für die Rückwärtsnavigation mit Navigation Compose aktivieren
• Übergänge für gemeinsame Elemente einbinden
• Unterstützung für die Vorhersagefunktion mit Material Compose-Komponenten
• Manuell über PredictiveBackHandler auf den Fortschritt zugreifen
• Animation für intelligente „Zurück“-Touch-Geste testen

Intelligente „Zurück“-Touch-Geste aktivieren

Wenn Sie Animationen für intelligente „Zurück“-Touch-Gesten aktivieren möchten, müssen Sie die Unterstützung für die intelligente „Zurück“-Touch-Geste aktivieren. Wenn Sie die Funktion aktivieren möchten, fügen Sie in Ihrer AndroidManifest.xml-Datei dem <application>-Tag oder einzelnen <activity>-Tags das Attribut „android:enableOnBackInvokedCallback="true“ hinzu.

Standardsystemanimationen aktivieren

Die Systemanimationen für den Startbildschirm, den Wechsel zwischen Aktivitäten und den Wechsel zwischen Aufgaben sind auf Geräten mit Android 15 und höher für Apps verfügbar, die zu den unterstützten APIs für die Rückgabebehandlung migriert wurden.

• Zurück zur Startseite: Der Nutzer wird zur Startseite zurückgeleitet.
• Aktivitätsübergreifend: Übergänge zwischen Aktivitäten innerhalb der App.
• Aufgabenübergreifend: Übergänge zwischen Aufgaben.

Diese Animationen sind unter Android 15 und höher standardmäßig aktiviert. Auf Geräten mit Android 13 oder 14 können Nutzer sie über die Entwickleroptionen aktivieren.

Wenn Sie die Systemanimationen nutzen möchten, aktualisieren Sie die AndroidX-Activity-Abhängigkeit auf 1.6.0 oder höher.

Vorhersagefunktion für die Rückwärtsnavigation mit Navigation Compose aktivieren

Wenn Sie die Vorhersagefunktion für „Zurück“ in Navigation Compose verwenden möchten, müssen Sie die Bibliothek navigation-compose 2.8.0 oder höher verwenden.

Bei der Navigation wird in der Funktion „Compose“ automatisch ein Cross-Fade zwischen den Bildschirmen verwendet, wenn der Nutzer zurückwischt:

Bei der Navigation können Sie mit popEnterTransition und popExitTransition benutzerdefinierte Übergänge erstellen. Wenn Sie diese Modifikatoren auf Ihre NavHost anwenden, können Sie festlegen, wie die Bildschirme beim Betreten und Verlassen animiert werden. Mit ihnen lassen sich verschiedene Effekte wie Skalieren, Ausblenden oder Schwenken erstellen.

In diesem Beispiel wird scaleOut innerhalb von popExitTransition verwendet, um den Bildschirm beim Verlassen zu verkleinern, wenn der Nutzer zurückgeht. Der Parameter transformOrigin bestimmt außerdem den Punkt, um den herum die Skalierungsanimation erfolgt. Standardmäßig ist das der Mittelpunkt des Bildschirms (0.5f, 0.5f). Sie können diesen Wert anpassen, damit die Skalierung von einem anderen Punkt ausgeht.

NavHost(
    navController = navController,
    startDestination = Home,
    popExitTransition = {
        scaleOut(
            targetScale = 0.9f,
            transformOrigin = TransformOrigin(pivotFractionX = 0.5f, pivotFractionY = 0.5f)
        )
    },
    popEnterTransition = {
        EnterTransition.None
    },
    modifier = modifier,
)
PredictiveBackSnippets.kt

Dieser Code führt zu folgendem Ergebnis:

popEnterTransition und popExitTransition steuern speziell Animationen, wenn der Rückstapel beispielsweise durch eine Rückwärtsgeste geöffnet wird. Mit enterTransition und exitTransition können Sie auch Animationseffekte für das Aufrufen und Schließen von Composeables allgemein definieren, nicht nur für die Vorhersagefunktion für den Rücksprung. Wenn Sie nur enterTransition und exitTransition festlegen, werden sie sowohl für die normale Navigation als auch zum Entfernen des Rückstapels verwendet. Mit popEnterTransition und popExitTransition können Sie jedoch unterschiedliche Animationen für die Rückwärtsnavigation erstellen.

Übergänge für gemeinsame Elemente einbinden

Übergänge mit gemeinsamen Elementen sorgen für eine nahtlose visuelle Verbindung zwischen Composables mit gemeinsamen Inhalten, die häufig für die Navigation verwendet werden.

Informationen zum Verwenden freigegebener Elemente mit Navigation Compose finden Sie unter Vorhersagende Navigation mit freigegebenen Elementen.

Unterstützung für die Vorhersagefunktion mit Material Compose-Komponenten

Viele Komponenten in der Material Compose-Bibliothek sind für die nahtlose Funktion mit vorausschauenden Zurück-Gesten konzipiert. Wenn Sie in diesen Komponenten vorausschauende Rückwärtsanimationen aktivieren möchten, fügen Sie Ihrem Projekt die neueste Material3-Abhängigkeit (androidx.compose.material3:material3-*:1.3.0 oder höher) hinzu.

Zu den Material-Komponenten, die Animationen für intelligente „Zurück“-Touch-Geste unterstützen, gehören:

• SearchBar
• ModalBottomSheet
• ModalDrawerSheet/DismissibleDrawerSheet
• ModalNavigationDrawer/DismissibleNavigationDrawer

SearchBar und ModalBottomSheet werden automatisch mit intelligenten „Zurück“-Touch-Gesten animiert. Bei ModalNavigationDrawer, ModalDrawerSheet, DismissibleDrawerSheet und DismissibleNavigationDrawer müssen Sie drawerState an die entsprechenden Tabelleninhalte übergeben.

Manuell über PredictiveBackHandler auf den Fortschritt zugreifen

Mit dem PredictiveBackHandler[5]-Composeable in Jetpack Compose können Sie die Zurück-Geste abfangen und auf ihren Fortschritt zugreifen. Sie können in Echtzeit auf die Wischgeste des Nutzers reagieren und benutzerdefinierte Animationen oder Verhaltensweisen erstellen, die davon abhängen, wie weit der Nutzer wischt.

Wenn Sie die PredictiveBackHandler verwenden möchten, muss androidx.activity:activity:1.6.0 oder höher installiert sein.

PredictiveBackHandler stellt einen Flow<BackEventCompat> bereit, der Ereignisse auslöst, die den Fortschritt der Touch-Geste „Zurück“ darstellen. Jedes Ereignis enthält Informationen wie:

• progress: Ein Gleitkommawert zwischen 0 und 1, der den Fortschritt der Zurück-Geste angibt (0 = Geste gestartet, 1 = Geste abgeschlossen).
• touchX und touchY: Die X- und Y-Koordinaten des Touch-Ereignisses.

Das folgende Snippet zeigt die grundlegende Verwendung von PredictiveBackHandler:

PredictiveBackHandler(true) { progress: Flow<BackEventCompat> ->
    // code for gesture back started
    try {
        progress.collect { backEvent ->
            // code for progress
            boxScale = 1F - (1F * backEvent.progress)
        }
        // code for completion
        boxScale = 0F
    } catch (e: CancellationException) {
        // code for cancellation
        boxScale = 1F
    }
}
PredictiveBackSnippets.kt

Beispiel: Einbindung in eine Navigationsleiste

In diesem Beispiel wird gezeigt, wie Sie mit PredictiveBackHandler eine benutzerdefinierte In-App-Animation implementieren, um in JetLagged eine reibungslose Interaktion mit einem Navigationsmenü als Reaktion auf Zurück-Gesten zu ermöglichen:

In diesem Beispiel wird PredictiveBackHandler für Folgendes verwendet:

• Verfolgen Sie den Fortschritt der Touch-Geste „Zurück“.
• Aktualisieren Sie die translationX der Leiste entsprechend dem Fortschritt der Geste.
• Mit velocityTracker können Sie die Schublade je nach Geschwindigkeit der Touch-Geste, wenn sie abgeschlossen oder abgebrochen wird, reibungslos öffnen oder schließen.

Animation für intelligente „Zurück“-Touch-Geste testen

Wenn Sie noch Android 13 oder Android 14 verwenden, können Sie die Animation für die Rückkehr zum Startbildschirm testen.

So testen Sie diese Animation:

1. Gehen Sie auf Ihrem Gerät zu Einstellungen > System > Entwickleroptionen.
2. Wählen Sie Animationen für intelligente „Zurück“-Touch-Geste aus.
3. Starten Sie die aktualisierte App und testen Sie die Touch-Geste für „Zurück“.

Unter Android 15 und höher ist diese Funktion standardmäßig aktiviert.

Weitere Informationen

• Codelab zum Hinzufügen von Animationen für intelligente „Zurück“-Touch-Geste
• Erweiterte Layoutanimationen in der Funktion „Video erstellen“