• 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

Créez votre première page

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

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 :

Le ViewController dans la bibliothèque des composants
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 :

À gauche le Navigation Controller et à droite un interface vide
Navigation Controller et View Controller

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 :

Sélection de root view controller dans une pop up
Root view controller

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.

Interface de connexion entre les deux contrôleurs
Connexion entre les deux contrôleurs

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.

Interface Miawouf avec le bouton Go !
Le résultat final doit ressembler à ceci

Vous avez toutes les images et connaissances nécessaires pour y arriver seul, donc je vous laisse faire.

Interface pour permettre l'ajout de l'image
Ajout de l'image "Paw"

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  :

Sélection de Navigation Item dans le ViewController
Navigation Item

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

Dans le menu Navigation Item, le champ Title indique Welcome
Welcome !

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.

Sélection de Navigation Bar dans le Navigation Controller
Navigation Bar

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  .

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

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.

Sélection du template Cocoa Touch Class
Sélectionnez le template Cocoa Touch Class

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  .

Création du WelcomeViewController
Création du WelcomeViewController

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 !

Dans le menu Custom Class, le champ Class indique WelcomeViewController. Le champ Module indique Miawouf et la case Inherit Module From Target est cochée
WelcomeViewController

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  .

Le menu View Controller : en bas du champs Title, Is Initial View Controller est coché.
View Controller Title

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.

Une flèche apparaît à gauche du Navigation Controller
Une flèche apparaît à gauche du 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.

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