Nous avons maintenant notre icône, nos images et notre police. Dans ce chapitre, nous allons voir un nouvel élément essentiel d'une application : la page de lancement.
La page de lancement
C'est quoi la page de lancement ?
La page de lancement, c'est une image fixe que vous voyez lorsque vous ouvrez une application après l'avoir quittée. Cette page vous est présentée en attendant que l'iPhone ait fini de faire tous les calculs nécessaires à la présentation de l'application elle-même.
Voici les pages de lancement de quelques applications célèbres :
L'interface builder
Dans votre projet, vous avez deux fichiers avec l'extension .storyboard. Ces deux fichiers sont ce qu'on appelle des fichiers d'interface builder. C'est-à-dire qu'ils vont nous permettre de dessiner nos interfaces.
Le premier s'appelle Main.storyboard, c'est dans ce fichier que nous allons dessiner la ou les interfaces de notre application. Mais celui qui nous intéresse ici, c'est le fichier LaunchScreen.storyboard. Car c'est dans ce fichier que nous allons dessiner notre page de lancement.
Ouvrez le fichier, vous arrivez sur ceci :
Dans cette image, je vous ai rappelé les principales sections de l'interface builder.
La palette de couleur
Nous allons maintenant modifier la couleur de fond de notre interface.
Pour cela, nous allons d'abord cliquer sur la vue principale puis cliquer dans l'inspecteur d'attribut à droite sur le carré blanc. On voit apparaitre alors le sélecteur de couleur :
Nous devons respecter pour cette application la charte graphique qui nous a été fournie par notre designer ce qui inclut les images (OK), la police (OK) et les couleurs (pas encore OK...). Donc je vous propose de voir comment créer une palette de couleur que nous allons pouvoir facilement réutiliser.
Voici la palette de l'application OpenQuizz :
Pour recréer cette palette dans Xcode, il faut commencer par cliquer sur l'onglet palette (le 3e onglet) dans le sélecteur de couleur :
Ensuite, cliquez sur la roue dentée et choisissez new :
Vous pouvez à nouveau cliquer sur la roue dentée puis choisir Rename... pour renommer votre nouvelle palette et l'appeler OpenQuizz.
Ensuite, pour ajouter des couleurs dans votre palette, il suffit de sélectionner la couleur souhaitée avec la pipette et de cliquer sur le bouton + comme ceci :
Ensuite il vous suffit de double cliquer sur le nom de votre couleur pour le changer. Vous pouvez répéter l'opération pour toutes les couleurs de la palette ci-dessus. À la fin votre palette doit ressembler à ceci :
Construction de l'interface
On va tout de suite utiliser notre nouvelle palette pour changer la couleur de fond. Je vous laisse le faire. Choisissez la couleur Dark Blue.
Et maintenant, nous allons rajouter une image (le gros point d'interrogation) au milieu de notre interface. Pour cela, je vous invite à aller en bas à droite de l'écran, dans la bibliothèque des objets. Et vous allez choisir le dernier onglet : la bibliothèque des médias.
Ici vous retrouvez les images que nous avons ajoutées dans les assets précédemment. Vous n'avez plus qu'à glisser le point d'interrogation vers le centre de l'interface :
Nous n'avons plus qu'à lancer l'application et admirer le résultat !
À l'ouverture de l'application, on peut voir notre page de lancement. Et ensuite apparaît notre application (une page blanche pour le moment).
En résumé
La page de lancement est une image fixe qui s'affiche au lancement de votre application pendant que l'application se charge.
Vous créez votre page de lancement dans le fichier de création d'interfaces
LaunchScreen.storyboard.Dans le sélecteur de couleur, dans l'onglet palette, vous pouvez créer votre propre palette de couleur.
