• 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 premier segue

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

Même si nous avons deux contrôleurs dans le storyboard, NavigationController et WelcomeViewController, cela ne fait jamais qu'une interface pour l'utilisateur. Il est temps d'en rajouter d'autres et de parler de navigation.

Ajout de la deuxième page

Nous allons ajouter la deuxième page de l'application qui va contenir le formulaire d'inscription. Nous allons appeler le contrôleur correspondant FormViewController. Je vous laisse créer la classe correspondante, puis faites glisser un contrôleur dans le storyboard et donnez-lui la classe FormViewController nouvellement créée. C'est exactement la même manipulation que pour le WelcomeViewController du chapitre précédent.

Maintenant, nous allons construire la base de l'interface. Nous allons juste rajouter le bouton Valider en bas. Le résultat doit ressembler à ceci :

Vous avez dit segue ?

Nous allons maintenant créer une première navigation. Lorsque l'utilisateur appuie sur le bouton Go !, on doit passer à la page du formulaire d'inscription.

Pour cela, nous allons créer ce qu'on appelle un segue.

Un segue, c'est un objet dans le storyboard qui permet de créer une transition entre deux pages. Et c'est exactement ce dont on a besoin. Et pour le créer, nous allons faire.... un control-drag !

1 point pour ceux qui sauront apprécier la référence...
1 point pour ceux qui sauront apprécier la référence...

Le control drag doit se faire entre le bouton qui initie la transition, ici notre bouton Go ! et le contrôleur qui doit être présenté, ici notre FormViewController.

Allez-y !

Lorsque vous relâchez, une pop-up apparaît et vous propose plusieurs types de segues différents. Détaillons-les !

Présentation des différentes catégories de segue

Il y a 5 types de segues différents, comme vous pouvez le voir dans la pop-up.

Et pour vous expliquer qui est qui, je vous ai fait des super gifs !

En tout cas, c'est pas la modestie qui va t'étouffer...

Ma pause déjeuner y est passée donc un peu de respect ;) ! Bref, les voici :

Show

Le segue Show est le plus simple, il ajoute tout simplement une page par-dessus la précédente en la rajoutant sur la pile de navigation. Il vient avec des petits trucs cool :

  • L'animation que vous pouvez admirer ci-dessus

  • Un bouton de retour dans la seconde page

  • Un geste : si vous glissez votre doigt depuis le bord droit vous revenez à la page précédente.

Show Detail

Sur iPhone, c'est exactement le même que Show. Mais sur iPad, la deuxième page est présentée sans remplacer la précédente en se positionnant à sa droite.

Ce segue est donc très pratique pour faire des applications qui s'adaptent sur un iPad !

Present Modally

Avec ce segue, que l'on appelle Modal, vous pouvez choisir plusieurs animations de transitions comme celle que vous avez ci-dessus ou une apparition en transparence ou d'autres. Sur un iPad, en général, la nouvelle page ne prend pas tout l'écran et elle obscurcit la page derrière.

Contrairement au Show, ce segue ne comprend pas un moyen de revenir en arrière. Il faut créer son propre bouton. Par ailleurs, il n'y a plus de barre de navigation. Donc même si techniquement, ce segue rajoute une vue à la pile de navigation comme les autres, d'un point de vue utilisateur, il interrompt le flux de navigation.

Present As Popover

Sur iPhone, vous obtiendrez par défaut un segue Present Modally. Mais sur iPad (ou sur iPhone si vous changez le réglage), vous obtiendrez une pop-up accrochée visuellement à l'élément d'interface qui l'a appelée.

Custom

Comme son nom l'indique, vous pouvez créer vos propres segues pour imaginer des transitions spectaculaires !

Attention !

Ajout des segues

Segue show

Il ne nous reste plus, après cette parenthèse théorique, qu'à ajouter notre segue. Faites votre control drag depuis le bouton Go ! vers le FormViewController et dans la pop-up, choisissez le segue Show.

Vous constatez qu'une barre de navigation est apparue sur le contrôleur et le segue est matérialisé par une flèche entre les deux.

Vous pouvez tester l'interaction dans votre simulateur et ça marche ! Pas plus compliqué qu'un control drag !

Segue modal

Pour le plaisir, je vous propose qu'on se rajoute une troisième page. Cette page sera affichée lorsqu'on appuie sur le bouton Valider du FormViewController et elle informera l'utilisateur que son inscription a été prise en compte avec succès.

Comme d'habitude, vous allez créer une classe que l'on va appeler cette fois SuccessViewController, glisser un troisième ViewController dans le storyboard et lui donner la classe SuccessViewController.

Ensuite, nous allons juste ajouter un label pour informer l'utilisateur. Je vous laisse faire et ça donne ça :

Maintenant que notre troisième interface est prête, nous allons créer le segue entre le bouton Valider du FormViewController et le SuccessViewController. Toujours pareil : avec le control-drag. Mais cette fois-ci, je vous suggère de choisir Present Modally. Et voici notre storyboard finalisé :

Vous remarquez en lançant l'application que votre troisième page arrive avec une transition depuis le bas de l'écran. Mais elle ne contient ni barre de navigation ni bouton retour. Donc on est coincé sur cette interface ! Nous allons voir dans le prochain chapitre comment revenir en arrière.

En résumé

  • Un segue, c'est un objet dans le storyboard qui permet de créer une transition entre deux pages.

  • Il existe 5 types de segues : Show, Show Detail, Present Modally, Present As Popover, Custom. Choisissez-les avec précaution !

  • Pour créer un segue, on fait un control-drag depuis un bouton vers la page à afficher.

Example of certificate of achievement
Example of certificate of achievement