Unterstützung für vorausschauende Zurück-Animationen hinzufügen

Wenn Sie die System-Back-APIs verwenden, können Sie In-App-Animationen aktivieren und benutzerdefinierte Übergänge unterstützen.

Video 1 : Animationen für die intelligente „Zurück“-Geste

Nachdem Sie die Funktion aktiviert haben, werden in Ihrer App Animationen für den Wechsel zum Startbildschirm, zwischen Aktivitäten und zwischen Aufgaben angezeigt.

Das Video zeigt ein kurzes Beispiel für intelligente „Zurück“-Geste-Animationen für den Wechsel zwischen Aktivitäten und den Startbildschirm in den Android-Einstellungen.

  1. In der Animation wischt der Nutzer zurück, um zum vorherigen Einstellungsbildschirm zurückzukehren. Dies ist ein Beispiel für eine aktivitätsübergreifende Animation.
  2. Auf dem vorherigen Bildschirm wischt der Nutzer nun ein zweites Mal zurück und sieht eine Vorschau des Startbildschirms mit seinem Hintergrundbild – ein Beispiel für die Animation „Zurück zum Startbildschirm“.
  3. Der Nutzer wischt weiter nach rechts. Es wird eine Animation angezeigt, in der das Fenster auf das Symbol auf dem Startbildschirm verkleinert wird.
  4. Der Nutzer ist nun vollständig zum Startbildschirm zurückgekehrt.

Weitere Informationen zum Hinzufügen von Unterstützung für vorhersagende Zurück-Gesten

Benutzerdefinierte In-App-Übergänge und ‑Animationen hinzufügen

Mit Compose oder Views können Sie benutzerdefinierte In-App-Property-Animationen und ‑Übergänge, benutzerdefinierte aktivitätsübergreifende Animationen und benutzerdefinierte fragmentübergreifende Animationen mit vorhersagenden Rückwärtsgesten erstellen. Informationen zum Erstellen von Übergängen mit Views finden Sie unter Unterstützung für die intelligente „Zurück“-Geste in Views hinzufügen.

Benutzerdefinierte Übergänge in Jetpack Compose hinzufügen

Mit PredictiveBackHandler können Sie Vorhersage-Gesten für das Zurückgehen in Jetpack Compose verarbeiten, um benutzerdefinierte In-App-Übergänge zu erstellen. Diese Funktion ist in androidx.activity:activity-compose:1.8.0-alpha01 oder höher verfügbar.

PredictiveBackHandler stellt eine Callback-Lambda-Funktion bereit, die ein Flow<BackEventCompat> verfügbar macht, das Ereignisse ausgibt, wenn der Nutzer vom Rand zurückwischt. Diese Ereignisse liefern Informationen zur Berührungsposition des Nutzers, zur Wischkante und vor allem zu progress, die verwendet werden können, um Komponenten im Rahmen der Verarbeitung der Zurück-Geste zu animieren.

Das folgende Snippet zeigt ein Beispiel für die Verwendung von PredictiveBackHandler, um eine Surface zu animieren, die mit dem Fortschritt der Geste verkleinert und entfernt wird:

@Composable
fun DetailScreen(onBack: () -> Unit) {
    var scale by remember { mutableFloatStateOf(1f) }
    var xOffset by remember { mutableFloatStateOf(0f) }
    val scope = rememberCoroutineScope()

    PredictiveBackHandler { progressFlow ->
        try {
            progressFlow.collectLatest { backEvent ->
                scale = 1f - backEvent.progress
                xOffset = backEvent.progress * 100f
            }
            // User completed gesture.
            onBack()
        } catch (e: CancellationException) {
            // User cancelled gesture.
            // Animate scale and xOffset back to 1f and 0f respectively.
            scope.launch {
                animate(scale, 1f) { value, _ -> scale = value }
            }
            scope.launch {
                animate(xOffset, 0f) { value, _ -> xOffset = value }
            }
        }
    }
    Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Surface(
            modifier = Modifier
                .size(200.dp)
                .scale(scale)
                .offset { IntOffset(x = xOffset.dp.roundToPx(), y = 0) },
            color = Color.Blue
        ) {}
    }
}