• 30 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/8/21

On n'a toujours pas écrit de Swift !

Bon, c'est vrai, nous n'avons pas touché au code Swift cependant, les chapitres précédents étaient primordiaux. Vous voilà fin prêts pour toucher à du code Swift, c'est parti !

Faites le lien entre un storyboard et votre code

Tout d'abord, voilà deux petites fonctions bien utiles que vous réutiliserez souvent.

  • La 1re permet d'afficher une popup avec un simple bouton ;

  • La 2e permet simplement de cacher le clavier lorsque l'utilisateur tape sur l'écran :

//Ouvre une popup
func alert(title: String, message: String) { 
    let alert = UIAlertController(title: title, message: message, preferredStyle: .Alert)
    let ok = UIAlertAction(title: "Ok", style: UIAlertActionStyle.Cancel, handler: nil)
    alert.addAction(ok)
    self.presentViewController(alert, animated: true, completion: nil)
}

//Cache le clavier lorsque l'utilisateur touche l'écran
override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) { 
    self.view.endEditing(true)
}

Et pour Swift 3 :

func alert(_ title: String, message: String) {
    let alert = UIAlertController(title: title, message: message, preferredStyle: .alert)
    let ok = UIAlertAction(title: "Ok", style: UIAlertActionStyle.cancel, handler: nil)
    alert.addAction(ok)
    self.present(alert, animated: true, completion: nil)
}

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    self.view.endEditing(true)
}

 

Je vous ai parlé de gérer les vues grâce au code. Mais comment lier les vues du storyboard au code Swift? Cela se fait en 2 étapes :

Étape n°1 – Créez la variable dans le code :

var tfNombreEntre : UITextField!

tfNombreEntreest de typeUITextFieldet comme on va la lier au storyboard, on est sûr que la variable ne sera pas nulle. D'où le "!". D'ailleurs, pour indiquer qu'on va la lier au storyboard, on ajoute le mot-clé "@IBOutlet" :

@IBOutlet var tfNombreEntre : UITextField!

Étape n°2 – Ajoutez votre variable dans le controller

Maintenant, allez dans le storyboard, sélectionnez le controller. Dans le volet de droite, cliquez sur la dernière icône,  et, dans la partie "Outlets", vous voyez le nom de la variable créée en Swift. Maintenez le clic sur le rond à droite du nom de la variable et relâchez sur le textfield. C'est tout !

Faites pareil pour le bouton, que l'on appellerabFinet qui est de typeUIButton.

Depuis un storyboard, on peut lier des vues, mais aussi des actions. Dans le code, ajoutez une fonctionclicSurFinavec le mot-clé@IBAction:

@IBAction func clicSurFin(sender : UIButton) {
    //On vérifie que le texte entré par l'utilisateur n'est pas nil
    if let resultat = tfNombreEntre.text where resultat != "" {
        //On regarde si le résultat est 8
        if Int(resultat) == 8 {
            alert("Bravo", message: "4 + 4 = 8\nC'est une bonne réponse")
        } else {
            alert("Faux", message: "Ce n'est pas la bonne réponse, réessayez !")
        }
    } else {
        alert("Champ vide", message: "Veuillez entrer une valeur")
    }
}

Le paramètresenderest la variable qui a déclenché l'action.

On retourne à nouveau dans le storyboard, on sélectionne le controller et, toujours dans le même onglet, dans "Received actions", on voit une nouvelle action apparaître. Cliquez sur le rond à droite du nom de cette action et relâchez sur le bouton. Un petit menu s'ouvre car un bouton peut déclencher plusieurs actions. Un clic classique correspond àTouchUpInside. Donc cliquez sur TouchUpInside. Quand l'utilisateur cliquera sur le bouton, le code à l'intérieur declicSurFins'exécutera. Faites un petit test en cliquant sur le bouton en haut à gauche ou avec Command + R.

Gérez les interactions

Vous avez vu l'action la plus classique, mais il y en a des centaines. Par exemple, vous pourriez vouloir que le code réagisse lorsque l'utilisateur entre quelque chose, sans qu'il ait à cliquer sur le bouton.

Pour cela, commencez par créer une variablemodeAutobooléenne. Si elle est vraie, le bouton disparaîtra et l'application détectera automatiquement les changements dans le texte.

Créez un Switch pour permettre de choisir un mode "auto" dans lequel le bouton disparaît. Ajoutez le switch et placez-le en bas à gauche, c'est souvent à cet endroit que l'on place les paramètres quand il n'y a pas de page "paramètres". Disons qu'il désactivé par défaut et créez la fonction appelée lorsque l'utilisateur appuie sur le switch :

@IBAction func autoOnOff (sender : UISwitch) {
    modeAuto = sender.on    //On attribue à modeAuto la valeur du UISwitch
    bFin.hidden = modeAuto  //Cache la vue
}

Créez également la fonction appelée lorsque l'utilisateur entre du texte :

@IBAction func texteModifie (sender : UITextField) {
}

Liez ces fonctions au storyboard, au UISwitch et au UITextField :

  • Depuis le storyboard, sélectionnez le controller, rendez-vous à nouveau dans le 5e onglet, maintenez la souris enfoncée sur le rond à côté de "autoOnOff" et relâchez le clic sur le UISwitch, sélectionnez Touch Up Inside,

  • maintenez la souris enfoncée sur le rond à côté de "texteModifie" et relâchez le clic sur le UITextField, sélectionnez Editing Changed.

Disons que l'on signale à l'utilisateur s'il a gagné à partir du moment où il a entré "8" :

@IBAction func texteModifie (sender : UITextField) {
    if modeAuto {
        //On vérifie que le texte entré par l'utilisateur n'est pas nil
        if let resultat = sender.text where resultat != "" {
            //On regarde si le résultat est 8
            if Int(resultat) == 8 {
                alert("Bravo", message: "4 + 4 = 8\nC'est une bonne réponse")
            }
        }
    }
}

Pour cela, on doit utiliser un delegate. Un delegate est un protocole qui va gérer certains évènements. LeUITextFieldDelegate(délégué du champ de texte) permet de détecter le moment où l'utilisateur commence ou arrête d'éditer le champ de texte, ou encore appuie sur la touche Retour.

On va indiquer que notre classe "Exercice" se conforme au protocoleUITextFieldDelegate, on va attribuer àtfNombreEntreson délégué et on va réutiliser la fonctiontextFieldShouldReturnqui est appelée lorsque l'utilisateur appuis sur le touche retour du clavier.

Pour indiquer que notre classe Exercice se conforme à UITextFieldDelegate :

class Exercice : UIViewController, UITextFieldDelegate {

Pour attribuer son "delegate" à tfNombreEntre, on ajoute cette ligne dans la méthode "viewDidLoad" du controller :

override func viewDidLoad() { //Appele lorsque le controller est chargé
	tfNombreEntre.delegate = self
}

Je vous laisse écrire le code à l'intérieur de textFieldShouldReturn :

func textFieldShouldReturn(textField: UITextField) -> Bool {
    if modeAuto {
        //On vérifie que le texte entré par l'utilisateur n'est pas nil
        if let resultat = textField.text where resultat != "" {
            //On regarde si le résultat est 8
            if Int(resultat) == 8 {
                alert("Bravo", message: "4 + 4 = 8\nC'est une bonne réponse")
            } else {
                alert("Faux", message: "Ce n'est pas la bonne réponse, réessayez !")
            }
        }
    }
    return true
}

Voilà votre premier aperçu des délégué, sachez qu'il en existe pour de nombreuses vues. On les utilise pour gérer la plupart des interactions utilisateur.

Allons plus loin avec les animations. 

Example of certificate of achievement
Example of certificate of achievement