• 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 22/02/2022

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 :

Entre plusieurs tailles d'iPhone, OpenQuizz n'affiche pas toujours pareil
OpenQuizz n'est pas adapté à toutes les tailles d'écran

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

Entre plusieurs tailles d'écran, OpenQuizz s'affiche de la même manière sur chacune.
C'est beaucoup mieux, non ?

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.

Découvrez AutoLayout

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

Contraintes ? Relations ? Vous pouvez être moins vague ?

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 ou en pourcentage) 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".

Nous voulons garder 20 points entre le bas de l'écran et le bouton
Nous voulons garder 20 points entre le bas de l'écran et le 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).

La vue racine est contrainte à 0 point de distance avec le bord de l'écran
Les contraintes de la vue racine

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.

Appréhendez les 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.

De plus, une contrainte n’est pas toujours définie en points, elle peut aussi être définie en relatif, comme pour l’égalité de taille. Nous verrons dans le prochain chapitre comment créer tous ces types de contraintes.

Définissez les 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.

La contrainte du bouton définit sa position verticale
Cette contrainte définit la position verticale du bouton

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.

La contrainte d'alignement nous permet d'aligner le bouton au centre de l'écran
Nous alignons le bouton au centre

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.

Ajoutons la hauteur et la largeur du bouton dans les contraintes
La taille du bouton est maintenant définie

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.

Comparez AutoLayout et Frame

On a vu dans le cours Concevez une application iPhone avec le modèle MVC 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 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