Intelligente „Zurück“-Geste einrichten

Die intelligente „Zurück“-Geste und Systemanimationen sind standardmäßig aktiviert. Wenn deine App das „Zurück“-Ereignis abfängt und du noch nicht zur intelligenten „Zurück“-Geste migriert hast, aktualisiere deine App, um unterstützte APIs für die Rückwärtsnavigation zu verwenden.

Standardmäßige Systemanimationen aktivieren

Die Systemanimationen für die Rückkehr zum 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 Verarbeitung der Zurück-Geste migriert wurden.

• Zurück zum Startbildschirm: Der Nutzer wird zum Startbildschirm 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 verwenden möchten, aktualisieren Sie die AndroidX-Abhängigkeit Activity auf 1.6.0 oder höher.

Intelligente „Zurück“-Geste mit Navigation Compose aktivieren

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

Navigation Compose blendet automatisch zwischen Bildschirmen über, wenn der Nutzer zurückwischt:

Beim Navigieren können Sie mit popEnterTransition und popExitTransition benutzerdefinierte Übergänge erstellen. Wenn diese Modifikatoren auf NavHost angewendet werden, können Sie damit festlegen, wie die Ein- und Ausstiegsbildschirme animiert werden. Sie können damit verschiedene Effekte wie Skalieren, Ein- und Ausblenden oder Schieben erstellen.

In diesem Beispiel wird scaleOut innerhalb von popExitTransition verwendet, um den aktuellen Bildschirm zu verkleinern, wenn der Nutzer zurückgeht. Außerdem bestimmt der Parameter transformOrigin den Punkt, um den die Skalierungsanimation erfolgt. Standardmäßig ist dies die Mitte des Bildschirms (0.5f, 0.5f). Sie können diesen Wert anpassen, um die Skalierung von einem anderen Punkt aus zu starten.

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 liefert das folgende Ergebnis:

popEnterTransition und popExitTransition steuern speziell Animationen, wenn der Back Stack beispielsweise mit einer Zurück-Geste aufgerufen wird. Du kannst auch enterTransition und exitTransition verwenden, um Animationen für das Aufrufen und Verlassen von Composables im Allgemeinen zu definieren, nicht nur für die intelligente „Zurück“-Geste. Wenn Sie nur enterTransition und exitTransition festlegen, werden sie sowohl für die reguläre Navigation als auch für das Entfernen des Back Stack verwendet. Mit popEnterTransition und popExitTransition kannst du jedoch unterschiedliche Animationen für die Rückwärtsnavigation erstellen.

Übergänge mit gemeinsam verwendeten Elementen einbinden

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

Informationen zur Verwendung freigegebener Elemente mit Navigation Compose finden Sie unter Intelligente „Zurück“-Geste mit freigegebenen Elementen.

Unterstützung der intelligenten „Zurück“-Geste mit Material Compose-Komponenten

Viele Komponenten in der Material Compose-Bibliothek sind so konzipiert, dass sie nahtlos mit intelligenten „Zurück“-Touchgesten funktionieren. Wenn Sie die Animationen für die intelligente „Zurück“-Geste in diesen Komponenten 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 Design-Komponenten, die Animationen für intelligente „Zurück“-Gesten unterstützen, gehören:

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

SearchBar und ModalBottomSheet werden automatisch mit intelligenten „Zurück“-Touchgesten animiert. Für ModalNavigationDrawer, ModalDrawerSheet, DismissibleDrawerSheet und DismissibleNavigationDrawer musst du den drawerState an die jeweiligen Composables für den Blattinhalt übergeben.

Animation für die intelligente „Zurück“-Touchgeste testen

Wenn du noch Android 13 oder Android 14 verwendest, kannst du die Animation „Zurück 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“-Touchgeste aus.
3. Starten Sie die aktualisierte App und verwenden Sie die „Zurück“-Touchgeste, um sie in Aktion zu sehen.

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

Zusätzliche Ressourcen

• Codelab „Animationen für intelligente ‚Zurück‘-Gesten hinzufügen“
• Video: Erweiterte Layoutanimationen in Compose