• 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

Manipulez les contraintes

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

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.

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

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.

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 Egal mais parfois pour des interfaces plus complexes, vous pourriez avoir besoin de Supérieur ou égal ou Inférieur ou égal.

  • La constante, c'est la distance souhaitée ici : 20 points.

  • Enfin le paramètre Priority vous permet de définir des constantes 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.

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 5ème).

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.

Les autres boutons

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

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

Mettre à 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 :

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, une 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.

Les stack view

  Enfin le deuxième bouton permet de placer vos vues dans des Stack View. Les stack view permettent de gérer des piles de vues horizontales ou verticales. Mais nous ne les verrons pas dans ce cours.

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 :

Dans la prochaine partie, nous allons adapter notre interface sur tous les écrans avec les catégories de taille.

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