Notre dévoué designer nous a préparé un joli petit design pour notre application. Dans les chapitres de cette partie, nous allons préparer notre application pour que nous puissions facilement intégrer le design prévu par la suite. Cette partie permet donc surtout de préparer le terrain en apprenant au passage quelques techniques incontournables d'iOS. Et la première d'entre elles, c'est la gestion des images dans une application. Voyons ça ensemble dans ce chapitre !
Le dossier d'images
Notre designer a préparé pour vous les images que l'on va afficher dans notre application. Je vous invite à les télécharger à cette adresse. Ouvrez le dossier et voyons ensemble ce qu'il comporte :
Nous avons donc 3 images différentes, de trois formats différents. Et un dossierIconsqui contient l'icône de l'application en différentes tailles.
Découvrir les assets
Pour l'instant, si vous lancez votre application et qu'ensuite, vous appuyez sur le bouton Home du simulateur, vous verrez que notre icône d'application ressemble à ceci :
C'est l'icône par défaut d'une application. Nous allons changer ça en chargeant dans notre projet l'icône que nous avons trouvée dans le dossier. Allons-y !
Les images dans un projet Xcode, on appelle ça des assets. Et pour ajouter de nouveaux assets, il faut aller dans le dossier dédié Assets.xcassets :
En ouvrant ce dossier, vous voyez en haut à gauche l'inscription App Icon. Cliquez dessus et vous voyez s'afficher ceci :
Dans ce dossier, vous avez toutes les tailles d'icônes que le logiciel réclame.
Pourquoi toutes ces tailles ?
D'une part, la taille dépend de l'appareil. L'icône de l'application ne s'affiche pas de la même manière sur un iPhone ou un iPad.
D'autre part, dans iOS, l'icône de l'application est utilisée à divers endroits et pour qu'elle s'affiche correctement à chacun de ses endroits, il faut donner lui donner la bonne taille. Précisément, il y a 4 tailles différentes. Voyons un peu à quoi elles correspondent :
Dans le schéma ci-dessus, j'ai pris l'exemple de l'icône de l'application Message affichée tour dans : une notification, dans les réglages de l'iPhone, dans la recherche et sur l'icône de l'application elle-même.
L'écran de l'iPhone
Mais c'est quoi les 2x et 3x?
Pour répondre à cette question, il faut comprendre rapidement comment fonctionne un écran. Un écran, c'est une grille de pixels, chaque pixel étant un petit carré de couleur uniforme.
Avec l'arrivée de l'iPhone 4, Apple a créé l'écran Retina. Cet écran a une densité de pixels deux fois meilleure que l'écran des iPhones précédents. Cela veut dire que sur un même espace, mettons 1 cm2, l'écran affiche 2 fois plus de pixels. Depuis, ils ont encore amélioré l'écran. Les écrans des iPhone "Plus" (6+, 6s+, 7+, 8+) ainsi que celui de l'iPhone X ont une densité de pixels 3 fois meilleure (on les appelle Retina HD).
Ce changement a posé un problème. On ne peut plus parler de la taille d'une image en nombre de pixels, car cela dépend de l'écran. Du coup, Apple a créé une autre unité : le point (pt). Et selon l'écran, un point est automatiquement transformé avec le bon nombre de pixels.
Du coup, il faut fournir toutes les images qui vont être affichées par l'application en trois tailles différentes. Et pour cela il existe une convention spécifique. Prenons un fichier image.jpg. Voilà comment nous allons le nommer pour les différentes tailles d'écran :
On ajoute @2x et @3x à la fin du nom du fichier pour spécifier le niveau de densité de pixel de l'image. C'est ce qui a été fait dans le dossier d'images que vous avez téléchargé.
Changer l'icône de l'application
On va pouvoir maintenant simplement glisser-déposer nos icônes depuis notre dossier vers les assets. Comme ceci :
Et voilà, nous avons maintenant une belle icône d'application :
Charger les images
En plus de l'icône, notre application va également afficher des images. Pour les rajouter, il suffit de les glisser par paquet de trois (pour les trois résolutions d'écrans) dans les assets comme ceci :
Grâce à la convention de nommage, Xcode reconnaît que ces trois fichiers représentent tous la même image en trois résolutions différentes. Il les groupe tous automatiquement sous le même nom Icon Correct qui est le nom du fichier sans l'extension.
Vous pouvez répéter l'opération pour les deux autres images. Et voilà notre projet contient de belles images que l'on va pouvoir utiliser !
En résumé
Pour gérer les images et les icônes d'une application, on utilise le dossier
Assets.xcassetsdans lequel on dépose les fichiers images que l'on souhaite.Il existe plusieurs formats d'icônes d'application. En effet la taille de l'icône dépend :
De l'appareil : iPhone ou iPad
Du contexte dans lequel l'icône est utilisée dans iOS : notifications, réglages, etc.
Les iPhone et iPad ont des écrans de trois résolutions différentes : 1x, 2x et 3x. Pour cette raison, il faut fournir toutes les images, en 3 résolutions pour qu'elles s'affichent correctement sur tous les écrans.
Je vous invite à respecter la convention de nommage pour faciliter l'importation des images.
