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 ?
On utilise l'observation des propriétés ?
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 ?
Énumération ?
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 typeString
.Pour changer la couleur de fond d'une vue, on utilise la propriété
backgroundColor
deUIView
de typeUIColor
. Pour initialiserUIColor
, 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 typeUIImage
. Pour initialiserUIImage
, on utilise le nom du fichier image :
UIImage(named: "Icon Correct")
Pour cacher une vue, on utilise la propriété
isHidden
deUIView
de typeBool
.