Alors comment fait-on pour définir toutes ces contraintes ? On va faire cela dans le storyboard. Et je vous propose de commencer par le bouton !
C'est parti !
Cliquez sur le bouton New Game pour le sélectionner. Ensuite nous allons nous intéresser aux cinq boutons en bas à droite dans le storyboard. Ce sont eux qui permettent de gérer les contraintes.
Celui qui nous intéresse en premier, c'est le troisième. Cliquez dessus :
Le pop-up qui s'affiche nous permet de définir des contraintes. En haut, vous avez quatre contraintes possibles. Ce sont des contraintes de type distance entre deux vues. Elles correspondent donc à la distance au plus proche voisin dans les quatre directions possibles (haut, bas, gauche, droite).
Les margins
Dans le pop-up on remarque aussi une case précochée, “Constrain to margins”. Mais qu’est-ce donc ?
Les margins sont des marges de mise en page, qui fournissent un espace visuel entre le contenu d’une vue et tout contenu en dehors des limites de la vue elle-même.
Ci-dessous voici un exemple visuel de margin pour le contenu d’une vue texte :
On comprend donc que dans notre cas exemple, les margins de référence pour notre label seront celles de la vue.
Affichez les voisins
En haut du bouton par exemple, il y a quatre voisins possibles, et vous pouvez les afficher en cliquant sur la petite flèche à droite de la valeur 222 :
Le plus proche voisin en haut, c'est le label score. Puis la vue grise qui contient la question. Puis au-dessus, on a le haut de la zone protégée et enfin le haut de la vue racine.
Ajoutez les trois premières contraintes
Maintenant que la notion de plus proche voisin est claire, rajoutons notre première contrainte. Nous souhaitons que le bouton soit à une distance de 20 points du bas de la vue principale. Pour cela, il suffit de cliquer sur le petit segment rouge du bas dans la pop-up. En faisant cela, nous créons une contrainte de distance entre le bas du bouton et le bas de la vue principale. Le positionnement vertical est prêt à être fixé.
Avant de cliquer sur Add 1 Constraint, nous allons rajouter les contraintes de largeur et hauteur. Plus bas, dans la pop-up, vous trouvez les contraintes Width et Height. Par défaut, leurs valeurs correspondent à la taille actuelle du bouton. Vous pouvez les cocher pour ajouter ces contraintes. À la fin, votre pop-up doit ressembler à ceci :
Vous pouvez cliquer sur Add 3 constraints pour ajouter les trois contraintes. Les contraintes sont désormais visibles autour du bouton.
Définissez la dernière contrainte
Un warning (erreur jaune) apparaît dans Xcode ainsi que des lignes rouges autour du bouton :
Les lignes sont rouges car la position du bouton est toujours ambiguë. En effet, sa position horizontale (sur l'axe des x) n'est pas encore fixée. Et comme nous l'avons vu dans le chapitre précédent, AutoLayout exige les quatre informations (x, y, largeur et hauteur) pour fonctionner correctement.
Pour ajouter notre dernière contrainte, nous allons utiliser le deuxième bouton en bas à droite qui permet de gérer l'alignement. En cliquant sur ce bouton, apparaît le pop-up suivant :
Ce pop-up permet de créer des contraintes d'alignement entre deux vues. Ici, comme nous avons sélectionné une seule vue, nous avons seulement deux options :
centrer horizontalement dans la vue qui contient le bouton (la vue racine) ;
centrer verticalement dans la vue qui contient le bouton (la vue racine).
Ici, on veut centrer horizontalement, donc on coche la première case et on clique sur Add 1 constraint.
Notre bouton a désormais quatre contraintes qui permettent de déterminer sa position avec certitude, les lignes rouges ont disparu. Si on retourne sur le mode aperçu, on peut voir que notre bouton s'affiche correctement dans tous les cas :
Et les autres vues ?
Il faut maintenant rajouter les contraintes pour toutes les autres vues. Comme cela reprend ce que je viens de vous montrer, et qu'une vidéo vaut bien mieux qu'un long texte pour ce sujet, je vous propose de consulter la solution juste en dessous.
À vous de jouer
Je vous propose maintenant d'adapter l'interface de la page de lancement, dans le fichier LaunchScreen.storyboard. Cette interface ne contient qu'une seule image. Il faut qu'elle garde sa taille et qu'elle reste centrée horizontalement et verticalement.
Dans le prochain chapitre, nous allons voir comment inspecter et modifier vos contraintes.
En résumé
L’outil d’ajout de contrainte permet d’attribuer des contraintes de type distance entre deux vues. Elles correspondent toujours à la distance au plus proche voisin.
Les margins sont des marges de mise en page qui fournissent un espace visuel entre le contenu d’une vue et tout contenu en dehors. La valeur par défaut est de 8 points.
À présent, allons modifier des contraintes existantes. Rendez-vous au prochain chapitre !
