• 8 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 10/03/2022

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 ! Une barre de navigation dans iOS a deux styles différents, avec un titre large ou sans titre large :

La barre de navigation sur un iPhone sans titre large
La barre de navigation d'iPhone : avec Browse en titre large
Avec 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 :

Un interface de Navigation Controller.  En haut la Navigation Bar (Bouton Back + Title), en bas la Vue Conteneur.
Navigation Bar et Vue Conteneur

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.

Une pile de pages : Navigation Controller puis page A, B et C empilées
Une belle pile de pages !

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  .

Bibliothèque des objets avec tous les champs vides
Bibliothèque des objets
Sélection d'un Navigation Controller avec une description expliquant ce qu'est un Navigation Controller
Sélection d'un Navigation Controller

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.
Lien entre Navigation Controller et Table View Controller

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 !

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