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

Wenn du die System-Back-APIs verwendest, kannst du In-App-Animationen aktivieren und benutzerdefinierte Übergänge unterstützen.

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

Nach der Aktivierung werden in deiner App Animationen für die Rückkehr zum Startbildschirm, den Wechsel zwischen Aktivitäten und den Wechsel zwischen Aufgaben angezeigt.

Das Video zeigt ein kurzes Beispiel für intelligente „Zurück“-Gesten für den Wechsel zwischen Aktivitäten und die Rückkehr zum Startbildschirm in der Android-Einstellungen-App.

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

Weitere Informationen zum Hinzufügen von Unterstützung für intelligente „Zurück“-Touchgesten

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

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

Benutzerdefinierte Übergänge in Jetpack Compose hinzufügen

Mit PredictiveBackHandler können Sie intelligente „Zurück“-Touchgesten 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 einen Callback-Lambda-Ausdruck bereit, der ein Flow<BackEventCompat>-Objekt 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, mit dem Komponenten im Rahmen der Verarbeitung der Zurück-Geste animiert werden können.

Das folgende Snippet zeigt ein Beispiel für die Verwendung von PredictiveBackHandler, um ein Surface zu animieren, das mit dem Fortschritt der Geste verkleinert und wegbewegt 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
        ) {}
    }
}