Vous êtes partant pour un peu de design ? Dans ce chapitre, nous allons préparer toute l'interface de notre application !
Changez la couleur de fond
Commençons par changer la couleur de fond de notre interface. Pour cela, retournons dans le storyboard. Et sélectionnons dans la liste de gauche l'objet View.
L'objet View
OK, mais c'est quoi cette "View " ?
Nous y consacrerons un chapitre complet dans un prochain cours. Pour le moment, vous avez simplement besoin de savoir que c'est le composant le plus basique que l'on peut mettre sur une interface et qu'il ressemble à un rectangle blanc par défaut. Chaque interface contient au minimum un objet View et nous allons essayer ici d'en changer sa couleur.
L'inspecteur d'attributs
Pour cela, nous allons retourner dans les utilitaires, le panneau de droite. Choisissez l'onglet inspecteur d'attributs en cliquant sur l'icône suivante (celle en bleue) :
Détaillons un peu ce qui s'y trouve :
Comme vous pouvez le voir, on y trouve les différents attributs de la vue. Certains sont visuels comme Background (la couleur du rectangle) ou Alpha (son opacité entre 0 et 1), d'autres concernent la logique de la vue (nous ne les aborderons pas ici).
Cliquez sur le carré blanc à droite de Background et changez la couleur de fond de votre application.
Changez le label
Maintenant que nous avons une magnifique couleur de fond, nous allons nous intéresser à un autre élément : le label. Bonne nouvelle ! Nous en avons déjà un à l'écran : le Hello World. Mais il n'est pas très beau… Nous allons y remédier !
Tout d'abord, nous allons l'agrandir. Faites-le glisser en haut à gauche jusqu'à ce que des lignes bleues apparaissent comme ceci :
Puis sélectionnez le coin inférieur droit pour agrandir le label jusqu'à la ligne bleue de droite et jusqu'à 645 pixels de hauteur comme ceci :
Retournons maintenant dans l'inspecteur d'attributs pour mettre tout ça en forme.
Comme vous pouvez le voir, les paramètres que nous propose Xcode ne sont plus les mêmes. On peut maintenant voir ceux de l'objet Label. Donc on peut changer la police, sa couleur, le nombre de lignes, etc.
Je vous laisse changer les paramètres à votre guise. Voici mes changements :
Vous trouvez ça beau ? Parfait ! Un petit problème subsiste. La phrase ne s'affiche pas complètement :
C'est parce que le paramètre Lines est resté à 1. Il s'agit du nombre de lignes. Si vous augmentez ce paramètre, vous verrez la phrase se répartir sur autant de lignes.
J'espère que vous êtes fiers de votre design. Ajoutons maintenant le bouton !
Ajoutez le bouton
Pour cela, nous allons retourner dans la bibliothèque des objets pour prendre l'élément Button :
Positionnez le bouton
Pour le positionner précisément et définir sa taille, je vous propose une méthode différente.
Dans les utilitaires – panneau de droite – choisissez l'onglet inspecteur de taille (Size Inspector) :
Dans cet onglet, nous allons pouvoir indiquer la position et la taille exacte que nous souhaitons au pixel près. Je vous invite à reproduire mes paramètres :
Dans l'ordre :
X : permet de définir la position horizontale en définissant la distance par rapport au bord gauche
Y : permet de définir la position verticale en définissant la distance par rapport au bord haut
Width : la largeur
Height : la hauteur
Stylisez le bouton
Retournons maintenant dans l'inspecteur d'attribut et je vous laisse constater qu'à nouveau les paramètres sur lesquels on peut agir ont été modifiés.
Je vous laisse faire votre design à votre sauce ! Pour info, voici les paramètres que j'ai choisis :
Titre : ET MOI ?
Police : Helvetica
Taille de police : 45
Couleur du texte : Rouge 99 / Vert 97 / Bleu 97
Couleur du fond : Rouge 216 / Vert 216 / Bleu 216
Et voilà ! Allez, cliquons sur Run ( cmd+r ) pour vérifier que notre interface s'affiche bien !
Félicitations !
N'hésitez pas à jouer un peu avec les paramètres de votre bouton ou de votre label pour vous familiariser avec le Storyboard et l'inspecteur d'attribut !
En résumé
Vous pouvez ajouter des composants à votre interface en utilisant la bibliothèque des objets dans le panneau "Utilitaires".
Pour les positionner ou changer leur taille, vous pouvez :
utiliser la souris et vous servir des lignes de guidage bleues ;
utiliser l'inspecteur de taille et définir au pixel près la taille et la position d'un composant.
Pour modifier l'apparence, vous pouvez utiliser l'inspecteur d'attributs et modifier leurs propriétés.
Maintenant que votre interface est prête, nous allons commencer à coder !
