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

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

Nach der Aktivierung werden in Ihrer App Animationen für „Zurück zum Startbildschirm“, „Aktivitätenübergreifend“ und „Aufgabenübergreifend“ angezeigt.

Das Video zeigt ein kurzes Beispiel für intelligente „Zurück“-Animationen für „Aktivitätenübergreifend“ und „Zurück zum Startbildschirm“ mit der Android-App „Einstellungen“.

1. In der Animation wischt der Nutzer zurück, um zum vorherigen Einstellungsbildschirm zurückzukehren. Dies ist ein Beispiel für eine aktivitätenübergreifende Animation.
2. Auf dem vorherigen Bildschirm wischt der Nutzer ein zweites Mal zurück. Dabei wird eine Vorschau des Startbildschirms mit dem Hintergrundbild angezeigt. Dies ist ein Beispiel für die Animation „Zurück zum Startbildschirm“.
3. Der Nutzer wischt weiter nach rechts. Dabei wird eine Animation angezeigt, in der das Fenster auf das Symbol auf dem Startbildschirm verkleinert wird.
4. Der Nutzer ist jetzt 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

Sie können benutzerdefinierte In-App-Eigenschaftsanimationen und ‑Übergänge, benutzerdefinierte aktivitätenübergreifende Animationen und benutzerdefinierte fragmentübergreifende Animationen mit vorhersagenden Zurück-Gesten erstellen.

Benutzerdefinierte Übergänge in Jetpack Compose hinzufügen

Mit PredictiveBackHandler können Sie vorhersagende Zurück-Gesten 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 bietet ein Callback-Lambda, das ein Flow<BackEventCompat> verfügbar macht, das Ereignisse ausgibt, wenn der Nutzer vom Rand zurückwischt. Diese Ereignisse enthalten Informationen zur Touch-Position des Nutzers, zum Wischrand und vor allem zu progress. Mit dieser Eigenschaft können Komponenten animiert werden, um sie im Rahmen der Verarbeitung der Zurück-Geste zu entfernen.

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(x = xOffset.dp, y = 0.dp),
            color = Color.Blue
        ) {}
    }
}