• 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

Découvrez AutoLayout

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

Pour adapter notre interface, nous allons découvrir ensemble AutoLayout. Dans cette partie, nous allons nous fixer un objectif simple : que l'interface s'adapte bien à toutes les tailles d'écran d'iPhone en mode portrait.

Pour l'instant, dans le mode aperçu, on voit ceci :

Nous allons faire en sorte d'obtenir plutôt ceci à la fin de la partie :

On veut donc que :

  • Toutes les vues restent centrées horizontalement.

  • Le bouton reste toujours à la même distance du bas de l'écran.

  • La vue question reste toujours à la même distance du haut de l'écran.

  • Le label score reste toujours à la même distance de la vue question.

Qu'est-ce qu'AutoLayout ?

AutoLayout permet de créer des contraintes qui définissent des relations entre deux vues.

Contraintes ? Relations ? Tu peux être moins vague ? o_O

Ok ok... Notre travail va être de donner des informations à AutoLayout, pour qu'il puisse modifier la position et la taille de nos vues en fonction de la taille de l'écran. Ces informations, on appelle cela des contraintes.

Les contraintes

Une contrainte, c'est une distance (en points) qui doit rester constante. Par exemple, pour le bouton New Game, nous allons créer une contrainte qui va dire à AutoLayout : "garde toujours une distance de 20 points entre le bas de l'écran et le bas du bouton".

Avec cette information, AutoLayout sait maintenant que, quelle que soit la taille de l'écran (iPhone, iPad, mode portrait ou paysage), le bouton doit toujours rester à 20 points du bord bas de l'écran.

La vue racine

Il existe une vue pour laquelle nous n'avons pas besoin de faire ce travail, c'est la vue racine.

Dans le cas d'OpenQuizz, c'est la vue bleu foncé au fond qui prend tout l'écran. Et justement elle prend tout l'écran grâce à AutoLayout.

En effet la vue racine a automatiquement quatre contraintes. Ces quatre contraintes indiquent à AutoLayout que la vue racine doit toujours garder une distance de 0 point avec le bord de l'écran dans les quatre directions (haut, bas, gauche, droite).

Donc la vue racine prend toujours tout l'écran. Et cela va nous être bien pratique, car on va pouvoir se servir du coup de cette vue comme repère pour définir les contraintes sur les autres vues.

Types de contraintes

Pour l'instant, je vous ai dit qu'une contrainte, c'est une distance constante entre deux vues. Pour la plupart des contraintes, c'est vrai et je pense que c'est la meilleure façon de retenir le rôle d'une contrainte.

Mais quelques contraintes échappent à cette définition. En effet, il existe plusieurs types de contraintes pour permettre des placements plus ou moins fins :

  • Distance entre deux vues : ce qu'on a vu jusqu'à présent.

  • Alignement entre deux vues : ce type de contrainte permet d'aligner deux vues entre elles par rapport à leur centre vertical ou horizontal, ou sur un de leurs côtés (haut, bas, gauche ou droite).

  • Taille d'une vue : ce type de contrainte permet de fixer la largeur ou la hauteur d'une vue ou le rapport entre ces deux valeurs.

  • Égalité des tailles : ce type de contrainte permet de décider que deux vues doivent garder la même taille, même si celle-ci doit varier.

Nous verrons dans le prochain chapitre comment créer tous ces types de contraintes.

Quatre contraintes

Comme vous l'avez appris, une vue c'est un rectangle et pour définir la place qu'il occupe sur un écran, il faut quatre informations :

  • x (sa position horizontale)

  • y (sa position verticale)

  • largeur

  • hauteur

AutoLayout a besoin de ces quatre informations pour savoir comment placer chaque vue sur toutes les tailles d'écran.

Si on reprend l'exemple de notre bouton, nous avons déjà parlé d'une contrainte qui nous permet de définir sa position verticale.

On veut également que notre bouton soit centré. Donc on va définir une contrainte d'alignement qui indique à AutoLayout : "le bouton doit rester centré horizontalement par rapport à la vue racine". Cela permet de positionner horizontalement notre bouton.

Pour nous assurer que notre bouton garde toujours sa taille, nous allons définir deux contraintes supplémentaires : "le bouton doit toujours avoir une largeur de 200 points et une hauteur de 80 points". Cela permet de fixer sa hauteur et sa largeur.

Avec toutes ces contraintes, notre bouton va garder la taille et la position que l'on souhaite, quelle que soit la taille de l'écran.

Pour donner ces quatre informations à AutoLayout (x, y, largeur et hauteur), on remarque que nous avons eu besoin de créer quatre contraintes. Dans 95% des cas, il vous faudra créer au moins quatre contraintes par vue. Sinon AutoLayout n'aura pas toutes les informations nécessaires pour placer correctement vos vues sur tous les écrans.

AutoLayout vs Frame

On a vu dans le cours précédent que la propriété frame de UIView permet de placer les vues par rapport à leur vue parente.

AutoLayout remplit le même rôle, mais avec l'avantage de pouvoir adapter la position et la taille des vues en fonction de l'écran. Donc dans la grande majorité des cas, vous allez désormais utiliser plutôt AutoLayout pour placer vos vues.

En résumé

  • AutoLayout permet de créer des contraintes qui définissent des relations entre deux vues.

  • Une contrainte est le plus souvent une distance entre deux vues qui doit rester constante.

  • AutoLayout a toujours besoin de quatre informations pour positionner une vue avec précision, quelle que soit la taille d'écran : position horizontale et verticale, largeur et hauteur.

  • Désormais vous utiliserez plutôt AutoLayout que frame pour placer vos vues.

Dans le prochain chapitre, nous allons apprendre à utiliser la zone protégée comme référence pour la création de vos contraintes.

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