• 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 26/02/2020

Créez vos contraintes

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

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 quatrième (en forme de TIE Fighter pour les fans de Star Wars ;)). Cliquez dessus :

La 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 voisins

Le plus proche voisin ?

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

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.

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.

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 ambigüe. 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 troisième bouton en bas à droite qui permet de gérer l'alignement. En cliquant sur ce bouton, apparaît la pop-up suivante :

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

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 gratuitement cette vidéo ou de la regarder juste en dessous.

Exercice

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. A vous de jouer !

Vous pouvez consulter la correction gratuitement à cette adresse ou ci-dessous :

Dans le prochain chapitre, nous allons voir comment inspecter et modifier vos contraintes.

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