Développez une application iPhone avec le modèle MVC

Notre classe est désormais créée et connectée. Nous allons pouvoir l'implémenter. Cette classe va avoir seulement deux propriétés publiques. Tout le reste va être privé. Ces deux propriétés sont :

• style : qui va avoir trois valeurs possibles : réponse correcte, réponse fausse et pas de réponse.

• title : cette propriété représente le titre de la question affichée.

La propriété title

Créons la propriété title de type String.

var title = ""

Rien de bien sorcier pour le moment. Dès que cette propriété est modifiée, on va vouloir modifier le texte de notre label pour qu'il affiche la valeur de title. Comment fait-on lorsqu'on veut effectuer une action quand une propriété est modifiée ?

Bravo ! Je vois que vous avez suivi le cours sur le sujet ! On va donc observer notre propriété title :

var title = "" {
    didSet {
        // On modifie le titre ici
    }
}

Cette syntaxe devrait vous être familière. Lorsque la propriété sera modifiée, le contenu de la méthode didSet sera exécuté. Nous souhaitons modifier le texte du label. Pour cela, nous allons tout simplement utiliser la propriété text de UILabel.

var title = "" {
    didSet {
        label.text = title
    }
}

De cette façon, dès que title est modifié le texte du label le sera aussi.

La propriété style

La propriété style va définir l'apparence générale de la vue. Il y a trois possibilités : réponse correcte, réponse incorrecte et pas de réponse. Qui dit plusieurs choix dit ?

Bravo ! Vous êtes en forme aujourd'hui ;) ! Nous allons donc créer une énumération Style à l'intérieur de notre classe QuestionView.

class QuestionView: UIView {
    enum Style {
        case correct, incorrect, standard
    }
    // (...)
}

À chaque cas de l'énumération, nous allons faire correspondre les apparences suivantes :

Nous allons maintenant créer la propriété style de type Style :

var style: Style = .standard

Et de la même façon, nous allons utiliser l'observation des propriétés pour modifier l'apparence. Mais cette fois-ci, le code à exécuter est plus gros qu'une simple ligne donc nous allons l'extraire dans une fonction privée à part :

var style: Style = .standard {
    didSet {
        setStyle(style)
    }
}

private func setStyle(_ style: Style) {
}

À chaque fois que la propriété style est modifiée, la fonction setStyle est appelée avec en paramètre le style à afficher.

La fonction setStyle

Écrivons le code de cette fonction. Tout d'abord nous allons faire un switch sur les différents cas :

private func setStyle(_ style: Style) {
    switch style {
        case .correct:
        case .incorrect:
        case .standard:
    }
}

Dans chacun des cas, il y a trois paramètres susceptibles de changer :

• la couleur de fond de la vue (vert, rouge ou gris)

• l'image de l'icône (validé ou erreur)

• la visibilité ou non de l'icône (dans le style standard, l'icône n'est pas visible)

La couleur de fond

Pour changer la couleur de fond, on utilise la propriété backgroundColor de UIView. Comme QuestionView hérite de UIView nous avons accès directement à cette propriété.

backgroundColor est de type UIColor. UIColor est la classe qui permet de gérer les couleurs. Elle a plusieurs initialiseurs. Parmi les plus pratiques, vous avez :

UIColor(white: CGFloat, alpha: CGFloat)
UIColor(red: CGFloat, green: CGFloat, blue: CGFloat, alpha: CGFloat)

Le premier permet de créer une nuance de gris :

• Le paramètre white est une valeur comprise entre 0 et 1. Plus la valeur est grande, plus la couleur est claire.

• Le paramètre alpha permet de gérer la transparence de la couleur entre 0 et 1.

  • 0 : la couleur est complètement transparente

  • 1 : la couleur est complètement opaque

Le deuxième permet de créer toutes les couleurs à partir des couleurs primaires rouge, vert et bleu. Les trois paramètres red, green et blue doivent avoir des valeurs comprises entre 0 et 1. Le paramètre alpha a le même rôle que précédemment.

En informatique, la notation RVB des couleurs se fait sur 255 tons. Par exemple, nos trois couleurs ont pour valeur RVB :

Donc pour obtenir des valeurs entre 1 et 0, on divise par 255 :

UIColor(red: 243.0/255.0, green: 135.0/255.0, blue: 148.0/255.0, alpha: 1) // Le rouge

Vous savez maintenant manier UIColor ! On va pouvoir modifier la couleur de fond de notre vue :

private func setStyle(_ style: Style) {
    switch style {
    case .correct:
        backgroundColor = UIColor(red: 200.0/255.0, green: 236.0/255.0, blue: 160.0/255.0, alpha: 1) // Vert
    case .incorrect:
        backgroundColor = UIColor(red: 243.0/255.0, green: 135.0/255.0, blue: 148.0/255.0, alpha: 1) // Rouge
    case .standard:
        backgroundColor = UIColor(red: 191.0/255.0, green: 196.0/255.0, blue: 201.0/255.0, alpha: 1) // Gris
    }
}

Pour créer une couleur, Xcode propose également une fonctionnalité bien pratique les color literal. Si vous commencez à taper color dans Xcode, vous pouvez sélectionner la première suggestion : Color Literal. Ensuite, vous n'avez plus qu'à choisir la couleur de votre choix et la couleur s'affiche sous la forme d'un petit carré de couleur directement dans le code.

C'est pratique mais parfois vous aurez besoin de UIColor donc c'est utile de connaître les deux options !

L'image

Nous allons maintenant modifier notre image. La classe UIImageView a une propriété image de type UIImage. C'est cette propriété qui permet de modifier l'image qu'affiche une UIImageView.

La classe UIImage a un initialiseur qui prend en paramètre le nom de l'image :

UIImage(named: String)

Le nom à indiquer est le nom que l'on a choisi pour l'image dans l'asset catalog :

Donc pour que notre icône affiche le signe validé vert, nous allons écrire :

icon.image = UIImage(named: "Icon Correct")

On crée ainsi une instance de UIImage à partir du nom du fichier et on assigne cette valeur à la propriété image de notre UIImageView.

Comme pour les couleurs précédemment, Xcode propose une autre façon bien pratique de créer une instance de UIImage. Si on commence à taper le nom de l'image recherchée, Xcode nous la suggère directement :

Cette façon de faire est bien pratique, car elle affiche une vignette de l'image en question ce qui est plus clair. Les deux lignes suivantes sont donc équivalentes :

Nous allons donc faire cela pour les deux cas correct et incorrect. Et notre code ressemble maintenant à ceci :

La visibilité de l'image

Il ne nous reste plus qu'à cacher l'image dans le cas standard (quand la vue est grise). Pour cela, nous allons utiliser la propriété isHidden de type Bool de UIView. Quand la propriété est à true, la vue est cachée et donc n'apparaît pas à l'écran et inversement. Comme UIImageView hérite de UIView, nous avons accès à cette propriété pour l'icône. Nous allons donc pouvoir l'utiliser et notre code ressemble finalement à ceci :

Dans les deux premiers cas, l'image est affichée. Dans le dernier, elle est cachée.

C'est tout pour notre classe ! D'une vue assez complexe, nous en avons fait une vue très simple à utiliser dans notre contrôleur tout à l'heure. Nous allons pouvoir choisir entre les trois styles que nous venons de définir sans avoir à rentrer dans le détail de la construction de cette vue.

À la fin de ce chapitre, votre classe doit ressembler à ceci :

En Résumé

• Pour changer le texte qu'affiche un UILabel, on utilise la propriété text de type String.

• Pour changer la couleur de fond d'une vue, on utilise la propriété backgroundColor de UIView de type UIColor. Pour initialiser UIColor, on utilise le plus souvent cette méthode :

UIColor(red: 200.0/255.0, green: 236.0/255.0, blue: 160.0/255.0, alpha: 1)

• Pour changer l'image qu'affiche une UIView, on utilise la propriété image de type UIImage. Pour initialiser UIImage, on utilise le nom du fichier image :

UIImage(named: "Icon Correct")

• Pour cacher une vue, on utilise la propriété isHidden de UIView de type Bool.