• 15 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

J'ai tout compris !

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 !

Nous allons faire de l'art !
Nous allons faire de l'art !

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 :

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.

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'à 514 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. Rajoutons maintenant le bouton !

Le bouton

Pour cela, nous allons retourner dans la bibliothèque des objets pour prendre l'élément Button :

Glissez-le dans l'interface sous le label.

Positionner 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 Runcmd+r ) pour vérifier que notre interface s'affiche bien !

Félicitations !
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