Navigation

La bibliothèque JetPack Navigation va nous permettre de gérer le chemin de l'utilisateur à travers les différents écrans de l'application. La bibliothèque nous permet d'abstraire toute la complexité liée à ce concept en utilisant des mécaniques de génération de code. Cela va donc simplifier beaucoup pour le développeur :

• La gestion de la pile des écrans
• La nagivation arrière
• Le passage des arguments
• Les animations de transition

On va donc pouvoir tisser les liens entre les écrans utilisée une interface d'Android studio qui ressemble un peu à ce qu'on pourrait retrouver sur des applications de conception graphique appelé le Navigation Graph :

Utilisation de la naviation

Créer les Fragments

Pour commencer nous allons créer nos différents écrans sous la forme de Fragments. Un fragment est un compostant d'interface graphique que nous allons utiliser à la manière d'une page de notre application. Nous allons avoir besoin de deux écrans : un pour afficher notre liste de Todos, et un pour afficher les détails d'un Todo. Dans le package view faites Clic droit > New > Fragment > Blank Fragment :

Cela vous nous créer deux fichiers :

• TodoListFramgent.java : le fichier "code behind" de notre Fragment, qui va permettre de décrire la logique propre à l'interface graphique
• fragment_todo_list.xml : le fichier de Layout, qui va décrire déclarativement, comme un template, notre interface graphique.

Dans TodoListFramgent vous pouvez supprimer toutes les méthodes et commentaires à l'exception de onCreateView. Ils ne seront pas utiles pour l'instant et on y voit plus clair :

public class TodoListFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        ... 
    }
}

La méthode onCreateView est appelée par le framework lorsqu'il va initialiser notre Fragment. Elle contient pour l'instant que la ligne suivante :

return inflater.inflate(R.layout.fragment_todo_list, container, false);

Cette ligne va inflate ( = gonfler en anglais ) notre fichier de Layout XML afin de le transformer en objet Java contenant notre vue.

Répétez l'opération pour créer un fragment pour le détail d'un Todo. Vous pouvez également modifier la valeur des TextView dans chacun des Layouts de nos Fragment par "Hello List Fragment" et "Hello Detail Fragement" afin de pouvoir les différencier quand on testera la Navigation.

Créer la navigation

On va maintenant créer la navigation. Sur le dossier res faites Clic doit > New > Android Resource File :

N'oubliez pas de séléctionner le Type de ressource "Navigation" :

On a donc maintenant notre interface de conception de Navigation. Cependant elle n'est pas encore connectée à notre application. Nous allons devoir configurer notre MainActivity comme hôte de notre navigation. Pour ce faire, ouvrez le fichier de Layout de notre MainActivity situé à res/layout/activity_main.xml. Dans l'interface de conception, cherchez un controle appelé NavHostFragment :

Remplacez le texte "Hello World!" par ce controle. Un graphe de navigation vous est demandé, choisissez celui que nous venont de créer : todo_navigation. Ensuite, utilisez le bouton "Infer Constraint" pour configurer autmatiquement les contraintes du Constraints Layout, sur lequel nous reviendrons plus en détail plus tard :

Ainsi, en revenant sur notre Navigation (en rouvrant res/navigation/todo_navigation.xml) on peut constaté que notre Activity a bien été ajoutée comme hôte. On peut désormais ajouter nos fragment à notre navigation :

Et les connecter entre eux par drag & drop :

Vous pouvez séléctionner la flèche et changer son id dans l'éditeur graphique par quelquechose de plus court que ce qui a été mis par défaut, par exemple actionDetail. Enfin pour activer la génération du code correspondant lancez le Build de votre projet. Cela va nous permettre d'utiliser la navigation dans notre code pour pouvoir effectivement naviguer.

Pour ce faire, ajout un Button dans le layout de votre TodoListFragment et créez dans son code behing une méthode telle que :

public void navigateToDetail(View button) {

}

Il faut maintenant lier notre méthode à l'événement de notre bouton : Pour ce faire, donnons un android:id à notre Button afin de pouvoir la récupérer :

<Button
          android:id="@+id/button"
          ....
/>

Ensuite on peut récupérer le Button à l'aide de la bibliothèque ButterKnife :

@BindView(R.id.button)
public Button button;

Il faut aussi changer notre onCreateView comme suit avant d'activer ButterKnife pour ce Fragment :

public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
  View view = inflater.inflate(R.layout.fragment_todo_list, container, false);
  ButterKnife.bind(this,view);
  return view;
}

On va maintenant dans notre TodoDetailFragment override une nouvelle méthode, onViewCreated, qui va être appelée par le framework juste après la création du Fragment. C'est là qu'on va lié notre événement :

@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
  button.setOnClickListener(this::navigateToDetail);
}

On peut ensuite rajouter dans la méthode le code de navigation :

Navigation.findNavController(button).navigate(TodoListFragmentDirections.actionDetail());

On récupère le controleur de navigation du Framework, et on lui passe l'action de navigation qui a été générée. Vous pouvez maintenant lancer votre app sur un terminal (physique ou émulé) pour tester tout ça.

Navigation avec des arguments

Dans l'UI de navigation, en cliquant sur un écran, vous pouvez le configurer. Dans le menu de configuration de votre écran vous pouvez ajouter un argument.

On doit maintenant modifier notre code pour gérer le passage de l'argument, mais d'abord il faut build notre projet pour mettre à jours le code généré. Voici comment rajouter le passage de l'argument, il suffit de le passer en paramètre à notre action :

TodoListFragmentDirections.ActionDetail actionDetail = TodoListFragmentDirections.actionDetail(UUID.randomUUID().toString());
Navigation.findNavController(button).navigate(actionDetail);

Nous allons ensuite récupérer et afficher notre UUID dans le DetailFragment. Pour ce faire, donnons un android:id à notre TextView afin de pouvoir la récupérer :

<TextView
          android:id="@+id/detailTextView"
          ....
/>

Ensuite on peut récupérer la TextView à l'aide de la bibliothèque ButterKnife :

@BindView(R.id.detailTextView)
public TextView textView;

Il faut aussi changer notre onCreateView comme suit avant d'activer ButterKnife pour ce Fragment :

public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
  View view = inflater.inflate(R.layout.fragment_todo_detail, container, false);
  ButterKnife.bind(this,view);
  return view;
}

On va maintenant dans notre TodoDetailFragment override une nouvelle méthode, onViewCreated, qui va être appelée par le framework juste après la création du Fragment. C'est là qu'on va récupérer notre argument :

@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
  if(getArguments() != null){
    String uuid = TodoDetailFragmentArgs.fromBundle(getArguments()).getTodoId();
    textView.setText(uuid);
  }
}

Résultat :

Animations de navigation

Dans l'UI de navigation, en cliquant sur votre action (la flèche) vous pouvez la configurer. Dans le menu de configuration de votre action, vous pouvez configurer des animations. Il y a en a plusieurs proposées par défaut, vous pouvez en choisir et tester le résultat :

Vous pouvez en créer des customisées mais c'est hors de la scope de ce tuto.