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.
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".
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.
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.
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.
Comparez AutoLayout et Frame
On a vu dans le cours Développez 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
framepour 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.
