• 12 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 2/26/20

Créez votre première page

Log in or subscribe for free to enjoy all this course has to offer!

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 :

ViewController dans la bibliothèque des composants

Glissez-le dans le storyboard à côté de votre navigation controller. Maintenant votre storyboard doit ressembler à ceci :

ViewController dans le storyboard

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 :

Segue popup

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 venions d'ajouter dans le storyboard.

Lorsque la connection 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.

NavigationVC et VC connectés

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. Le résultat final doit ressembler à ceci :

Interface designée

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 :

Navigation Item

Puis dans l'inspecteur d'attribut, modifiez la propriété Title.

Navigation item inspecteur d'attributs

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.

Et ensuite, vous pouvez modifier tout ce que vous voulez du côté de l'inspecteur d'attribut, notamment la couleur de la barre avec la propriété Bar Tint et la couleur du titre avec la propriété Title Color.

Et voilà, vous avez une belle barre de navigation ! :D

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 blanc ! L'appli ne se lance pas.

Haha ! Quel coquin je fais à vous tendre des pièges comme ça ! Sacré moi ! :D

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

Example of certificate of achievement
Example of certificate of achievement