Avec Jetpack Compose, Android abandonne les moyens implicites de se déplacer avec des transactions fragmentées, des navigations et des intentions pour les activités. De nos jours, l'application doit déclarer tous les chemins possibles que les utilisateurs peuvent emprunter au début.

Jetpack compose fournit une manière native de naviguer dans vos multiples composants. Avec NavHost et NavController, vous pouvez pousser ou faire apparaître vos composables selon vos besoins. Alors allons-y.

Dépendances

Tout d'abord, vous devrez ajouter une dépendance à votre projet. Pour obtenir la version actuelle, rendez-vous ici .

implementation "androidx.navigation:navigation-compose:2.5.3"

Mise en œuvre

Tout d'abord, NavHost et NavController sont introduits dans le projet.

NavHost héberge la déclaration des routes que les utilisateurs peuvent emprunter. NavController fournit une API pour se déplacer sur les routes déclarées. L'itinéraire est le chemin, qui est unique pour chaque écran/autre composable qui pourrait être affiché dans l'application.

Instanciation

NavController est instancié avec RememberNavController(), donc même lors de la reconstruction des composables, le NavController est le même.

Destination de départ

Le NavHost avec NavController et la destination de départ sont déclarés. La destination de départ est le nom de notre premier itinéraire d'écran.

Déclaration des itinéraires

Toutes les options sont déclarées où un utilisateur peut se déplacer. Les deux écrans doivent déclarer des itinéraires. Le nom de la route est unique car le NavController les utilisera pour identifier le prochain composable à afficher.

Tout composable peut être affiché via le navcontroller.navigate("route to composable").

Pour imiter le bouton de retour de l'utilisateur, le navcontroller.popBackStack() peut être utilisé. Cela fera apparaître le composable actuel de la pile de tous les composable.

La pile peut être vue comme un historique des composables/écrans, donc le premier écran est la racine et l'autre composable est placé dessus. Ainsi, en naviguant vers le deuxième écran, le deuxième écran est ajouté au-dessus de la pile. En sortant de la pile, le composable supérieur est supprimé.

Nettoyer

Pour être plus sujet aux erreurs à l'avenir, [aths devrait être déclaré plus proprement. Évitez donc d'ajouter des chaînes partout et créez le fichier autonome dans lequel vous placez toutes les routes de votre application. Ensuite, les constantes déclarées doivent être utilisées. Les fautes de frappe embarrassantes seront évitées à l'avenir. De plus, il fournit une vue plus descriptive de la structure de l'application.

Passer par plusieurs écrans et revenir à la racine

Désormais, l'ajout d'écrans ultérieurs à notre navigation est facile. Le NavHost doit être étendu d'un composant de plus, et les écrans doivent adopter plus de boutons pour se déplacer.

Le troisième écran contient un bouton qui ramène l'utilisateur au premier écran et nettoie tous les composants empilés.

Pour faire apparaître plusieurs composables dans la pile, navController.popBackStack("Screen where you want to stop the popping", inclusive: false) peut être utilisé.

Le paramètre inclusive nous indique si le composable ciblé doit également être supprimé. La suppression du premier écran entraînerait un écran vide, la valeur false est donc transmise.

Transmettre la valeur à l'écran

La plupart des applications souhaitent afficher des informations ou des données en fonction du choix précédent de l'utilisateur. Un autre écran doit savoir quoi afficher, donc la valeur doit être transmise.

Cela se fait en plaçant la valeur à l'intérieur de la route, de sorte que la valeur est encodée sous forme de chaîne, puis analysée sur un autre écran.

Déclaration

Tout d'abord, la route doit déclarer la présence de la valeur, ce qui se fait comme ceci :

const val SECOND_SCREEN = "SecondScreen/{customValue}"
// where the {customValue} is placeholder for the passed value

composable(
    Routes.SECOND_SCREEN,
    arguments = listOf(navArgument("customValue") {
        type = NavType.StringType
    })
) { backStackEntry ->
    ThirdScreen(
        navigation = navController,
        // callback to add new composable to backstack 
        // it contains the arguments field with our value
        textToShow = backStackEntry.arguments?.getString(
            "customValue", // key for our value
            "Default value" // default value
        )
    )
}

val valueToPass = "Information for next screen"
val routeToScreenWithValue = "SecondScreen/$valueToPass"
navigation.navigate(routeToScreenWithValue)

Le premier écran contient maintenant un champ de texte, dont le contenu est transmis au deuxième écran.

Ne transmettez pas de données complexes aux vues dans la navigation

Une seule valeur doit être transmise à la vue. D'autres données doivent être obtenues à l'aide du ViewModel ou d'une autre unité logique. Cela rendra votre code beaucoup plus propre et plus testable.

Par exemple, si vous souhaitez afficher des détails sur un produit ou un utilisateur, un ID doit être transmis à la vue uniquement. L'unité logique obtient l'ID et récupère des informations plus détaillées sur Internet ou dans une base de données. Les données sont ensuite transmises directement à la vue sans l'aide des composants de navigation.

Ressources:

En savoir plus sur le développement Android :