• 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 26/05/2023

Revenez en arrière !

Malgré le titre de ce chapitre, soyez bien certain que vous allez de l'avant dans vos connaissances en navigation iOS. Nous allons apprendre à revenir en arrière dans la pile de navigation, d'abord d'un cran, puis de plusieurs d'un coup !

Quittez le succès !

Notre  SuccessViewController  est bien beau, mais quand on atterrit dessus, on ne peut plus en partir ! Il n'y a pas de bouton retour ! Cela est dû au segue Present Modally que l'on a choisi pour afficher cette page, et du mode de présentation du  SuccessViewController  .

Qu'à cela ne tienne, nous allons le créer. Rajoutez un bouton en haut à gauche sur l'interface. Je vous suggère d'y mettre juste une croix. C'est suffisant pour qu'on en comprenne le sens.

Ajout d'un bouton croix en haut à gauche de l'interface
Ajout d'un bouton croix en haut à gauche de l'interface

Nous allons maintenant créer une action. Je vous suggère de la nommer  dismiss  . Car son rôle va être de faire disparaître la page.

Notre action étant créée, nous allons pouvoir l'implémenter. Et ça va être très simple, nous allons juste utiliser une méthode de  ViewController  qui s'appelle...  dismiss  ! Vous pouvez écrire ceci dans votre action :

@IBAction func dismiss(_ sender: Any) {
    dismiss(animated: true)
}

La méthode  dismiss  prend un paramètre :  animated  . Si celui-ci est  true  , la transition sera animée. C'est en général l'animation inverse de l'animation d'apparition de la page.

Et c'est tout ! Vous pouvez tester dans le simulateur et ça marche, la vue disparaît lorsqu'on appuie sur la croix !

Deux techniques de disparition

Vous savez maintenant utiliser  dismiss  pour faire disparaître programmatiquement un contrôleur. Mais sachez qu'il y a deux techniques différentes, et que cela dépend du segue que vous avez utilisé.

On a vu qu'il y a plusieurs types de segues, et on peut les regrouper en deux groupes :

Push

Modal

Show

Present Modally

Show Detail

Present As Popover

Les transitions de type Modal sont régies par les ViewControllers eux-mêmes. Dans ce cas-là, on peut directement utiliser la méthode  dismiss  comme on vient de le faire.

Les transitions de type Push ne sont possibles qu'en présence d'un Navigation Controller ou d’un Split View Controller, car ce sont eux qui savent gérer ce type de transitions. C'est la raison pour laquelle il y a une barre de navigation quand on utilise ce genre de segue. Du coup, programmatiquement, dans le cas d’un Navigation Controller, ce dernier a la possibilité de faire disparaître un contrôleur avec la méthode suivante :

navigationController?.popViewController(animated: true)

navigationController  est une propriété de  ViewController  . C'est un optionnel, d'où le point d'interrogation. Et le paramètre  animated  a le même rôle que dans  dismiss  .

J'en profite aussi pour vous parler de la navigation dans le code (si on n'utilise pas les segues du storyboard). Et je vous résume tout ça dans ce schéma :

Schéma présentant la navigation dans le code : Encart Push (Show / Show Detail)  Encart Modal (Present Modally / Present As popover)
Navigation dans le code : Push & Modal

Revenir au début

Pour l'instant, nous n'avons parlé que de navigation d'une page à l'autre. Mais ce serait pratique d'avoir un bouton dans notre dernière page qui nous ramène tout au début, pour lancer l'inscription pour un deuxième chien, par exemple !

Commençons par créer ce bouton "Inscrire un autre chien". Je vous laisse faire, voici l'objectif :

Notre interface de confirmation d'inscription avec un texte indiquant à l'utilisateur qu'il a bien été ajouté à la base de donnée et qu'il recevra un SMS lorsqu'on lui aura proposé une âme soeur. Un bouton en bas propose d'inviter un autre chien
Création du bouton "Inscrire un autre chien"

C'est bon ? Alors, continuons !

La première idée qui vient, c'est de créer un segue depuis notre bouton vers la première page. Mais ça ne va pas marcher. Souvenez-vous, les pages sont empilées les unes sur les autres comme ceci :

Success

Form

Welcome

Si on crée un segue qui revient à la première page, on ajoutera en fait la première page à nouveau dans la pile :

Welcome

Success

Form

Welcome

Et la navigation forme un cycle infini et n'est plus compréhensible ! À la place, il faut ôter les pages les unes après les autres. Mais ici, nous voulons enlever deux pages d'un coup pour obtenir ceci :

Welcome

Le problème, c'est que les segues ne peuvent que retirer une page à la fois. Nous allons devoir utiliser un type spécial de segue : les unwind segues.

Créer un unwind segue

La particularité de ces segues, c'est qu'ils peuvent vous mener n'importe où dans votre application en respectant la pile de navigation !

Ils fonctionnent comme le tir à l'arc. Il faut d'abord créer une cible sur la page à laquelle on veut revenir, ici  WelcomeViewController  . Puis on lance une flèche vers cette cible.

Storyboard : Navigation Controller (flèche) Welcome page (flèche) Form View Controller (flèche) Page de confirmation d’inscription   Une flèche part de la page de confirmation d'inscription et vise la cible sur la Welcome page
Dans le mil!

Alors, créons d'abord la cible. Pour cela, il faut se rendre dans le code du contrôleur qu'on cherche à atteindre, ici  WelcomeViewController  , et rajouter le code suivant :

@IBAction func unwindToWelcome(segue:UIStoryboardSegue) { }

Oui cette méthode est vide ! Elle ne sert qu'à déclarer le contrôleur comme cible potentielle d'un unwind segue.

Maintenant, il faut lancer la flèche et pour cela, il faut faire... un control-drag ! Il doit démarrer du bouton destiné à lancer la transition vers l'icône Exit en haut du contrôleur.

Control-drag vers le bouton Exit
Control-drag vers le bouton Exit

Quand vous lâchez, vous verrez une pop-up contenant la méthode que nous venons de créer dans  WelcomeViewController  ! 

Un Gif : sur la page Welcome, on fait un drag and drop partant du bouton
Sélectionnez la méthode et... c'est terminé !

Vous pouvez tester, et constater que le bouton ramène bien à la première page en supprimant ainsi les pages 2 et 3 de la pile de navigation en une fois !

En résumé

  • Lorsqu'on travaille avec des segues de type Modal, on peut être amené à créer un bouton pour revenir en arrière, suivant le type de présentation.

  • On utilise la méthode  dismiss  pour faire disparaître une vue créée par un segue modal.

  • Le navigation controller est responsable de la navigation d'un segue de type Push.

  • Les unwind segues permettent de sauter plusieurs pages dans la pile de navigation. Il faut d'abord créer une cible sur la page à atteindre, puis créer le segue vers cette cible en utilisant l'icône Exit.

Dans le prochain chapitre, nous allons parler des autres modes de navigation sur iOS.

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