Tiroir de navigation
Le code de cette recette est disponible ici.
- Navigation d'abord
- ModalNavigationDrawer
- Hamburger
- Le tiroir
- Explorer le code
On doit d'abord mettre en place la navigation tel que décrit dans la recette Navigation avec JetPack Compose:
- Ajouter la dépendance dans le fichier
build.gradle.kts - Définir les routes dans le fichier
MainActivity.kt - Utiliser les routes dans le
setContentde l'activité
La fonction composable ModalNavigationDrawer permet de créer un contenant:
- intéragit avec un drawerState qui permet d'ouvrir / fermer le tiroir
- prend un drawerContent qui sera l'objet graphique qui disparaît à gauche
- on va passer le navController au tiroir pour permettre de naviguer sur les clicks
- le contenu du
ModalNavigationDrawersera ce qui s'affiche à l'écran
Le hamburger est l'icône qui permet d'ouvrir le tiroir de navigation (trois barres horizontales, comme le pain, le steak et le pain d'un hamburger). Il est généralement placé dans la barre d'action en haut de l'écran.
- la convention veut qu'on mette le hamburger en haut à gauche dans le topbar
IconButtonnous permet d'avoir un bouton avec l'icône de hamburger- drawerState permet d'ouvrir le tiroir avec
drawerState.open()
Le tiroir va être une fonction composable qu'on peut réutiliser dans plusieurs écrans.
La fonction va être ici ModalDrawerSheet avec des NavigationDrawerItem dedans:
- prend en paramètre le navController pour déclencher les navigations
- la fonction fermerTiroir permet d'intéragir avec le drawerState défini un niveau plus haut
- ModalDrawerSheet : permet de créer un tiroir qui peut être ouvert et fermé
- NavigationDrawerItem : permet de créer un item de menu dans le tiroir
On t'encourage à explorer le code de l'application pour voir comment tous ces éléments intéragissent.
Ajoute des points d'arrêt dans le code pour voir comment la navigation fonctionne en temps réel.
Le code de cette recette est disponible ici.