Une stack view, c’est quoi ?
Une stack view, c’est magique ! Non, sans blague... Imaginez un monde où vous pourriez avoir une sorte de gros conteneur, capable d’avoir une infinité d’éléments à l'intérieur, et de gérer automatiquement leurs contraintes, espacements, etc., sans avoir à les ajouter manuellement... J’ai une bonne nouvelle, ce monde existe ! 😁
Une stack view est un objet visuel qui hérite de UIView, mais qui contient plein de super propriétés à l'intérieur pour faire tout le travail difficile à notre place.
Vous allez donc pouvoir y déposer différents objets visuels à l'intérieur, comme des boutons, des labels, etc., et seulement demander à la stack view de s’afficher en ne modifiant que quelques propriétés très simples.
L’axe : vertical ou horizontal.
L’alignement : en haut, en bas, centré horizontalement ou verticalement.
La distribution : remplir, remplir de manière égale, remplir proportionnellement, espacement égal, espace égal entre les centres.
L’espacement : l’espace entre deux vues enfants.
Une fois ces propriétés renseignées, la dernière chose à faire sera de spécifier les contraintes AutoLayout de la stack view dans son parent. Découvrez les stack views avec moi dans le screencast ci-dessous :
Reprenons notre application
Nous avons dû ajouter manuellement plusieurs contraintes sur nos éléments, et je vous laisse imaginer la complexité d’un tel travail sur une vue beaucoup plus complète...
Pour utiliser correctement des stack views, il va falloir penser “Groupes d’éléments”, comme des briques LEGO, que l’on va devoir rassembler afin d’alléger le nombre de contraintes à ajouter manuellement.
Regardons notre projet :
Dans la hiérarchie des vues, nous pouvons distinguer 3 groupes :
1. La Question View qui contient un label et une icône.
2. Le Score Label.
3. Le New Game Button et son Activity Indicator.
Nous allons dans un premier temps mettre le premier label et l'icône dans une stack view. Pour cela, il faut les sélectionner dans l’arbre à gauche :
Puis cliquer sur le bouton d’incorporation en bas à droite et sélectionner Stack View :
Une stack view apparaît dans la hiérarchie, et si on étend son contenu, on voit alors qu’elle contient nos 2 éléments. Malheureusement, tout est cassé dans le storyboard... Pas de panique ! Nous devons seulement configurer les propriétés de la stack view pour avoir de nouveau une belle interface.
Sélectionnez la stack view à gauche et regardez dans le panneau de droite :
Il faut spécifier :
l’axe de distribution (dans notre cas, Vertical) ;
quelle ligne de référence les enfants vont suivre pour s’aligner (on veut le centre de la stack view) ;
quel mode de distribution (on souhaite que les enfants prennent l’espace disponible, Fill) ;
et enfin quel écart (Spacing) sera apposé entre eux.
Il ne nous reste alors qu’à remettre les contraintes AutoLayout de la stack view par rapport à notre vue parente Question View. Je vous laisse faire, maintenant : vous savez tout !
Voici ce que l’on souhaite :
À vous de jouer
À présent, je vous propose dans cette activité de finaliser notre interface avec des stack views. N’oubliez pas de penser aux sous-groupes que vous souhaitez créer.
L’exercice consiste à s’abstraire au maximum des contraintes manuelles et mettre le plus de vues possible dans des stack views.
Voici un petit indice :
N’oubliez pas de vérifier dans la preview que votre interface respecte toujours la demande de notre designer !
Jouez avec des propriétés dans le code
Dans ce chapitre, nous avons commencé à voir la puissance des stack views, qui, combinées à AutoLayout, vont nous simplifier grandement la construction de nos vues.
Avez-vous pris le temps d'exécuter notre application ?
Dans le cas du bouton New Game et de L’Activity Indicator, vous aurez sûrement remarqué que l’un disparaissait pour afficher l’autre et vice versa, sans avoir à gérer les contraintes et/ou le repositionnement... C’est encore grâce à la magie des stack views !
Regardez dans notre fichier ViewController à la ligne 45 :
private func startNewGame() {
activityIndicator.isHidden = false
newGameButton.isHidden = true
} La stack view gère une arborescence de vues virtuelle. Lors du rendu, cette arborescence ne sera pas utilisée en tant que telle, mais recalculée pour définir une arborescence réelle. On peut alors jouer avec certaines propriétés comme isHidden, qui permet à la stack view d'enlever des vues de l'arborescence réelle.
C’est très pratique !
En résumé
Une stack view :
est un objet visuel qui hérite de UIView ;
est un conteneur capable d’avoir une infinité d’éléments à l'intérieur, et de gérer leur positionnement les uns par rapport aux autres automatiquement ;
possède 4 propriétés pour gérer ses enfants : l’axe, l’alignement, la distribution et l’espacement ;
a une organisation visuelle qui est virtuelle et sera différente de celle réellement affichée lors du rendering, grâce à la transformation virtuel -> réel.
À présent, mettons vos connaissances en action ! Rejoignez-moi au chapitre suivant pour une activité.
