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 retour arrière compatibles.

Animation de prévisualisation du Retour à l'écran d'accueil
Animation de prévisualisation multi-activités.
Animation prédictive entre les tâches.

Activer les animations système par défaut

Les animations système multi-activités, multitâches et de retour à l'écran d'accueil 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.
  • Entre activités : transitions entre les activités de l'application.
  • Multitâche : transitions entre les tâches.

Ces animations sont activées par défaut sur Android 15 ou version ultérieure. 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 bibliothèque navigation-compose 2.8.0 ou une version ultérieure.

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

Figure 2. Animation de fondu enchaîné par défaut dans l'application SociaLite.

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'é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,
)

Ce code produit le résultat suivant :

Figure 3. Animation personnalisée dans l'application SociaLite.

popEnterTransition et popExitTransition contrôlent spécifiquement les animations lors de l'affichage de la pile "Retour", par exemple avec un geste Retour. Vous pouvez également utiliser enterTransition et exitTransition pour définir des animations d'entrée et de sortie des composables en général, et pas seulement pour le retour prédictif. Si vous ne définissez que enterTransition et exitTransition, ils sont utilisés à la fois pour la navigation standard et pour l'affichage de la pile "Retour". Toutefois, l'utilisation de popEnterTransition et de 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 fournissent une connexion visuelle fluide entre les composables avec du contenu partagé, souvent utilisées pour la navigation.

Figure 4. Transition d'élément partagé avec prévisualisation du Retour dans Navigation Compose.

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 fluide avec la prévisualisation du geste 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 compatibles avec les animations de la prévisualisation du Retour sont les suivants :

SearchBar et ModalBottomSheet s'animent automatiquement avec la prévisualisation du geste Retour. ModalNavigationDrawer, ModalDrawerSheet, DismissibleDrawerSheet et DismissibleNavigationDrawer nécessitent que vous transmettiez 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'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

Précédent
À propos de la prévisualisation du Retour
Suivant
Accéder manuellement à la progression