• 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 20/12/2023

Créez vos contraintes

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.

Les boutons pour gérer les contraintes
Les boutons pour gérer les contraintes

Celui qui nous intéresse en premier, c'est le troisième. Cliquez dessus :

Le troisième bouton ouvre un menu qui nous permet d'ajouter des contraintes en haut, en bas, à droite et à gauche d'un élément
Le troisième bouton nous permet d'ajouter des contraintes

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 :

Les margins place le contenu au sein d'une vue
Les margins place le contenu au sein d'une vue

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 :

Sélectionnez le voisin Score Label
Sélectionnez le voisin Score Label

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 :

Les contraintes à ajouter
Les contraintes à ajouter

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 :

Notre bouton a des lignes rouges à gauche et à droite
Notre bouton a des lignes rouges à gauche et à droite

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 :

Le menu d'Alignment Constraints
Alignment Constraints

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.

Plus de ligne rouge autour du bouton !
Plus de ligne rouge autour du bouton !

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 :

Entre plusieurs tailles d'écran, le bouton reste centré et la même taille
Un bouton bien aligné

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 !

Et si vous obteniez un diplôme OpenClassrooms ?
  • Formations jusqu’à 100 % financées
  • Date de début flexible
  • Projets professionnalisants
  • Mentorat individuel
Trouvez la formation et le financement faits pour vous
Exemple de certificat de réussite
Exemple de certificat de réussite