Ajouter la prise en charge des animations pour la prévisualisation du Retour

Lorsque vous utilisez les API du système pour le Retour, vous pouvez choisir d'afficher des animations dans l'application et de prendre en charge les transitions personnalisées.

Une fois cette option activée, votre application affiche des animations multi-activités, multitâches et de retour à l'écran d'accueil.

La vidéo présente un court exemple d'animations de prévisualisation du Retour dans le cadre du passage d'une activité à une autre ou du retour à l'écran d'accueil et pour l'application Paramètres d'Android.

1. Dans l'animation, l'utilisateur balaie l'écran vers l'arrière pour retourner à l'écran de paramètres précédent. C'est un exemple d'animation multi-activité.
2. De retour à l'écran précédent, l'utilisateur commence à balayer l'écran une deuxième fois vers l'arrière pour afficher un aperçu de l'écran d'accueil avec son fond d'écran. C'est un exemple d'animation de retour à l'écran d'accueil.
3. L'utilisateur continue de balayer l'écran vers la droite. S'affiche alors une animation de la fenêtre qui rétrécit jusqu'à devenir l'icône de l'écran d'accueil.
4. L'utilisateur est à présent pleinement de retour à l'écran d'accueil.

Découvrez comment ajouter la compatibilité de la prévisualisation des gestes Retour.

Ajouter des animations et des transitions personnalisées aux applications

Vous pouvez créer des animations et des transitions de propriétés intégrées à l'application, des animations multi-activités personnalisées et des animations multi-fragments personnalisées avec des gestes de prévisualisation du Retour.

Ajouter des transitions personnalisées dans Jetpack Compose

Vous pouvez utiliser PredictiveBackHandler pour gérer les gestes de prévisualisation du Retour dans Jetpack Compose afin de créer des transitions personnalisées dans l'application. Cette fonctionnalité est disponible dans androidx.activity:activity-compose:1.8.0-alpha01 ou version ultérieure.

PredictiveBackHandler fournit un lambda de rappel qui expose un Flow<BackEventCompat> qui émet des événements lorsque l'utilisateur balaye l'écran vers l'arrière depuis le bord. Ces événements fournissent des informations sur la position du doigt de l'utilisateur, le bord du balayage et, surtout, progress, qui peuvent être utilisées pour animer les composants lors de la gestion du geste Retour.

L'extrait suivant montre comment utiliser PredictiveBackHandler pour animer une Surface qui se réduit et s'éloigne en fonction de la progression du geste :

@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
        ) {}
    }
}