• 12 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 26/02/2020

Ajoutez une barre de navigation

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

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 ! Alors une barre de navigation, c'est ça :

 Une barre de navigation

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 "Light" ici et parfois un ou plusieurs boutons comme le bouton edit.

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 :

Navigation Controller

La vue du UINavigationController contient une barre de navigation dont nous avons déjà parlé, et une vue conteneur qui a pour but unique d'afficher une page de votre application.

On peut se représenter le UINavigationController comme 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.

Pile de navigation

Un navigation controller a donc pour rôle de gérer cette pile qui peut contenir en même temps plusieurs ViewController, 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 bas à droite et de sélectionner un UINavigationController.

Navigation Controller dans la bibliothèque des composants

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éfile les pages de l'application.

  • Un navigation controller a pour rôle de gérer une pile qui peut contenir plusieurs ViewController, 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 !

Exemple de certificat de réussite
Exemple de certificat de réussite