Configurer la prévisualisation du Retour

La prévisualisation du Retour et les animations système sont activées par défaut. Si votre application intercepte l'événement "Retour" et que vous n'avez pas migré vers la prévisualisation du Retour, mettez à jour votre application pour utiliser les API de navigation Retour compatibles

Activer les animations système par défaut

Les animations système de retour à l'écran d'accueil, multi-activités et multitâches sont disponibles sur les appareils Android 15 et versions ultérieures pour les applications qui ont migré vers les API de gestion du Retour compatibles.

• Retour à l'écran d'accueil : renvoie l'utilisateur à l'écran d'accueil.
• Multi-activités : transitions entre les activités de l'application.
• Multitâches : transitions entre les tâches.

Ces animations sont activées par défaut sur Android 15 et versions ultérieures. Sur les appareils équipés d'Android 13 ou 14, les utilisateurs peuvent les activer via les options pour les développeurs.

Pour obtenir les animations système, mettez à jour votre dépendance AndroidX Activity vers la version 1.6.0 ou ultérieure.

Activer la prévisualisation du Retour avec Navigation Compose

Pour utiliser la prévisualisation du Retour dans Navigation Compose, assurez-vous d'utiliser la navigation-compose 2.8.0 bibliothèque ou version ultérieure.

Navigation Compose effectue automatiquement un fondu enchaîné entre les écrans lorsque l'utilisateur effectue un balayage vers l'arrière :

Lors de la navigation, vous pouvez créer des transitions personnalisées avec popEnterTransition et popExitTransition. Lorsqu'ils sont appliqués à votre NavHost, ces modificateurs vous permettent de définir l'animation des écrans d'entrée et de sortie. Vous pouvez les utiliser pour créer différents effets, tels que la mise à l'échelle, le fondu ou le glissement.

Dans cet exemple, scaleOut est utilisé dans popExitTransition pour réduire l'échelle de l'écran de sortie lorsque l'utilisateur revient en arrière. En outre, le paramètre transformOrigin détermine le point autour duquel l'animation de mise à l'échelle se produit. Par défaut, il s'agit du centre de l'écran (0.5f, 0.5f). Vous pouvez ajuster cette valeur pour que la mise à l'échelle commence à un autre endroit.

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

Ce code produit le résultat suivant :

popEnterTransition et popExitTransition contrôlent spécifiquement les animations lors de la suppression de la pile "Retour", par exemple avec un geste de retour. Vous pouvez également utiliser enterTransition et exitTransition pour définir des animations pour l'entrée et la sortie de composables en général, et pas seulement pour la prévisualisation du Retour. Si vous ne définissez que enterTransition et exitTransition, ils sont utilisés à la fois pour la navigation normale et pour la suppression de la pile "Retour". Toutefois, l'utilisation de popEnterTransition et popExitTransition vous permet de créer des animations distinctes pour le retour en arrière.

Intégrer des transitions d'éléments partagés

Les transitions d'éléments partagés offrent une connexion visuelle fluide entre les composables avec du contenu partagé, souvent utilisés pour la navigation.

Pour utiliser des éléments partagés avec Navigation Compose, consultez Prévisualisation du Retour avec des éléments partagés.

Prendre en charge la prévisualisation du Retour avec les composants Material Compose

De nombreux composants de la bibliothèque Material Compose sont conçus pour fonctionner de manière transparente avec les gestes de prévisualisation du Retour. Pour activer les animations de prévisualisation du Retour dans ces composants, incluez la dernière dépendance Material3 (androidx.compose.material3:material3-*:1.3.0 ou version ultérieure) dans votre projet.

Les composants Material qui prennent en charge les animations de prévisualisation du Retour incluent les suivants :

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

SearchBar et ModalBottomSheet s'animent automatiquement avec les gestes de prévisualisation du Retour. ModalNavigationDrawer, ModalDrawerSheet, DismissibleDrawerSheet et DismissibleNavigationDrawer vous obligent à transmettre le drawerState à leurs composables de contenu de feuille respectifs.

Tester l'animation de la prévisualisation du geste Retour

Si vous utilisez toujours Android 13 ou Android 14, vous pouvez tester l'animation de retour à l'écran d'accueil.

Pour tester cette animation, procédez comme suit :

1. Sur votre appareil, accédez à Paramètres > Système > Options pour les développeurs.
2. Sélectionnez Animations pour la prévisualisation du Retour.
3. Lancez votre application mise à jour et utilisez le geste Retour pour le voir en action.

Sur Android 15 et versions ultérieures, cette fonctionnalité est activée par défaut.

Ressources supplémentaires

• Atelier de programmation sur l'ajout d'animations pour la prévisualisation du Retour
• Vidéo sur les animations de mise en page avancées dans Compose