• 30 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 02/11/2023

Gérez les images

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 :

L'icône par défaut d'une application
L'icône par défaut d'une application

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.

Une image de 10 x 10 points selon les trois résolutions d'écrans
Une image de 10 x 10 points selon les trois résolutions d'écrans

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.xcassets dans 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.

Et si vous obteniez un diplôme OpenClassrooms ?
  • Formations jusqu’à 100 % financées
  • Date de début flexible
  • Projets professionnalisants
  • Mentorat individuel
Trouvez la formation et le financement faits pour vous
Exemple de certificat de réussite
Exemple de certificat de réussite