C'est parti ! On va tout de suite ajouter une barre de navigation qui va nous permettre, comme son nom l'indique, de naviguer entre plusieurs pages.
Oui, mais c'est quoi une barre de navigation ?
Ah oui, bien vu ! Une barre de navigation dans iOS a deux styles différents, avec un titre large ou sans titre large :
C'est la barre que vous avez très souvent en haut de votre application, et qui vous permet de revenir à la page précédente. Souvent, elle contient un titre comme "Browse", ou “On My iPhone”, ici, et parfois un ou plusieurs boutons, comme le bouton avec les trois petits points.
C'est plus clair ? Alors, allons-y !
Faire place nette
Et pour démarrer vraiment de zéro, nous allons supprimer le ViewController qu'Xcode a déjà créé pour vous.
Commencez par supprimer le fichier ViewController.swift en faisant clic droit puis Delete. Choisissez ensuite l'option Move to trash dans la pop-up.
Ensuite, rendez-vous dans le storyboard et supprimez le ViewController qui s'y trouve. Votre storyboard ne contient plus rien ! On va pouvoir travailler sereinement.
Présentation de la classe UINavigationController
Pour ajouter une barre de navigation, il faut ajouter ce qu'on appelle un UINavigationController . Cette classe est un contrôleur. Et comme tout contrôleur qui se respecte, son rôle est de gérer une vue. Et pour un navigation controller, cette vue est un peu particulière. Elle est composée de deux sous-vues, comme le présente le schéma ci-dessous :
On peut se représenter leUINavigationControllercomme un cadre photo numérique qui contient en haut une petite barre de navigation, et à l'intérieur, des photos qui défilent les unes après les autres. Ces photos sont en fait des ViewController qui correspondent chacun à une page de notre application.
La pile de navigation
Dans notre navigation controller, les ViewController vont donc défiler en suivant une logique précise, celle d'une pile.
Lorsque vous passez de la page A à la page B, la page B vient se rajouter par-dessus la page A. Même chose, si vous passez à la page C, elle vient se mettre par-dessus la page B. Et comme vous pouvez le voir dans le schéma ci-dessous, cela forme donc une pile.
Un navigation controller a donc pour rôle de gérer cette pile qui peut contenir en même temps plusieurs ViewControllers, mais n'en afficher qu'un seul à l'écran.
Cela se traduit dans le code par la propriété viewControllers de la classe UINavigationController qui est un tableau de type ViewController , et qui contient tous les contrôleurs présents dans la pile de navigation, rangés par ordre de présentation.
Ajout du navigation controller
Assez de théorie ! Ajoutons maintenant notre UINavigationController . Pour cela, il vous suffit de vous rendre dans la bibliothèque des objets en cliquant sur le bouton + en haut à droite, et de sélectionner un UINavigationController .
Vous n'avez plus qu'à le faire glisser dans le storyboard, et vous devriez obtenir ceci :
Sur la gauche, vous avez le navigation controller qui est déjà lié à un premier ViewController de type Table View Controller visible sur la droite. Ce deuxième contrôleur permet d'ajouter des listes ; nous verrons cela dans un prochain cours, donc vous pouvez le supprimer pour le moment.
En résumé
Pour ajouter une barre de navigation, on utilise un navigation controller.
Un navigation controller gère une vue qui contient une barre de navigation, et une vue conteneur dans laquelle défilent les pages de l'application.
Un navigation controller a pour rôle de gérer une pile qui peut contenir plusieurs ViewControllers, mais n'en afficher qu'un seul à l'écran.
On peut ajouter un navigation controller en le glissant depuis la bibliothèque des objets dans le storyboard.
Dans le prochain chapitre, nous allons créer la première page que présentera notre navigation controller !
