fabernovel loader

Lightning talks: 6 étapes à suivre pour utiliser Google's Navigation Architecture Component (Android)

FRONT
MOBILE
fabernovel loader
Toute navigation au sein d’une app mobile doit être pensée pour proposer une expérience homogène et prévisible pour les utilisateurs. Voici une synthèse des 6 étapes à suivre pour utiliser Google's Navigation Architecture Component qui a été conçu pour remettre à plat la navigation sous Android.

Il faut prendre en compte quatre règles pour une navigation homogène et prévisible : 1/ une activité est un point d’entrée dans l’application, dont les écrans sont des fragments. 2/ Contrairement au bouton “Back”, le bouton « Up » ne doit pas faire quitter l’application. 3/ Au sein de l’app, les boutons « Up » et « Back » ont le même comportement (sauf pour l’écran d’entrée de l’application qui est fermé par le bouton Back). 4/ le Deeplink vers une activité doit présenter le même historique de navigation que si l’on y accède par une navigation classique.

On commence par ajouter la librairie (app/build.gradle).

Le composant repose sur un graphe de navigation (app/src/main/res/navigation/main_graph.xml). C’est un fichier XML dont une version graphique est disponible sous Android Studio > 3.2. Il y a un graphe par activité.

Afin que la navigation au sein de l’activité suive le parcours défini, il faut hoster le graphe au sein de l’activité : app/src/main/res/layout/activity_main.xml. Pour naviguer entre les écrans, le composant (la librairie) propose trois possibilités.

1/ Avec un click, cf app/src/main/java/com/example/applidium/navcontroller/HomeFragment.kt ;
2/ En récupérant le `NavController` à l’aide du fragment app/src/main/java/com/example/applidium/navcontroller/FormFragment.kt
3/ En récupérant le `NavController` à l’aide de la vue app/src/main/java/com/example/applidium/navcontroller/RandomFragment.kt
Enfin, on peut simplifier l’utilisation d’une NavigationView en utilisant les mêmes id des éléments du menu de la `NavigationView` (menu/bottom_navigation_menu.xml) et des fragments du graphe. (cf MainActivity)

Pour passer des arguments entre les écrans, il y a deux façons de faire. On peut utiliser un `Bundle` comme ici, ou une extension du composant, les `Safe-args` : on ajoute safe-args au build.gradle. Il faut   déclarer le type des arguments dans le graphe pour vérifier le type et la nullité des arguments lors du passage entre les écrans. Pour se faire, deux types de classes sont générés

  • Passage des arguments :
$SRC_FRAGMENT_NAME$Directions.$ACTION_NAME$(...arguments..)
  • Récupération des arguments :
$DST_FRAGMENT_NAME$Args.fromBundle(arguments...)

Enfin, la 6ème et dernière étape si l’on veut faire des transitions, consiste à déclarer les transitions dans le graphe :
– app:enterAnim: lorsque l’on navigue vers le fragment
– app:exitAnim: lorsque qu’on navigate du fragment vers une destination
– app:popEnterAnim: lorsque « Back/Up » est appuyé depuis le fragment suivant
– app:popExitAnim: lorsque « Back/Up » est appuyé depuis ce fragment

Ressources :

Architecture Components – Repository: https://github.com/sjcqs/navigation-component-demo

Documentation : https://developer.android.com/topic/libraries/architecture/navigation/

Ce sujet vous intéresse et vous souhaitez en discuter avec nous ?

Contactez-nous
à lire
BACK
MÉTHODOLOGIE
Comment coderons-nous demain ?

Comment coderons-nous demain ? En tirant les leçons du passé et en cherchant à conjuguer le meilleur des deux mondes. Le développement applicatif a réussi le tour de force de reste ...

Notre recette de back end

Avant de vous lancer dans la lecture de cet article, jetez un œil à votre smartphone et vos applications favorites. Qu’ont-elles toutes en commun ? Essayez d’activer le mode avion. ...