• 10 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 22/02/2022

Apprenez à maîtriser la puissance des Stack Views

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

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.

Dans une stack view, vous pouvez définir l'axe, l'alignement, la distribution et l'espacement des éléments
Une stack view

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 :

Nous pouvons créer 3 stack view en rassemblent les éléments de Question View, Score Label et New Game Button et son Activity Indicator
Quelques éléments que nous pouvons regrouper dans le 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 :

Sélectionnez Label et Icon sous la Question View
Créons la stack view de notre Question View

Puis cliquer sur le bouton d’incorporation en bas à droite et sélectionner Stack View :

Une stack view s'ajoute à l'arborescence
Voilà une stack view créée

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 :

Dans ce menu nous pouvons définir l'axe, l'alignement, la distribution et l'espacement de la stack view
Configurons la stack view

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 :

Notre première stack view !
Notre première stack view !

À 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 :

L'arborescence voulue
L'arborescence voulue

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é.

Exemple de certificat de réussite
Exemple de certificat de réussite