• 8 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 24/05/2022

Préparez l'interface

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

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.

Dans le navigateur, View est sélectionné. Dans la view l'interface d'iPhone affiche Hello World! Une flèche indique un bouton sur lequel cliquer si on ne voit pas le volet de gauche

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 :

Detail des elements e la View : Content Mode, Semantic, Tag, Interaction, Alpha, Background, Tint, Drawing, Stretching
L'inspecteur d'attributs

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 :

Hello World est glissé tout en haut à gauche de l'interface de l'iPhone, avec les lignes de guidage apparentes
Ainsi, c'est mieux

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 :

Le label est agrandit sur l'interface de l'iPhone. Une flèche indique l'endroit où la longueur et la largeur du label sont indiqués
Agrandir le label

Retournons maintenant dans l'inspecteur d'attributs pour mettre tout ça en forme.

Paramètres de l'objet Label :  Text, Color, Font, Dynamic Type, Alignment, Lines, Behavior, Tooltip, Baseline, Lien Break, Autoshrink
Paramètres de l'objet Label

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 :

Text : Plain Tu es le Steve Jobs de la raclette party ! Color : (bordeau) Font : American Typewriter 6 Alignment : centré Lines : 1
Bon… pour le texte, je suis sûr que vous trouverez mieux !

Vous trouvez ça beau ? Parfait ! Un petit problème subsiste. La phrase ne s'affiche pas complètement :

Tu es le S… apparaît sur l'interface
le S… ?

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 :

L'élément Button a été inséré à gauche sous le Label
Glissez le button dans l'interface sous le label.

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) :

Onglet inspection de taille dans Xcode
Onglet Inspection de taille

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 :

Mes paramètres View : Show (x = width, 69 - 275) et (y = height 700 - 100) et Arrange (Position View)
Paramètres de position et de taille

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 ! 

Notre interface affiche bien Tu es le Steve Jobs de la raclette party et le bouton ET MOI ?
Run time !

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 !

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