Editeur de liste d'images (FireMonkey)

Remonter à Editeurs de propriétés - Index

Utilisez l'éditeur de liste d'images à la conception pour ajouter des bitmaps et des icônes à une liste d'images.

Vous pouvez regarder la vidéo expliquant comment utiliser l'éditeur de liste d'images pour créer et modifier des listes d'images (EN).

Ouverture de l'éditeur de liste d'images

1. Cherchez un objet TImageList dans le Concepteur de fiches ou la vue Structure.
2. Effectuez l'une des actions suivantes :
   • Double-cliquez sur l'objet TImageList.
   • Cliquez avec le bouton droit sur l'objet TImageList et sélectionnez Editeur de liste d'images dans le menu contextuel.

L'éditeur de liste d'images s'ouvre pour modifier l'objet TImageList sélectionné.

Vous pouvez utiliser l'exemple ImageList pour tester toutes les fonctions et fonctionnalités présentées dans cette rubrique.

Volet Liste d'images

Le volet Liste d'images présente un aperçu de toutes les images de la collection Destination de la liste d'images en cours. Les numéros situés au-dessus des aperçus d'images indiquent les index (les positions), en partant de zéro, des images au sein de la liste d'images. Vous pouvez déplacer un aperçu d'image à une nouvelle position pour changer la position de l'image dans la collection Destination de la liste d'images.

Sélectionnez un aperçu d'image pour afficher l'image dans le volet Image sélectionnée.

Le volet Liste d'images fournit les commandes suivantes qui peuvent être activées en utilisant des boutons, icônes d'outils et commandes du menu contextuel.

Commande	Conseil	Description
Ajouter	Ajouter des images du fichier dans la liste d'images (Ctrl+O)	Ouvre la boîte de dialogue Ajouter des images qui vous permet de sélectionner une image à ajouter dans la liste d'images. Vous pouvez effectuer une sélection parmi des formats de fichier graphique tels que .bmp, .png, .jpeg, .gif, .tiff, etc. La boîte de dialogue invitant à taper le nom du nouvel élément source s'ouvre ; par défaut, elle affiche le nom du fichier sélectionné. Si la taille d'une image à ajouter est un multiple de la largeur et de la hauteur spécifiées, un message vous demande si l'éditeur de liste d'images doit diviser l'image en plusieurs images. Cela est particulièrement utile pour les bitmaps de la barre d'outils qui sont généralement composés de plusieurs petites images affichées dans un ordre précis et stockées sous la forme d'un bitmap plus grand. L'image ajoutée apparaît en surbrillance dans la liste d'aperçus d'images du volet Liste d'images et s'affiche dans le volet Image sélectionnée. Notez que l'image est ajoutée dans la collection Source et s'affiche dans le volet Sources des images. La boîte de dialogue Ajouter des images vous permet de sélectionner et d'ajouter plusieurs images à la fois. Vous pouvez ajouter plusieurs fichiers ayant des noms correspondant au masque suivant : NN.eee, FileNAme.eee, FileNAmeNN.eee, FileName_NN.eee ou [email protected], où eee fait référence à l'extension de fichier graphique et NN à une valeur entière quelconque. Remarque : Vous pouvez ajouter plusieurs fichiers ayant le même nom de fichier (FileName). En effet, l'éditeur de liste d'images les interprète comme une seule image source ayant différentes échelles. Par exemple, si vous ajoutez en une seule fois trois images ayant des tailles physiques différentes nommées test_16.png, test_24.png et test_32.png dans le volet Liste d'images, les images sont ajoutées à la collection Source comme une seule image source appelée test et ayant trois échelles différentes. Dans ce cas, l'image la plus petite a l'échelle 1.0. Les images ont l'échelle 1.5, 2, 3, etc. Cliquez sur l'image test dans le volet Sources des images pour voir les différentes échelles de l'image test.
Supprimer	Supprimer l'élément sélectionné de la liste d'images	Retire l'image sélectionnée du volet Liste d'images (à partir des images dans la collection Destination). Notez que l'image n'est pas retirée de la collection Source affichée dans le volet Sources des images.
Exporter	Exporte la liste d'images dans un fichier	Ouvre la boîte de dialogue Exporter des images qui vous permet d'enregistrer la liste d'images en cours dans un fichier. Vous pouvez effectuer une sélection parmi des formats de fichier graphique tels que .bmp, .png, .jpeg, .gif, .tiff, etc. Toutes les images de la liste d'images en cours sont collées ensemble afin d'être enregistrées dans un fichier spécifié. Chaque image est enregistrée avec la largeur et la hauteur spécifiées.
Largeur Hauteur		Les valeurs des champs Largeur et Hauteur sont utilisées lors les commandes Ajouter et Exporter (voir la description de ces commandes).
Nouvelle image	Ajouter une nouvelle image à la liste d'images	Ajoute une image sélectionnée dans les sources des images ou dans une couche sélectionnée dans l'image sélectionnée. L'image ajoutée apparaît en surbrillance dans la liste d'aperçus d'images. Si vous avez ajouté plusieurs images, leurs numéros ont des valeurs séquentielles dans la liste d'images.

Volet Image sélectionnée

Le volet Image sélectionnée présente des informations détaillées sur l'image de destination sélectionnée dans le volet Liste d'images. (Voir TCustomDestinationItem.Layers.)

Pour afficher une autre image, cliquez sur un autre aperçu d'image dans le volet Liste d'images.

Le volet Image sélectionnée fournit les commandes suivantes qui peuvent être activées en utilisant des boutons, icônes d'outils et commandes du menu contextuel.

Commande	Conseil	Description
Nouvelle couche	Ajouter une nouvelle couche dans l'image sélectionnée	Ajoute une nouvelle couche dans le volet Image sélectionnée. (Voir TLayer.) Lorsqu'une image est sélectionnée dans le volet Sources des images, cette commande ajoute alors une nouvelle couche contenant l'image (avec ses coordonnées et sa taille) sélectionnée dans le volet Sources des images. Lorsqu'une couche est sélectionnée dans le volet Image sélectionnée, cette commande crée alors une copie de la couche sélectionnée.
Supprimer la couche	Supprimer la couche sélectionnée de l'image sélectionnée	Supprime la couche sélectionnée du volet Image sélectionnée.
	Déplacer vers le haut la couche sélectionnée dans l'image sélectionnée Déplacer vers le bas la couche sélectionnée dans l'image sélectionnée	Avec ces flèches, vous pouvez changer l'ordre des couches. Notez que l'image d'une couche de numéro supérieur est dessinée sur les images dessinées par les couches précédentes en écrasant les parties de recouvrement de l'image générée.
Afficher l'éditeur		La sélection de la commande Afficher l'éditeur (à partir du menu contextuel) ou un double-clic sur une image a pour effet d'activer l'éditeur MultiResBitmap, dans lequel vous pouvez modifier le bitmap multi-résolution dans la couche sélectionnée.

Le volet Image sélectionnée est utilisé pour former des images utilisées dans la liste d'images. Chaque image est une somme de sous-images placées dans les couches, une sous-image dans chaque couche. Chaque sous-image est un bitmap multi-résolution. Vous pouvez manipuler les couches d'images. Le volet Image sélectionnée présente les différentes couches. Chaque couche affiche un bitmap multi-résolution. Double-cliquer sur un bitmap multi-résolution active l'éditeur MultiResBitmap, dans lequel vous pouvez modifier le bitmap multi-résolution.

Chaque couche est affichée dans un volet qui présente la sous-image et les propriétés suivantes :

• Le bouton de liste Nom d'image où vous pouvez sélectionner le nom du bitmap multi-résolution à utiliser dans cette couche.
• Les paramètres Gauche, Haut, Largeur et Hauteur du rectangle (pour l'échelle 1) utilisés pour dessiner le bitmap multi-résolution de cette couche. Tous ces rectangles s'intersectent avec le rectangle d'image résultant. Les bitmaps multi-résolution de toutes les couches sont dessinés dans les rectangles correspondants en écrasant les parties de recouvrement des bitmaps multi-résolution des couches inférieures.

Si un nom spécifié n'existe pas ou si le rectangle spécifié ne s'intersecte pas avec le rectangle de l'image, rien n'est alors dessiné et aucune exception n'est déclenchée. Vous pouvez lors de l'exécution définir l'image appropriée, et les images de tous les contrôles seront automatiquement mises à jour en utilisant cette image.

Typiquement, chaque image contient une seule couche. Toutefois, vous souhaiterez dans certains cas utiliser plusieurs couches pour former une image. Par exemple, il peut être pratique d'utiliser une couche distincte contenant une image représentant 'un texte barré' ou une 'loupe'. Cette couche peut alors être placée sur des couches contenant d'autres images ; par exemple, sur une couche contenant une 'liste d'images' ou une 'enveloppe'. Les deux couches peuvent alors former une image combinée, telle qu'une image 'liste d'images barrée' ou 'loupe sur enveloppe'.

La figure suivante illustre l'utilisation de deux couches pour former une image Liste d'images barrée :

L'utilisation de produit l'image

Comparez l'image Liste d'images barrée à l'image obtenue par dislocation du rectangle de la couche supérieure, contenant l'image 'Texte barré', avec Gauche = 5 et Haut = 6.

Cette dislocation est présentée dans la figure suivante :

produit l'image

Si le rectangle affiché dans le volet Couche couvre (montre) uniquement la partie du bitmap multi-résolution entier utilisée par la couche, ce rectangle peut alors être déplacé sur l'image entière. Pour illustrer cette fonctionnalité, chargez une grande image dans une couche.

Par exemple, chargez la grande image My 1 avec Largeur = 80 et Hauteur = 32 :

Si vous définissez Largeur = 16 et Hauteur = 16 pour réduire la taille du rectangle affiché dans le volet Couche, ce dernier ressemble à ceci :

Pour illustrer ce qui se produit, double-cliquez sur un bitmap multi-résolution dans un volet Couche pour activer l'éditeur MultiResBitmap. L'éditeur MultiResBitmap présente le bitmap multi-résolution entier. Dans ce bitmap, vous apercevez le rectangle sélectionné qui correspond au rectangle affiché dans la couche, et voyez que ce rectangle montre la même image que dans la couche :

A l'aide de la souris, vous pouvez déplacer et redimensionner le rectangle sélectionné comme une fenêtre d'affichage sur le bitmap entier. Voyez quelle partie du bitmap apparaît dans le volet Couche. Si vous placez le pointeur de la souris dans le volet Couche, vous pouvez alors déplacer le rectangle affiché en utilisant 'CTRL + molette de la souris' ou en cliquant sur les flèches gauche et droite dans la partie supérieure du volet Couche.

Volet Sources des images

Le volet Sources des images affiche toutes les images dans la collection Source de la liste d'images en cours. Ces images sont utilisées pour construire des images dans la collection Destination (affichées dans le volet Liste d'images).

Notez que lorsque vous supprimez un aperçu d'image de la collection Liste d'images, l'image source n'est pas supprimée dans la collection Sources des images. Utilisez le bouton d'outil Supprimer la source pour supprimer un élément de la collection Sources des images.

Icône	Conseil	Description
Nouvelle source	Ajouter un nouvel élément dans Sources des images	Ce bouton montre le message demandant le nom du nouvel élément source puis active l'éditeur MultiResBitmap. A l'aide de l'éditeur MultiResBitmap, vous pouvez ajouter plusieurs images optimisées pour différentes échelles. Lors de l'exécution, une application sélectionne l'image ayant l'échelle la plus appropriée.
Supprimer la source	Supprimer l'élément sélectionné de Sources des images	Supprime l'élément sélectionné de la collection Sources.
	Déplacer vers le haut l'élément sélectionné dans Sources des images Déplacer vers le bas l'élément sélectionné dans Sources des images	A l'aide de ces flèches, vous pouvez déplacer vers le haut et vers le bas les images source, en changeant leur ordre. Vous pouvez utiliser ces flèches à votre convenance.
Effacer	Effacer les informations de conception	Les noms des fichiers à partir desquels les images source ont été chargées, les tailles utilisateur des images et les couleurs transparentes sont uniquement utilisés à la conception. Toutefois, ces paramètres sont stockés par défaut dans le fichier fmx. L'icône Effacer supprime ces informations facultatives du fichier fmx pour toutes les images source.
Afficher l'éditeur		La sélection de la commande Afficher l'éditeur (à partir du menu contextuel) ou un double-clic sur une image a pour effet d'activer l'éditeur MultiResBitmap, dans lequel vous pouvez modifier le bitmap multi-résolution sélectionné. (Voir TLayer.MultiResBitmap.)

Boutons

L'éditeur de liste d'images contient les boutons suivants.

Bouton	Description
OK	Applique vos modifications et ferme l'éditeur. (Ctrl+Entrée).
Appliquer	Applique vos modifications sans fermer l'éditeur.
Aide	Affiche cette page.
Annuler	Ferme l'éditeur sans appliquer les modifications.

Voir aussi

• Vidéo expliquant comment utiliser l'éditeur de liste d'images pour créer et modifier des listes d'images (EN) Présentation des fonctionnalités avancées et non triviales de l'éditeur de listes d'images.

• Utilisation des listes d'images de TImageList en tant que collections centralisées d'images
• Vidéo présentant les étapes typiques nécessaires à la création d'une nouvelle liste d'images dans votre projet FireMonkey (EN)

• Exemple FMX.ImageList
• Vidéo présentant les fonctionnalités programmées dans 'Exemple FMX.ImageList' (EN)

• FMX.ImgList.TImageList
• Editeur MultiResBitmap
• Vidéo présentant l'usage typique de l'éditeur MultiResBitmap (EN)
• Editeur de liste d'images (VCL)