Développez votre première application pour iOS

Vous êtes presque des pros. Vous avez vu les interactions, les animations et plus si vous avez été curieux. Voyons maintenant comment changer de page dans votre application.

Choisissez votre mode de navigation

Vous savez déjà en quoi ça consiste : regardez l'appli Réglages par exemple. Vous avez une barre de navigation en haut, et lorsque vous cliquez sur "Général", un  bouton apparaît en haut à gauche pour revenir à la page précédente. 

Vous l'aurez compris, avec iOS, on ne peut voir qu'une page à la fois :

• Pour voir une page qui suit logiquement la page présente, on "pousse" le controller suivant ;

• Et pour simplement afficher une page qui n'a pas forcément de rapport, on "présente" le controller.

Nous allons créer une page d'accueil de base pour notre application. Allez dans le storyboard, glissez-déposez un nouveau View Controller, sélectionnez-le, cliquez sur "Editor" dans le menu de Xcode > Embed in > Navigation Controller. Ajoutez un label de titre, un bouton indiquant "niveau facile" et ajoutez leurs contraintes. Personnellement j'ai choisi de les centrer horizontalement, de placer le titre tout en haut et de laisser le bouton quelques pixels en dessous.

Maintenant, vous allez créer une transition (“segue” en anglais). Maintenez la touche ctrl enfoncée, cliquez sur le bouton "facile" en maintenant le clic et relâchez en plein milieu du controller Exercice. Choisissez "show" dans le petit menu qui s'affiche. Faites-le test !

Vous avez créé un UINavigationController qui hérite de UIViewController et qui gère la navigation hiérarchique. Il existe depuis iOS 2.0 et a été créé pour rendre l'affichage des données plus clair.

Ensuite, via une segue, vous avez "poussé" le controller suivant (Exercice), ce qui vous a permis d'avoir un bouton de retour en haut à gauche, comme vous avez pu le constater.

Un peu plus simple : glissez-déposez un controller. Créez un autre bouton "Settings" en bas à gauche. À nouveau, maintenez ctrl, cliquez sur le bouton (en maintenant le clic) et relâchez en plein milieu du nouveau controller. Choisissez "present modally" dans le petit menu.  Mettez un fond gris au nouveau controller et je vous laisse observer le résultat :

• Un controller présenté à partir d'un UINavigationController a d'office une barre de navigation et tous les controllers d'un UINavigationController ont un bouton retour en haut à gauche, sauf le parent (le tout premier) ;

• Un controller présenté de manière modale ne fait pas partie de ce type de hiérarchie. Il est fait pour montrer une page interstitielle vraiment à part et n'a pas de bouton de retour. D'ailleurs, il recouvre votre écran sans vergogne.

Les données entre controllers

On passe des données entre les controllers en les instanciant comme des objets normaux.

Tout d'abord créez la classe Accueil qui correspondra au controller sur laquelle l'appli s'ouvre.

Ici, nous utilisons les segues pour passer d'un controller à l'autre. Donnons un identifiant à la segue pour la reconnaître : "showExercice". Puis dans Accueil, nous allons reprendre la méthode prepareForSegue appelée avant que la transition s'exécute. Dans cette méthode, nous allons indiquer le niveau de l'exercice.

Il nous faut donc une variable niveau dans notre classe Exercice  de type Int.

On revient dans Accueil, on vérifie l'identifiant de la segue et si c'est la bonne, on passe la valeur 1.

override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
    //On vérifie l'identifiant
    if segue.identifier == "showExercice" {
        //On récupère le controller attaché
        let exo = segue.destinationViewController as! Exercice
        //On lui donne une valeur pour la variable niveau
        exo.niveau = 1
    }
}

Faisons un bouton pour le niveau 2 rapidement, créez la segue qui le lie à Exercice, et donnez lui l'identifiant "showExerciceMedium". Puis dans la même méthode que précédemment, ajoutez :

else if segue.identifier == "showExerciceMedium" {
    let exo = segue.destinationViewController as! Exercice
    exo.niveau = 2
}

On peut réaliser la même chose très simplement sans segue.

Retirez les segues du storyboard. Cette fois, c'est au controller Exercice que l'on va attribuer un identifiant. Sélectionnez le controller Exercice, allez dans le troisième onglet dans le volet de droite, et dans "storyboard identifier", écrivez : "exercice". On va également donner un tag aux boutons. Sous iOS, le tag est un nombre entier. Ici, il va nous permettre d'indiquer que le bouton "easy" correspond au niveau 1 et le medium au niveau 2. Vous l'aurez compris, donnez au premier bouton le tag 1 et au deuxième, le tag 2. 

Dans Accueil, on va créer une méthode appelée lors du clic sur un bouton. Dans cette méthode, nous allons instancier un objet Exercice à partir du storyboard (raison pour laquelle on avait besoin de son identifiant).

@IBAction func bExoClic(sender : UIButton) {
    //On récupère Main.storyboard
    let storyboard = UIStoryboard(name: "Main", bundle: nil)
    //On crée une instance d'Exercice à partir du storyboard
    let exo = storyboard.instantiateViewControllerWithIdentifier("exercice") as! Exercice
    //On lui attribue le niveau en fonction du bouton
    exo.niveau = sender.tag
    //On montre le nouveau controller
    navigationController?.showViewController(exo, sender: self)
}

Il ne vous reste plus qu'à lier la méthode qui gère les clics aux deux boutons : Depuis le storyboard, sélectionnez Accueil, allez dans le dernier onglet à droite, maintenez le clic sur le rond à côté de "bExoClic" et relâchez sur le premier bouton (sélectionnez TouchUpInside, comme d'habitude). Faites la même manipulation pour le deuxième bouton.

Utilisez la barre de navigation

Alors comment personnaliser un peu cette barre en haut?

Premièrement, dans le storyboard, double-cliquez au milieu de la barre de navigation dans le controller Accueil : vous pouvez y entrer un titre. Disons "Home".

Ensuite, vous allez récupérer ces deux sets d'images issues des material icons (help et settings). Ajoutez- les en allant dans Assets.xcassets,  glissez-déposez dans la zone de gauche et renommez-les "help" et "settings". Retournez dans le storyboard et ajoutez deux "Bar button item" à la barre de navigation de Accueil. Le premier à gauche et le deuxième à droite.

Sélectionnez les à tour de rôle, dans attributes inspector, attribuez-leur les images que vous venez d'ajouter et vous avez deux magnifiques boutons dans votre barre de navigation. Pour l'exemple, créez deux controller et faites une transition "present modally" pour chacun des boutons.

Encore une fois, on n'a pas touché au code Swift. Mais cette fois, le Swift nous permet quelques petites choses en plus. Allez dans Accueil.swift. On peut par exemple changer les couleurs qu'on veut. Vous pouvez écrire dans viewDidAppear :

override func viewDidAppear(animated: Bool) {
    //Couleur des boutons
    navigationController?.navigationBar.tintColor = UIColor.redColor()
    
    //Couleur du titre
    navigationController?.navigationBar.titleTextAttributes = [NSForegroundColorAttributeName: UIColor.yellowColor()]
    
    //Couleur du fond
    navigationController?.navigationBar.barTintColor = UIColor.blueColor()
}

Ou par exemple, si vous ne voulez pas du texte "Back" quand vous êtes dans exercice :

//Text du bouton de retour
navigationItem.backBarButtonItem?.title = "Home"

Pour ajouter un bouton avec du code :

navigationItem.rightBarButtonItem = 
    UIBarButtonItem(image: UIImage(named: "help"),
    style: .Plain,
    target: self,
    action: #selector(clicHelp))

Ici j'ai créé un bouton avec une image, le style de base (Plain), le controller cible, c'est-à-dire le controller qui va contenir la méthode clicHelp.

Je vous laisse découvrir toutes les autres possibilités :

• Quelques autres modes de navigation : UITabBarController (on en parle dans la partie 5) 

• Deux autres controllers qui n'ont rien à voir : SplitViewController et PageViewController

Passez au chapitre suivant pour apprendre à utiliser le modèle MVC.