Comment utiliser les catalogues d'actifs pour développer votre application iOS - les mannequins

Maintenant qu'il y a plusieurs tailles d'écran pour les iPhones et (actuellement) deux résolutions, les images de votre application iOS doivent être gérées de manière plus sophistiquée autrefois. Initialement, les images avaient des noms spécifiques qui indiquaient si elles étaient des icônes, des images de lancement ou d'autres images. Avec Xcode 5, les choses sont beaucoup plus simples car, au lieu de s'appuyer sur des conventions de nommage, vous utilisez catalogues d'actifs .

Les images d'un catalogue d'éléments sont divisées en ensembles . Chaque ensemble contient une ou plusieurs représentations d'image . Vous créez un catalogue d'actifs en créant un nouveau fichier (Fichier → Nouveau → Fichier) et en choisissant Catalogue d'actifs dans la section Ressources située à gauche de la fenêtre.

La navigation à gauche de la fenêtre de l'espace de travail et la zone Utilitaire à droite sont masquées. Dans la zone de l'éditeur se trouvent deux colonnes. À gauche de la zone Editeur, une liste des ensembles est affichée.

1. Sélectionnez le jeu d'images que vous souhaitez utiliser dans la liste des jeux.

   Le jeu d'icônes d'applications est sélectionné. Pour suivre, sélectionnez-le maintenant.

2. Notez que la visionneuse d'ensemble (la colonne de droite dans le catalogue d'actifs) reflète maintenant les images de l'ensemble sélectionné (AppIcon dans ce cas).

   Il peut y avoir plusieurs représentations d'une seule image reflétant les idiomes appropriés (iPhone ou iPad).

3. Si vous le souhaitez, vous pouvez modifier le nom de l'ensemble dans la zone Statut ou en double-cliquant et en modifiant le nom dans la liste.

   Vous pouvez également spécifier les représentations (iPad, iPhone, Mac) que vous souhaitez utiliser en haut de la zone d'état et les échelles appropriées pour chacune (1x pour les écrans non-Retina et 2x pour Retina).

4. Sélectionnez la représentation avec laquelle vous voulez travailler dans la zone d'édition.

   La zone d'état située à droite de la fenêtre de l'espace de travail reflète les détails de la représentation sélectionnée sous les informations définies.

   

Un catalogue d'actifs peut contenir quatre types d'images:

• Icônes d'application: Vous pensez peut-être que vous avez une seule icône d'application, mais vous vous trompez. Vous avez en fait une image d'icône d'application avec une multitude d'idiomes et d'échelles. Chaque représentation a sa taille affichée à la fois dans la zone Editeur et dans la zone Statut afin que vous sachiez avec quoi vous devriez travailler. Il est préférable de ne pas renommer cet ensemble.

• Lancer les images: Ce sont les images qui s'affichent le plus tôt possible lors du lancement de l'application. Ils devraient fournir l'arrière-plan du premier écran que l'utilisateur voit. Lorsque le lancement est terminé, l'écran actuel et ses données apparaissent.L'effet est que l'arrière-plan est dessiné et que le texte et les graphiques pertinents sont dessinés au-dessus. Une image de lancement est définie dans le modèle Master-Detail.

  Notez que dans la zone Statut, vous pouvez spécifier les détails des images de lancement, y compris non seulement l'idiome mais aussi l'orientation. Ce sont des cases à cocher: Vous n'avez qu'à fournir ceux que vous choisissez. Il est préférable de ne pas renommer cet ensemble.

• Images: Ce sont toutes les autres images de votre application. À l'aide du bouton en bas à droite de la zone Editeur, vous pouvez afficher la synthèse qui vous permet de modifier les représentations pour un ensemble d'images spécifique (par défaut, il existe deux idiomes et deux échelles, mais cela peut changer avec le temps). Vous pouvez également regarder le découpage d'image.

• Icônes OS X: Pour être complet, ceux-ci sont mentionnés.

Vous pouvez voir les représentations des images de lancement.

Vous faites glisser vos images de votre disque dans la représentation appropriée de l'ensemble approprié. Pour les icônes d'applications et les images de lancement, si l'image que vous essayez de faire glisser est de la mauvaise taille, vous obtiendrez une erreur. Notez que pour les icônes d'application et les images de lancement, il existe différentes images pour les différents périphériques. Notez également qu'il existe des versions séparées pour les écrans Retina (2X) et non-Retina (1X).

Si vous utilisez l'un des modèles Xcode, vous disposez d'un catalogue d'actifs avec une icône et des images de lancement. Vous pouvez y ajouter vos propres ensembles d'images. Il a des représentations d'affichage Retina et non-Retina pour Universal, iPhone, iPad et Mac. (Il y a aussi un écran Retina pour l'iPhone 4.)

Vous pouvez choisir les représentations que vous voulez pour votre ensemble d'images en utilisant le sous-menu Editeur → Représentants d'images de périphériques.

De nombreux développeurs ne modifient pas le catalogue d'actifs du modèle qui contient les images de lancement et les icônes d'application. Au lieu de cela, ils créent un catalogue d'actifs distinct pour leurs propres ensembles d'images. Voici comment procéder:

1. Choisissez Fichier → Nouveau → Fichier.

2. Dans la boîte de dialogue qui s'affiche, sélectionnez Ressource sous iOS à gauche.

3. Sélectionnez Catalogue d'actifs.

4. Nommez et enregistrez le fichier dans votre projet.

   Si vous le souhaitez, vous pouvez placer le fichier dans le groupe Fichiers de support de votre projet (ou ailleurs dans votre choix).

Le code pré-Xcode 5 pour manipuler les images n'était pas joli. Aujourd'hui, après avoir configuré votre (vos) catalogue (s) d'images, il vous suffit de sélectionner le nom de l'ensemble d'images souhaité (souvent à partir d'un menu local dans la zone Utilitaire). Au moment de l'exécution, l'image appropriée est choisie pour vous en fonction de l'appareil utilisé. Vous n'avez rien d'autre à faire que d'utiliser le nom de l'ensemble d'images: iOS choisira le bon fichier.