Dans le chapitre précédent, nous avons installé notre navigation controller dans le storyboard, et nous avons supprimé le view controller qui était proposé avec par défaut.
Nous allons maintenant ajouter un ViewController
tout simple dont vous avez l'habitude.
Ajout du rootviewcontroller
Vous pouvez trouver le ViewController
dans la bibliothèque des composants :
Glissez-le dans le storyboard à côté de votre Navigation Controller. Maintenant votre storyboard doit ressembler à ceci :
Il nous faut maintenant relier le Navigation Controller et notre View Controller. L'idée, c'est de faire comprendre au Navigation Controller que le premier contrôleur à afficher, c'est notre contrôleur, ici à droite.
Pour faire cela, nous ressortons notre fameux control drag ! Laissez la touche control enfoncée, et faites un glisser-déposer depuis le contrôleur de navigation vers notre contrôleur. La pop-up suivante apparaît :
Cette pop-up nous demande le type de relation que l'on souhaite créer entre les deux contrôleurs. Choisissez rootviewcontroller
pour signifier que le contrôleur racine, le premier dans la pile de navigation, c'est le contrôleur que nous venons d'ajouter dans le storyboard.
Lorsque la connexion est faite, elle est matérialisée par la flèche entre les deux contrôleurs, et notre contrôleur est maintenant doté d'une jolie petite barre de navigation.
Personnalisez la barre de navigation
Il est temps maintenant de créer notre première interface dans le contrôleur que nous venons de rajouter.
Vous avez toutes les images et connaissances nécessaires pour y arriver seul, donc je vous laisse faire.
Bien sûr, je ne vais pas vous laisser tout seul pour la customisation de la barre de navigation. Laissez-moi vous montrer !
Pour ajouter un titre dans la barre, sélectionnez dans le ViewController Navigation Item
:
Puis dans l'inspecteur d'attributs, modifiez la propriété Title
.
Ensuite, pour modifier l'aspect de la barre de navigation, cela se passe du côté du UINavigationController
puisque, comme on l'a vu, c'est lui qui gère cette vue. Sélectionnez Navigation Bar
dans le Navigation Controller.
Ensuite, il vous faudra modifier l’apparence de la barre de navigation. Depuis Xcode 13, Apple a légèrement revu le procédé, et cela nécessite quelques manipulations.
Tout d’abord, cochez les apparencesStandard
etScroll Edge
dans l’inspecteur d’attributs. Puis changez la propriété Background
dans les sections Standard Appearance
et Scroll Edge Appearance
.
Créez une sous-classe de ViewController
OK, c'est beau. Mais comment on va faire fonctionner ce contrôleur ? On a supprimé le fichier ViewController.swift !
Ah la boulette ! Ne vous inquiétez pas, tout était calculé.
Je vous propose de créer un nouveau contrôleur. Pour cela, allez dans File > New > File... ou cmd + n . Choisissez ensuite Cocoa Touch Class
puis cliquez sur Next.
Ensuite, nommez votre classe WelcomeViewController
, et faites-en une sous-classe de UIViewController
. Vous pouvez cliquer sur next puis create pour créer le fichier WelcomeViewController.swift
.
Et voilà ! Votre fichier est créé et nous avons une nouvelle classe WelcomeViewController
!
Il suffit maintenant de faire le lien avec notre contrôleur dans le storyboard. Pour cela, sélectionnez le contrôleur dans le storyboard. Puis, dans les utilitaires, ouvrez l'inspecteur d'identité (troisième onglet) :
Dans le champ Class
, écrivez le nom de notre classe nouvellement créée : WelcomeViewController
. Maintenant, notre contrôleur est de type WelcomeViewController
, et le lien entre le contrôleur dans le storyboard et celui dans le code est fait !
Le contrôleur initial
Nous avons bien travaillé ! Et je vous connais, c'est le moment où vous adorez lancer votre application dans le simulateur pour voir que tout marche bien. Alors, allez-y ! Vous n’allez pas être déçu...
Mais... Mais mon écran est tout noir ! L'appli ne se lance pas.
Haha ! Quel coquin je fais à vous tendre des pièges comme ça ! Sacré moi !
Il se trouve que lorsque votre application iPhone se lance, il lui faut savoir quelle page afficher en premier.
D'abord, elle recherche le bon storyboard. Dans notre cas, c'est facile, il n'y en a qu'un. Ensuite dans le storyboard, elle recherche le contrôleur marqué comme étant le contrôleur initial. Par défaut, c'est celui qu'on a supprimé au début de chapitre précédent. Du coup, l'application ne trouve pas la page initiale, et donc elle affiche un écran blanc.
Oups...
Mais pas de panique, on va régler ça. Ici, notre contrôleur initial, c'est le navigation controller. Sélectionnez-le dans le storyboard. Puis rendez-vous dans l'inspecteur d'attributs, et cochez la propriété Is Initial View Controller
.
Et voilà ! Vous pouvez vérifier que cela a fonctionné en lançant votre simulateur, ou simplement en vérifiant qu'une flèche est apparue sur la gauche de votre Navigation Controller.
En résumé
Avec un control drag, vous pouvez sélectionner le contrôleur racine de votre pile de navigation.
Pour personnaliser la barre de navigation, il vous faut sélectionner la Navigation Bar de votre Navigation Controller. Et ensuite, ça se passe comme d'habitude dans l'inspecteur d'attributs.
Quand vous créez un nouveau contrôleur, il faut le créer dans le storyboard et dans le code en créant une sous-classe de
UIViewController
. Ensuite, pour les relier, il faut utiliser le champClass
dans l'inspecteur d'identité.Votre storyboard doit contenir au moins un contrôleur initial, qui sera la première page ouverte par votre application.
Dans le prochain chapitre, nous allons créer notre deuxième page, et vous allez créer votre toute première expérience de navigation entre deux pages.