Libérez votre développeur d'applications internes Partie 31 : Gestion des images avec les catalogues d'actifs Xcode 5

Vous avez une idée d'application mais vous n'avez pas les connaissances en programmation nécessaires pour commencer à la construire ? Dans cette série de blogs hebdomadaires, je vous emmènerai, en tant que non-programmeur, pas à pas dans le processus de création d'applications pour l'iPhone, l'iPod touch et l'iPad. Rejoignez-moi chaque semaine dans cette aventure et vous verrez à quel point il est amusant de transformer vos idées en réalité ! Voici le 31e volet de la série. Si vous venez de commencer, consultez le début de la série ici.

Une des nouvelles fonctionnalités qu'Apple a ajouté à Xcode 5 pour améliorer la gestion et les performances d'exécution des images est les catalogues d'actifs . Dans cet article, je vous donnerai un aperçu du fonctionnement des catalogues d'actifs, et nous ajouterons un catalogue d'actifs au projet iAppsReview afin que vous puissiez acquérir une expérience pratique de cette nouvelle technologie.

Maîtrisez votre iPhone en une minute par jour :

Inscrivez-vous à la newsletter "Tip of the Day" de iphonologie et nous vous enverrons chaque jour un conseil pour gagner du temps et tirer le meilleur parti de votre iPhone ou iPad.

Si vous souhaitez suivre le projet, vous pouvez obtenir la dernière version du iAppsReview sur ce lien . Si vous êtes bloqué en cours de route, vous pouvez obtenir le projet terminé à partir de ce lien .

Pourquoi utiliser les catalogues de biens ?

L'une des principales raisons d'utiliser les catalogues d'actifs est de faciliter la gestion des images de votre application. Si votre application prend en charge les appareils iOS non-Retina (plus anciens que l'iPhone 4), vous devez disposer de deux versions de chaque graphique - une pour les écrans Retina et une pour les écrans non-Retina - et des noms des images nécessaires pour les faire correspondre. Par exemple, l'icône principale de votre application pour les appareils non-Retina sera nommée Icon.png et la version Retina de l'image sera nommée Icon@2x.png . L'ajout du suffixe @2x au nom de la racine de l'image fait de ces images un ensemble correspondant et permet à iOS de déterminer l'image à charger pour les différents appareils.

Avec les catalogues de biens, vous n'avez plus besoin de maintenir cette convention de dénomination. Vous pouvez nommer les images comme vous le souhaitez et les associer dans un ensemble d'images par simple glisser-déposer dans un catalogue d'actifs (comme vous le verrez dans un instant). Pour charger une image à partir d'un catalogue d'actifs, vous pouvez appeler le UIImage:imageNamed : , en passant le nom du jeu qui contient l'image.

Un deuxième avantage de l'utilisation des catalogues d'actifs est la performance. Si votre projet a un objectif de déploiement iOS 7, Xcode compile vos catalogues d'actifs dans un format de fichier binaire d'exécution qui améliore la vitesse de votre application.

Lire aussi :  Révision : Rendez votre maison plus intelligente avec le relais Wink et les accessoires compatibles

Types de biens

Il existe trois types de biens qui peuvent être inclus dans un catalogue de biens iOS :

  • Icônes d'application - Les ensembles d'icônes d'application contiennent les icônes qui sont affichées sur l'écran d'accueil de l'iOS, les résultats de recherche Spotlight, l'application Paramètres et dans l'App Store.
  • Images de lancement - Les jeux d'images de lancement contiennent toutes les versions de l'image de lancement affichée au démarrage pour tous les appareils iOS ciblés.
  • Jeux d'images - Les jeux d'images contiennent toutes les versions d'une image qui sont nécessaires pour prendre en charge tous les appareils iOS ciblés. Cela inclut les images utilisées dans les vues de table, les barres d'onglets, les vues d'images, etc.

Examinons quelques-uns des changements apportés aux icônes des applications et aux images de lancement dans iOS 7 avant d'en savoir plus sur les catalogues d'actifs.

Icône de l'application et changements de l'image de lancement

Dans iOS 7, Apple a modifié les dimensions des icônes d'application requises. La figure 1 énumère les icônes d'application dont vous avez besoin lors du déploiement sous iOS 7.

Figure 1 - Icônes des applications iOS 7

Si votre application doit encore être compatible avec iOS 6.1 et les versions antérieures, vous devez également fournir la taille des icônes indiquée dans Figure 2 .

Figure 2 - Icônes des applications iOS 6.1 et antérieures

L'éditeur de projet Xcode 5 comporte une section qui fournit une liste de toutes les icônes d'application et des images de lancement dont vous avez besoin pour votre projet. Pour voir l'éditeur de projet, cliquez sur le tout premier nœud dans le navigateur de projet.

Ensuite, vous devez vous assurer que vous visualisez la cible plutôt que le projet , donc dans la liste déroulante en haut à gauche de l'éditeur de projet, sélectionnez Cibles> iAppsReview comme indiqué dans la figure 3 .

Figure 3 - Sélectionnez la cible de iAppsReview .

En bas de l'éditeur de projet, vous devriez voir les icônes de l'application et de la section Images de lancement illustrées dans la Figure 4 .

Figure 4 - Icônes de l'application et images de lancement

Sous App Icons , il y a trois ensembles d'images - App , Spotlight , et Settings qui indiquent où chaque ensemble d'icônes est utilisé. La colonne Kind précise le dispositif et le système d'exploitation pour lesquels une icône particulière est utilisée. La colonne Dimensions spécifie la taille requise de l'icône. La colonne Ressource est destinée à montrer l'image incluse dans votre projet qui répond aux critères de la colonne Dimensions . L'avertissement No image with correct dimensions found est incorrect, car notre exemple de projet contient plusieurs des icônes requises.

Lire aussi :  4 applications pour les bons à faire

Dans la section Images de lancement , il y a une liste d'images de lancement pour l'iPhone. Aucune image n'est affichée pour l'iPad, car il s'agit d'un projet réservé à l'iPhone. Dans la colonne Ressources , vous pouvez voir que l'éditeur du projet a correctement identifié les images de lancement du projet.

Comme vous pouvez le voir, les images sont affichées à la fois pour iOS 6.1 et les versions antérieures, ainsi que pour iOS 7 et les versions plus récentes. Dans ce cas, disons que nous voulons seulement prendre en charge iOS 7. Pour ce faire, sous Deployment Info , changez le Deployment Target en 7.0 comme indiqué dans Figure 5 .

Figure 5 - Définir la cible de déploiement à 7.0 .

Lorsque vous effectuez ce changement, le nombre d'icônes et d'images de lancement est réduit ( Figure 6) car iOS 7 ne fonctionne que sur les appareils avec un affichage Retina, vous n'avez donc besoin que des images avec des résolutions Retina.

Figure 6 - iOS 7 Icônes des applications et Images de lancement

Comme vous pouvez le voir, il n'y a que trois icônes d'application et deux images de lancement répertoriées pour iOS 7 sur l'iPhone.

Ajouter un catalogue d'actifs

Nous sommes maintenant prêts à en apprendre davantage sur les catalogues d'actifs en en ajoutant un au projet iAppsReview .

  1. Retournez à l'éditeur de projet et, sous la section App Icons , cliquez sur le bouton Use Asset Catalog ( Figure 6 ).
  1. Dans le dialogue de confirmation, laissez la case Migrer également les images de lancement cochée, puis cliquez sur le bouton Migrer ( Figure 7 ).

Figure 7 - Migrer les icônes d'application vers le catalogue d'actifs.

Une fois la migration terminée, les sections App Icons et Launch Images sont modifiées comme indiqué dans la figure 8 .

Figure 8 - Les sources des icônes et des images de lancement de l'application

Les paramètres de Source indiquent maintenant le nom des ensembles d'images qui contiennent les icônes d'application ( AppIcon ) et les images de lancement ( LaunchImage ).

  1. Pour voir les icônes des applications dans le catalogue des actifs, cliquez sur la flèche à droite de la boîte de liste Source présentée dans Figure 8 . Ceci affiche le catalogue d'actifs comme indiqué dans Figure 9 .

Figure 9 - Le jeu d'images de l'AppIcon

Vous serez peut-être surpris de constater que Xcode n'a pas automatiquement placé les icônes d'application dans les trois emplacements appropriés (étant donné que le projet contient des icônes d'application qui correspondent exactement à ce qui est requis). Comme cela ne s'est pas produit automatiquement, nous allons définir ces icônes nous-mêmes.

  1. Vous devez être "rapide sur le dessin" pour placer ces icônes. En gros, vous devez cliquer sur l'icône dans le navigateur de projet, puis la faire glisser rapidement vers le catalogue de ressources et la déposer sur AppIcon box.

Pour commencer, cliquez sur le fichier Icon29@2x.png dans le navigateur de projet, puis faites-le glisser rapidement jusqu'à la fente située à gauche dans la section AppIcon du catalogue d'actifs présenté dans la figure 10 .

Figure 10 - Glisser Icon29@2x.png vers le catalogue des actifs.

  1. Faites maintenant glisser Icon40@2x.png sur la fente du milieu et Icon60@2x.png sur la fente de droite dans la section AppIcon du catalogue d'actifs. Lorsque vous avez terminé, la section AppIcon devrait ressembler à Figure 11 .

Figure 11 - La mise à jour de la section AppIcon

  1. Voyons maintenant les images du lancement. Dans la liste à gauche du catalogue d'actifs, cliquez sur LaunchImage et vous verrez les images présentées dans Figure 12 . Heureusement, Xcode n'a eu aucun problème pour identifier correctement ces images.

Figure 12 - Les images de lancement

  1. Comme je l'ai déjà mentionné, vous pouvez également ajouter les images de vos autres applications au catalogue des actifs. Pour ce faire, cliquez sur le signe "plus" dans le coin inférieur gauche du catalogue d'actifs ( Figure 13 ).

Figure 13 - Importer des images du projet.

  1. Une boîte de dialogue s'affiche pour vous permettre de choisir les images à importer. Comme le montre la figure 14 , décochez les images suivantes, car nous les avons déjà importées dans le catalogue des actifs :
  • Default-568h@2x.png
  • Default@2x.png
  • Icon29@2x.png
  • Icon40@2x.png
  • Icon60@2x.png

Figure 14 - Choix des images à importer

  1. Ensuite, cliquez sur le bouton Importer . Cela ajoute les images sélectionnées au catalogue des actifs ( Figure 15) .

Figure 15 - Les images ajoutées au catalogue des actifs.

Notez qu'il existe une version 1x (non-Retina) et 2x (Retina) de certaines images. Vous n'avez vraiment besoin que de la version 2x puisque vous avez spécifié que la cible de déploiement de l'application est iOS 7.0, mais je voulais laisser ces images pour que vous puissiez voir à quoi elles ressemblent.

  1. Examinons une autre chose. Lancez l'application Finder et naviguez jusqu'au dossier racine du projet iAppsReview et creusez jusqu'à ce que vous voyiez le dossier Images.xcassets montré dans Figure 16 .

Figure 16 - La structure du répertoire du catalogue des actifs

Comme vous pouvez le voir, chaque jeu d'images est stocké dans son propre dossier avec un fichier Contents.json qui décrit chaque image.

Conclusion

Avec chaque version de Xcode, Apple continue à faciliter la vie du développeur d'applications. Je vous recommande vivement de déplacer les images de vos applications vers des catalogues d'actifs et de profiter de l'amélioration de l'organisation et des performances d'exécution qu'elles apportent.

Click to rate this post!
[Total: Average: ]

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *