Gérez la navigation et les formulaires sur iOS

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 apparencesStandardetScroll Edgedans 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

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... 

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.

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 champ  Class  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.