TImageList

Allgemeines und ein wenig Theorie zur TImageList

Die Komponente TImageList ist für das speichern und ablegen von Bildern dar. Die Komponente erstellt einem Index für die Bilder. Der Index kann durch einen Doppelklick auf die Komponente per Drag and Drop verwaltet werden siehe Abbildung 1.00 von TImageList.

Abb. 1.01 Bildeditor leer

Um Bilder und Grafiken zur TImageList hinzuzufügen können wir nun auf den Button hinzufügen klicken und Bilder, Icons oder andere Grafiken auswählen. In meinem Beispiel werde ich Icons auswählen und diese in einem TMainMenü verwenden. Ihr bekommt kostenlose Icons unter Flaticon.com. Ich habe dazu bereits einen Artikel geschrieben. Kostenpflichtige Icons gibt auf Stockfotoseiten wie fotolia.com und stockfoto.com für die kommerzielle Nutzung und bereits in verschiedenen schönen Farben.

Abb. 1.02 Icons

Ich habe mir die folgenden drei Icons kostenlos in der Größe von 16×16 Pixel heruntergeladen siehe Abbildung 1.01. Mit einem Klick im Bildeditor auf Hinzufügen können wir die zu unserer TImage List hinzufügen.

Abb. 1.03 Bild Editor mit Icon

In Abbildung 1.02 sehen wir nun den Bildeditor mit den hinzugefügten Bildern. Das Pluszeichen hat den Index 0 erhalten, der geöffnete Ordner hat den Index 1 erhalten und der Pfeil nach rechts hat den Index 2 erhalten. Wie bereits erwähnt möchte ich die Icons im Beispiel gleich in einem TMainMenu verwenden und dafür möchte ich den Index ändern. Der geöffnete Ordner soll den Index 0 erhalten, der Pfeil den Index 1 und das Pluszeichen den Index 2. Mit den Buttons >>Nach oben bewegen<< und >>nach unten bewegen<< kannst du die Icons neu positionieren siehe Abbildung 1.03 Bildeditor mit sortieren Icons.

Mit den anderen Buttons replace.. können wir die vorhandenen Icons ersetzen. Mit löschen können wir Einzeleinträge löschen. Mit leeren können wir die gesamte Liste löschen. Mit den Buttons sichern und alles sichern können wir die Einstellungen speichern.
Man kann bei der TMainMenü Komponente auch einzelne Icons hinzufügen, genau wie bei einem BitBtn einem Button mit Bild. Wieso solltest du also eine TImageList nutzen? Es ist eigentlich ganz einfach den sind die Indexierungen einmal festgelegt in den Komponenten, kann die GUI schnell modernisiert werden ohne jede Komponente neu anzufassen zu müssen. Du kannst dir sicher vorstellen das bei einem großen Programm, das auswechseln aller Icons von Hand sehr viel Arbeit in Anspruch nimmt. Hast du z.B. verschiedene Buttons mit jetzt speichern, kannst du hier eine TImageList nehmen und immer auf den selben IconIndex verweisen. Das Design ändern sich schnell für Software Programme. Früher waren 3D Icons mit Farbverläufen modern. Heute sind es Flat Icons, die nur in 2D dargestellt sind. Ihr müsstet für euer Programm bei der Nutzung einer TImageList also nur ein modernes Icon Set kaufen, es nach eurer Liste sortieren und die Designanpassung eurer Software wäre fertig.

Gut, kommen wir zu einem kleinen Beispiel:

Abb. 1.04 TImageList im Einsatz

Zieht in eurem TForm ein TMainMenu hinein und erstellt ein Menü mit der Struktur:
Datei

• Öffnen (geöffneter Ordner, ImageIndex 0)
• Neu (Pluszeichen, ImageIndex 2)
• Info (Pfeil rechts, ImageIndex 1)

Wie du ein TMainMenu erstellt erfährst in der Lazarus und Free Pascal Komponenten Bibliothek unter TMainMenu.
Gehe nun in den Objektinspektor und wähle in der Hauptkomponente und in allen MenuItems des TMainMenu unter der Eigenschaft SubMenuImages die erstellte ImageList1 aus. Du kannst für jeden Eintrag eine TImageList auswählen, wenn du das möchtest. Dies ist allerdings nicht sinnvoll. Man sollte pro Komponentenart maximal eine TImageList haben. Ich meine also für alle TBitBtn, für alle TTreeView, für alle TMainMenu’s usw. Jetzt kannst du bei jedem Eintrag im Objektinspektor unter Eigenschaften den ImageIndex auswählen. Aktuell stehen diese auf -1 um kein Image anzuzeigen. Nach dem zuweisen der Icons sollte dein TForm1 wie in Abbildung 1.03 aussehen.

Für dich zum herunterladen:

software-timagelist (650kb)