On a ajouté des vues dans notre appli, très bien ! Mais comment faire pour les disposer précisément, les centrer, les aligner au bord, choisir leurs tailles, etc ?
La première question à vous poser avant de coder, c'est :
Comment l'utilisateur de mon appli veut voir apparaître les éléments ?
Quand on a une idée d'appli, on ne se jette pas sur Xcode. On doit réfléchir au design de cette appli. D'ailleurs, Apple n'accepte pas les applications pauvres en design.
On parlera d'UI et d'UX :
UI pour User Interface : c'est le design, la richesse visuelle de mon application. Une appli est riche en design lorsqu'elle est agréable à regarder.
UX pour User eXperience : c'est plutôt de l'ergonomie. Imaginez que sur l'appli de Facebook, il faille cliquer sur 5 boutons différents pour accéder à son profil, ce serait assez pénible pour l'utilisateur.
Affinons la mise en page de notre appli !
Pour notre exercice "4 + 4", j'ai choisi la police Helvetica pour tous les éléments.
Je veux centrer toutes les vues horizontalement, mon champ de texte sera centré verticalement également : on choisit le positionnement des vues avec les petites icônes en bas à droite du storyboard.
Cette icône 
nous permet d'indiquer l'alignement de notre vue dans le controller.
Celle-ci 
gère les contraintes entre les vues ainsi que la largeur et la hauteur des éléments.
L'icône stack 
permet de créer des conteneurs autour des vues sélectionnées.
Et la dernière 
propose un menu de gestion d'erreurs et de conflits de contraintes (personnellement, ça ne m'a jamais servi ;)).
Pour centrer les vues, on clique sur 
et on coche "Horizontally in container" en laissant une valeur de 0, puis on clique sur "Add * constraints" (pour le text field, on cochera également "Vertically in container").
Pour choisir le placement vertical, on clique sur 
et dans la fenêtre ci-dessous on clique sur les marges qui nous intéressent (Les "I" rouges) et on entre la valeur de la marge :
Le text field n'aura pas de bordures sauf une ligne en bas. Pour ça, on ajoute une vue ("UIView") en dessous avec un fond ("background color") noir qu'on place juste en-dessous du text field et d'une hauteur de 1.
Le bouton sera en bas de l'écran et le label de consigne sera juste au-dessus du champ de texte.
Bien entendu, vous êtes complètement libre d'agencer les éléments comme bon vous semble ! Je vais simplement expliquer mes choix :
Un élément centré indique un élément principal de la page, un élément à regarder ;
Les titres sont systématiquement en haut pour montrer au lecteur l'endroit où il se trouve dans l'appli ;
Pour les consignes ou instructions, même si ce n'est pas systématique elles sont plus agréables juste au-dessus ou juste à côté des champs de texte concernés ;
Les conclusions, les fins de page, les boutons de changement de page sont toujours placés en bas des pages.
Enfin, pour qu'une application soit harmonieuse, on utilise la même police partout (sauf éléments qui doivent être différent).
Un mot sur les storyboards
Plusieurs storyboards
Dans beaucoup d'applis, les éléments sont disposés différemment selon l'appareil : iPhone ou iPad.
En général, on crée deux storyboards : un pour l'iPad et un pour l'iPhone.
Pour le moment, notre application est très légère. Nous n'utiliserons donc qu'un seul storyboard adapté pour iPhone et iPad.
Storyboard vs. Code
Tout ce qui est réalisé dans le storyboard peut être codé en Swift : centrer les boutons, changer la police, etc.
Cela n'affecte pas la vitesse de l'application ; simplement, pour une grosse application, cela prend plus de lignes de code et vous n'avez pas de visuel avant de lancer l'appli. En revanche, cela vous permet d'avoir un contrôle total sur les éléments.
Le compromis souvent adopté est de créer les vues dans un storyboard pour avoir un visuel et ne rien oublier et de les gérer dynamiquement (par le code).
Je vous laisse jouer avec le storyboard pour obtenir le style que vous voulez.
Bon, c'est un cours de Swift, non ? Promis, on touche au code dans le prochain chapitre !
