• 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

Manipulez les contraintes

Parfois vous allez vouloir modifier les contraintes que vous avez créées ou simplement les inspecter pour faire le point sur ce qui va ou ne va pas. Voyons ensemble dans ce chapitre comment y parvenir.

Inspectez les contraintes

Les lignes bleues

Lorsque vous sélectionnez une vue à laquelle vous avez ajouté des contraintes, vous voyez des lignes bleues apparaître autour.

Des lignes bleues s'affiche autour du bouton

Vous pouvez ensuite cliquer sur une de ces lignes et vous rendre dans l'inspecteur d'attribut. Vous y retrouverez les différents attributs de la contrainte. Ci-dessous vous retrouvez la contrainte de distance entre le bas de l'écran et le bas du bouton.

Les attributs de la contrainte
Les attributs de la contrainte

En particulier, vous avez :

  • Les deux vues concernées par la contrainte (First Item et Second Item).

  • La relation entre les deux, le plus souvent Égal, mais parfois pour des interfaces plus complexes, vous pourrez avoir besoin de Supérieur ou égal ou Inférieur ou égal.

  • La constante, c'est la distance souhaitée ici : 0 point.

  • Le paramètre Priority vous permet de définir des contraintes prioritaires les unes sur les autres. Plus la valeur est élevée, plus la priorité est grande. Même chose, cela pourra vous être utile dans des interfaces complexes.

  • Enfin, le paramètre Multiplier permet d’appliquer un ratio sur le deuxième attribut de la contrainte. Par défaut, il est égal à 1.

L'inspecteur de taille

En plus des lignes bleues autour du bouton, vous pouvez vérifier vos contraintes dans le panneau de droite dans l'onglet Inspecteur de taille (le 5e).

L'inspecteur de taille affiche les contraintes du bouton et nous permet des les modifier
L'inspecteur de taille

En bas, vous retrouvez les quatre contraintes que nous avons créées :

  • En cliquant sur Edit, vous pouvez les modifier.

  • En les sélectionnant et en utilisant la touche de suppression de votre clavier, vous pouvez les supprimer.

Utilisez les autres boutons

Nous n'avons vu que deux boutons parmi les cinq situés en bas à droite de l'interface :

Les autres boutons
Les autres boutons

Alors, laissez-moi vous présenter les autres, qui vous seront sans doute utiles.

Mettez à jour les vues et les contraintes

Le premier n'est activé que si certaines de vos vues sont à une position qui ne correspond pas à leurs contraintes. Essayez de déplacer le bouton, par exemple :

Quand vous essayez de déplacer le bouton, des lignes oranges apparaissent
Des lignes oranges apparaissent

Dans ce cas, des lignes oranges indiquent que le bouton est décalé par rapport à ses contraintes. Vous avez donc deux options :

  •   Soit vous souhaitez remettre le bouton à la place indiquée par ses contraintes ; dans ce cas, il suffit de cliquer sur le premier bouton.

  •  Soit vous souhaitez modifier la valeur des contraintes pour que le bouton reste à cette position ; dans ce cas, vous pouvez utiliser le dernier bouton (avec le triangle).

Dans ce deuxième cas, un pop-up vous propose plusieurs choix, allant de la suppression de toutes les contraintes à la modification de leurs valeurs pour respecter la position actuelle du bouton.

L'option Reset to Suggested Constraints remettra le bouton selon les contraintes définies
Reset !

Gérez vos vues avec les stack views

Le dernier bouton
Le dernier bouton

Enfin, le dernier bouton permet de placer vos vues dans des éléments parents, comme des stack views ou encore une simple view. Les stack views permettent de gérer des piles de vues horizontales ou verticales. Nous le verrons au chapitre suivant…

En résumé

  • Vous pouvez inspecter une contrainte avec les lignes bleues ou en utilisant l'inspecteur de taille.

  • Les boutons en bas à droite correspondent aux usages suivants :

    • Mettre à jour les vues en fonction des contraintes

    • Créer des contraintes d'alignement

    • Créer des contraintes de distance et de taille

    • Mettre à jour les contraintes en fonction des vues

    • Mettre les vues sélectionnées dans un parent, par exemple un stack view

  • Une contrainte entre deux éléments possède toujours un type de relation, par défaut égale. On peut la modifier en apposant un opérateur plus ou moins grand. 

  • Le paramètre Priority permet de définir des contraintes prioritaires les unes par rapport aux autres. 

AutoLayout c’est magique, et si on se simplifiait la vie ?

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