Verwenden von TImageList-Bilderlisten als zentralisierte Bildersammlungen

Nach oben zu FireMonkey-Anwendungsdesign

TImageList-Bilderlisten von FireMonkey bieten Tools mit vielfältigen Funktionen für die Verwendung von zentralisierten Sammlungen kleiner Bilder durch GUI-Elemente (Steuerelemente, Menüs und andere) in FireMonkey-Anwendungen. Die TImageList-Bilderlisten in FireMonkey dienen demselben Zweck wie die Vcl.Controls.TImageList-Bilderlisten in der VCL, bieten aber fortgeschrittenere Funktionen. Die TImageList-Bilderlisten in FireMonkey werden verwendet, um große Mengen von Symbolen oder Bitmaps effektiv zu verwalten, und sie sind für plattformübergreifende Anwendungen geeignet.

Da FireMonkey ein plattformübergreifendes Framework (Windows, iOS, OS X und Android) ist, können FireMonkey-Anwendungen auf Geräten mit unterschiedlicher Punktdichte und Auflösung des Bildschirms ausgeführt werden. Bei Verwendung der Bitmaps mit Mehrfachauflösung von FireMonkey werden Ihre Bilder und Symbole in FireMonkey-Anwendungen korrekt in verschiedenen Punktdichten, Auflösungen und auf unterschiedlichen Plattformen (Windows, iOS, OS X und Android) dargestellt. Ein Bitmap mit Mehrfachauflösung ist eine Sammlung von Bitmap-Elementen, die dasselbe Bild in unterschiedlichen Skalierungen enthält.

Gründe für die Verwendung von Bilderlisten

In einer GUI-Anwendung kann eine Vielzahl von Steuerelementen (wie Schaltflächen, Menüeinträge, Einträge in verschiedenen Listen) kleine Bilder (Symbole, Piktogramme oder Widgets) enthalten. Beispielsweise hat TMenuItem die Eigenschaft Bitmap. Mit dieser Eigenschaft können Sie ein Bild aus einer Datei laden. Dies ist die einfachste und anscheinend die bequemste Art des Ladens von Bildern in Ihre Anwendungen. In jedes neue Steuerelement können Sie ein bestimmtes Bild laden und es anzeigen.

Eine andere Möglichkeit stellt das Speichern aller in einer Anwendung verwendeten Bilder in einer zentralisierten Sammlung dar. Für jedes Steuerelement wird dabei nur ein Verweis auf ein Bild in dieser Sammlung gespeichert. Beispielsweise können Sie ein Bild aus einem Stil verwenden. Wählen Sie zum Beispiel im Objektinspektor für eine Schaltfläche die Eigenschaft StyleLookup aus, klicken Sie auf den Pfeil, um die Dropdown-Liste zu erweitern, und wählen Sie searchtoolbutton aus. Das Symbol "Vergrößerungsglas" wird für die Schaltfläche angezeigt. Wir haben diese Möglichkeit beibehalten, weil sie für eine feste Sammlung der meisten Standardsymbole sehr praktisch ist. Für reale Anwendungen müssen Sie aber häufig individuell gestaltete Symbole laden und speichern. Für solche Fälle kann die TImageList-Komponente sehr nützlich sein.

Das schematische Vorgehen bei der Verwendung von TImageList kann folgendermaßen beschrieben werden:

1. Fügen Sie einem Formular (besser einem speziell erstellten Datenmodul) eine TImageList-Bilderliste (nicht sichtbare Komponente) hinzu.
2. Laden Sie Ihre Bilder in dieses TImageList-Objekt.
3. Wählen Sie im Objektinspektor die Eigenschaft Images Ihres Steuerelements aus, klicken Sie auf den Pfeil, um die Dropdown-Liste zu erweitern, und wählen Sie den Verweis auf das TImageList-Objekt aus.
4. Wählen Sie in der Eigenschaft ImageIndex die Anzahl der Bilder in dem Bilderlisten-Objekt aus, die Sie anzeigen möchten.

Wiederholen Sie die Schritte 3 und 4 für jedes neue Steuerelement. Wenn das TImageList-Objekt kein passendes Bild enthält, wiederholen Sie Schritt 2. Im ersten Moment könnte dieses Vorgehen zu kompliziert wirken. Anhand der folgenden TImageList-Verwendungsbeispiele werden die Vorteile dieser Schritte und die Verwendung von TImageList gegenüber dem einfachen Auswählen des gewünschten Bildes aus einem Ordner erläutert.

Das erste Beispiel: Eine Sammlung von Bildern eines erfahrenen Programmierers kann ohne Weiteres 9.000 bis 10.000 Bilder enthalten. Die Suche nach einem bestimmten Bild in solchen Sammlungen kann sehr mühsam sein. Andererseits können auch in recht komplexen Anwendungen bis zu 100 – 200 Bilder verwendet werden. Für viele Steuerelemente in einer Anwendung kann dasselbe (oder ein ähnliches) Bild verwendet werden, und eine gewisse Konsistenz bei der Verwendung dieser Bilder ist wünschenswert. Beispielsweise hat etwa vor einem Jahr ein früherer Kollege von Ihnen bei der Entwicklung der ersten Version Ihres Programms der Speichern-Schaltfläche ein Symbol mit einer blauen 3-Zoll-Diskette zugewiesen. Bei der Entwicklung der neuen Version Ihres Programms müssen Sie jetzt ein neues Formular mit derselben Speichern-Schaltfläche erstellen und ihr dasselbe Symbol zuweisen. Dieses Symbol zu finden, könnte sich jedoch als schwierig erweisen. Bei der Verwendung des TImageList-Objekts hätten Sie dieses Problem nicht, weil Sie einfach dieses Symbol aus der für Ihr TImageList-Objekt erweiterten Dropdown-Liste auswählen könnten.

Das zweite Beispiel: Angenommen, Ihr Chef hat entschieden, dass es nun an der Zeit ist, ein Symbol mit der modernen Energiesparlampe anstatt des Symbols mit der alten Glühbirne zu verwenden. Wie viele Steuerelemente (und Menüeinträge) verwenden dieses Symbol? Wie lange brauchen Sie, um all diese Symbole zu ändern? Wenn all Ihre Symbole in einer zentralisierten Bildersammlung gespeichert sind, dann sind solche Massenersetzungen ein Kinderspiel. Sie müssen nur dieses Symbol in Ihrer zentralisierten Bildersammlung ändern. Im Anschluss daran können Sie auch ein Datenmodul, das eine Sammlung mit Bildern (Bilderliste) enthält, erstellen und dieses Modul mehreren Anwendungen hinzufügen, die Bilder aus dieser Sammlung verwenden müssen.

Ein kurzes drittes Beispiel: Die dynamische Erstellung von vielen Steuerelementen, die zur Laufzeit Symbole anzeigen, produziert ein Menge von doppelten Grafikdaten. Wenn Sie TImageList verwenden, speichert jedes Steuerelement nur einen Index auf das zu zeichnende Symbol in der TImageList-Sammlung.

Die Verwendung der gemeinsamen TImageList-Sammlung trägt also dazu bei, ähnliche Aufgaben wie die Wiederverwendung von Code, aber in Bezug auf Grafikdaten, zu lösen.

Verwendung von Bilderlisten

Sehen Sie sich das Video, das die typischen Schritte beim Erstellen einer neuen Bilderliste in einem FireMonkey-Projekt demonstriert, und das Video, das zeigt, wie mit dem Bilderlisten-Editor eine Bilderliste bearbeitet wird, an.

Das detaillierte Vorgehen bei der Verwendung von TImageList kann folgendermaßen beschrieben werden:

1. Erstellen Sie ein Datenmodul, und setzen Sie es vor das Hauptformular in der Modulliste eines Projekts.
2. Fügen Sie den Unit-Namen des Datenmoduls in den uses-Abschnitt des Hauptmoduls ein.
3. Ziehen Sie aus der Tool-Palette ein TImageList-Objekt auf das Datenmodul.
4. Doppelklicken Sie auf das TImageList-Objekt.
   Der leere Bilderlisten-Editor (FireMonkey) wird geöffnet.
5. Klicken Sie auf die Schaltfläche Hinzufügen.
6. Suchen Sie im Dialogfeld Bilder hinzufügen die gewünschte Grafikdatei, und klicken Sie auf Öffnen. Wechseln Sie beispielsweise zum Ordner
   C:\Program Files (x86)\Embarcadero\Studio\20.0\Images\GlyFX\Icons\XP\PNG\16x16
   , und wählen Sie darin eine Grafikdatei aus.
7. Im Bereich Liste der Bilder wird eine Vorschau aller geöffneten Bilder angezeigt. Sie können die Reihenfolge der Bilder durch Ziehen mit der Maus ändern.

   Hinweis: Die Komponente TImageList selbst hat keine allgemeinen Width- und Height-Eigenschaften. Jedes Bild wird so skaliert, dass es am besten zu der Form des Steuerelements passt, in dem das Bild angezeigt wird. Wenn Sie die Größe des Bereichs Liste der Bilder ändern, wird die Größe der Bilder entsprechend geändert.

   Hinweis: Beachten Sie, dass Sie zwar Bilder in beliebiger Größe hinzufügen können, TImageList aber für die Aufnahme von vielen kleinen Bildern konzipiert ist, die in verschiedenen GUI-Elementen (Schaltflächen, Menüeinträge, Listen usw.) angezeigt werden können. Standardmäßig werden Bilder ohne Änderungen gespeichert. Sie werden bei Bedarf skaliert. Wenn Sie einige große Bilder oder Fotos laden, werden diese daher nicht wie erwartet auf einer 24x24-Schaltfläche angezeigt, und eine Anwendung auf einem mobilen Gerät könnte einfach aufgrund mangelnder Systemressourcen hängen bleiben.

8. Klicken Sie jetzt auf OK, um den Bilderlisten-Editor zu schließen.
9. Suchen Sie in der Tool-Palette das Grafiksteuerelement TGlyph. Die Funktionalität von TGlyph ist vergleichbar mit der von TImage, aber TGlyph enthält keine Grafikdaten.
10. Suchen Sie im Objektinspektor die Eigenschaft Images des TGlyph-Steuerelements. Die Liste in Images enthält alle TImageList-Sammlungen des Projekts.
11. Wählen Sie die gewünschte TImageList-Sammlung aus, und suchen Sie die Eigenschaft ImageIndex. ImageIndex ist der Index (Nummer) eines Bildes in der Bilderliste. Die Liste in ImageIndex enthält alle Bilder, die in der ausgewählten TImageList-Sammlung enthalten sind. Sie können ein gewünschtes Bild auswählen oder den ganzzahligen Index (ImageIndex) des Bildes, das Sie anzeigen möchten, eingeben. Wenn für den angegebenen ImageIndex kein Bild vorhanden ist, wird kein Bild ausgewählt.

TGlyph ist von TControl abgeleitet und kann in Stilen zum Erstellen von Steuerelementen verwendet werden. TGlyph ist in vielen Steuerelementen enthalten, die die Verwendung von Bilderlisten unterstützen.

TGlyph-Steuerelemente verfügen über die Eigenschaft AutoHide. AutoHide legt fest, dass das TGlyph-Steuerelement den Wert der Eigenschaft Visible selbst verwaltet:

• Wenn während der Laufzeit einer Anwendung AutoHide True ist, dann ist Visible True, falls das Steuerelement Grafiken enthält (BitmapExists ist True). Andernfalls hat Visible den Wert False. Wenn im Code der Anwendung versucht wird, Visible auf einen neuen Wert zu setzen, dann wird dieser Wert ignoriert. Der Visible-Wert ist für die Eigenschaft Align von Bedeutung, wenn Align nicht None ist. Wenn Visible True ist, dann zeichnet ein leeres sichtbares Steuerelement den leeren Raum, der von dem Steuerelement belegt wird. Wenn Visible False ist, dann zeichnet ein leeres unsichtbares Steuerelement den leeren Raum nicht.
• Wenn AutoHide True ist, dann ist im Entwurfsmodus Visible immer True, und es kann nicht darauf zugegriffen werden.

Viele Grafiksteuerelemente (Schaltflächen, Menüs, Listen usw.) und Aktionen enthalten die neuen Eigenschaften Images und ImageIndex. Bitte beachten Sie, dass für Komponenten, die Listen mit Elementen bereitstellen, im Objektinspektor nur die Eigenschaft Images angezeigt wird. Für Elemente dieser Listen zeigt der Objektinspektor nur die Eigenschaft ImageIndex an. Die Eigenschaft Images aller Elemente des Listensteuerelements hat denselben Wert wie Images im Listensteuerelement. Das heißt, alle Menüeinträge verwenden immer die Images-Sammlung, die in der Eigenschaft Images des Menüs festgelegt ist.

Einige Steuerelemente, die über die Eigenschaften Images und ImageIndex verfügen, können die Eigenschaft Bitmap haben, die auch ein Bild referenzieren kann. Wenn die Eigenschaften Images und ImageIndex auf ein vorhandenes Bild zeigen, dann wird dieses Bild gezeichnet. Wenn ImageIndex auf kein vorhandenes Bild zeigt, dann zeichnet das Steuerelement das Bild, das von Bitmap referenziert wird. Beachten Sie, dass ein von Bitmap referenziertes, aber nicht verwendetes Bild nur ignoriert und nicht automatisch gelöscht wird, um Datenverluste zu vermeiden. Zum Beispiel, wenn Sie versehentlich ImageIndex festlegen, um ein nicht-vorhandenes Bild zu referenzieren. Sie können dieses referenzierte Bild manuell löschen, indem Sie die Eigenschaft Bitmap bearbeiten.

TImageList-Struktur der obersten Ebene

Im Allgemeinen kennt eine FireMonkey-Anwendung die erforderliche Größe eines zu zeichnenden Bildes nicht. Die Größe hängt von dem jeweiligen Steuerelement, dem Steuerelementstil und der Skalierung der Szene ab (und diese Skalierung kann nicht nur 1, 1,5 oder 2 sein), was wiederum von dem jeweiligen Computer oder dem mobilen Gerät abhängt. Deshalb werden Bilder häufig skaliert, damit sie in die gewünschten Begrenzungen zu passen. Aus diesem Grund wurde die Klasse TMultiResBitmap eingeführt. Bitmaps mit Mehrfachauflösung speichern mehrere Varianten desselben für verschiedene Größen optimierten Bildes. Dadurch werden beim Skalieren von Bildern Qualitätseinbußen minimiert. Als Nächstes wurden die TImageList-Bilderlisten eingeführt. TImageList-Objekte speichern Sammlungen von TMultiResBitmap-Bildern. Jedes dieser Bitmaps mit Mehrfachauflösung ist eine Menge von mehreren Varianten desselben Bildes in unterschiedlichen Größen.

Um die Bedeutung und Funktionalität der Elemente im Bilderlisten-Editor zu verdeutlichen, wird im Folgenden die TImageList-Struktur der Komponente erläutert.

Jede TImageList-Komponente enthält zwei Sammlungen mit Bildern:

• Die Sammlung Source enthält die Daten der Quellgrafiken. Mit diesen Daten werden die Bilder in der Sammlung Destination erstellt.
• Die Sammlung Destination enthält die Daten, die zum Erstellen derjenigen Bilder erforderlich sind, die als Bilder der TImageList-Sammlung gezeichnet werden sollen.

In der Strukturansicht des Beispiels ImageList wird die ImageList1-Struktur wie in der folgenden Abbildung angezeigt:

In dieser Abbildung hat jedes Bild in der Source-Sammlung:

• Einen eindeutigen Namen (ohne Berücksichtigung der Groß-/Kleinschreibung) (in jeder TImageList-Sammlung). Beispielsweise hat das Bild 0 den Namen Stop, das Bild 1 den Namen TImageList und das Bild 2 den Namen folder.
• Die Eigenschaft MultiResBitmap. Jedes Element in einer MultiResBitmap-Sammlung repräsentiert wiederum eine Variante desselben Bildes mit einer bestimmten Größe (Skalierung). Beispielsweise enthält die MultiResBitmap-Sammlung des Bildes folder 5 Bitmaps für die Skalierungen 1.0, 2.0, 1.5, 3.0 und 16.0.

Diese Abbildung zeigt auch, dass jedes Element in der Sammlung Destination mehrere Ebenen enthalten kann, die in der Sammlung Layers enthalten sind. Beispielsweise besteht das Bild 3 aus 2 Ebenen: die Ebene 0 enthält das Bitmap mit Mehrfachauflösung folder und die Ebene 1 enthält das Bitmap mit Mehrfachauflösung delete. Jede Ebene enthält den Namen des Quell-Bitmaps mit Mehrfachauflösung und Koordinaten eines Abschnitts dieses Bitmaps (immer in der Skalierung 1). Dieser Abschnitt des Bitmaps wird gezeichnet und somit das Bild generiert. Beim Generieren eines Bildes zeichnet FireMonkey zuerst das Bitmap mit Mehrfachauflösung aus der Ebene 0, das Bitmap mit Mehrfachauflösung aus der Ebene 1 wird über das erhaltene Bild gezeichnet, das Bitmap mit Mehrfachauflösung aus der Ebene 2 wird über das erhaltene Bild gezeichnet usw. Dies wird detaillierter im Abschnitt Bereich "Ausgewähltes Bild" erläutert. Wenn ein Bitmap mit Mehrfachauflösung in einer Ebene Bitmaps mit mehreren Skalierungen enthält, dann wird das Bitmap mit der passendsten Skalierung verwendet. Die Skalierung wird entsprechend der erforderlichen Größe des fertigen Bildes und der Skalierung der Szene ausgewählt.

Wenn die Struktur von TImageList bekannt ist, können zur Laufzeit Teile der gesamten TImageList-Instanz gebildet werden. Das Beispiel ImageList enthält solchen Code.

Zum Bearbeiten einer TImageList-Sammlung in der IDE können Sie die Strukturansicht und den Objektinspektor verwenden. Es steht aber auch speziell dafür der Bilderlisten-Editor zur Verfügung, der für die Verwaltung des Inhalts von TImageList-Sammlungen besser geeignet ist.

Unterschiede der TImageList-Implementierung in der VCL

In der VCL ist eine Vcl.Controls.TImageList-Bilderliste eine Sammlung von Bildern mit derselben festen Größe. Dies führt zu Problemen, wenn in Ihrer Anwendung Bilder mit unterschiedlichen Skalierungen gezeichnet werden sollen. Um in VCL-Anwendungen Bilder mit unterschiedlichen Skalierungen zu zeichnen, müssen Sie mehrere TImageList-Objekte erstellen. Jedes TImageList-Objekt enthält eine spezielle Sammlung von Bildern für eine bestimmte Größe. In all diesen TImageList-Objekten sollten dieselben Bilder dieselben Nummern (Indizes) haben. Eine VCL-Anwendung kann nur Bilder mit diesen Skalierungen zeichnen. In VCL-Anwendungen ist es schwierig, Bilder während der Laufzeit zu ändern.

Verwenden des Bilderlisten-Editors

Das Video zeigt, wie mit dem Bilderlisten-Editor eine Bilderliste erstellt und bearbeitet wird (EN). Dieses Video demonstriert einige fortgeschrittene und wichtige Leistungsmerkmale des Bilderlisten-Editors.

Im Folgenden werden Eigenschaften des Bilderlisten-Editors anhand des Beispiels ImageList beschrieben, das als Muster für die Verwendung von Bilderlisten dient. Laden Sie das Projekt "ImageListDemo.dproj", und doppelklicken Sie in der Projektverwaltung auf das Modul "UnitDataModule.dfm". Doppelklicken Sie im Formular-Designer auf das Symbol ImageList1. Der Bilderlisten-Editor wird mit der Komponente ImageList1 geöffnet. Der Bilderlisten-Editor enthält drei Bereiche: Liste der Bilder, Quellen der Bilder und Ausgewähltes Bild.

Bereich "Liste der Bilder"

Im Bereich Liste der Bilder wird die horizontale Liste der Bilder angezeigt. Jedes Bild ist eine Vorschau eines entsprechenden Bildes in der Sammlung Destination. Diese Bilder werden in der Eigenschaft ImageIndex jedes Steuerelements angezeigt, das diese Bildersammlung verwendet.

Im Bereich Liste der Bilder können Sie Bilder mit der Maus ziehen, um deren Reihenfolge in der ImageList1-Bildersammlung zu ändern.

Mit der Schaltfläche Hinzufügen wird ein Bild aus einer Datei hinzugefügt. Durch Klicken auf Hinzufügen wird das Dialogfeld Bilder hinzufügen geöffnet, in dem Sie eine Bilddatei suchen können. Wenn ein hinzuzufügendes Bild um ein Vielfaches der angegebenen Breite und Höhe größer ist, werden Sie in einem Dialogfeld gefragt, ob der Bilderlisten-Editor es in mehrere Bilder aufteilen soll. Dies ist speziell für Symbolleisten-Bitmaps hilfreich, die normalerweise aus mehreren aufeinanderfolgenden kleinen Grafiken bestehen und als größeres Bitmap gespeichert werden. Das hinzugefügte Bild wird in der Vorschauliste des Bereichs Liste der Bilder hervorgehoben aufgeführt und im Bereich Ausgewähltes Bild angezeigt. Das Bild wird der Sammlung Source hinzugefügt und im Bereich Quellen der Bilder angezeigt.

Mit der Schaltfläche Exportieren können Sie alle Bilder aus der Sammlung Destination in eine Grafikdatei speichern. Das in dieser Datei gespeicherte Bild besteht aus Fragmenten, die alle Bilder aus dem Bereich Liste der Bilder enthalten. Alle Fragmente haben dieselbe durch Breite und Höhe festgelegte Größe.

Mit der Schaltfläche Löschen wird das ausgewählte Bild aus der Sammlung Destination gelöscht. (Mit Löschen wird das zugehörige Bild nicht aus der Sammlung Source gelöscht.)

Mit der Schaltfläche (Neues Bild) in der Symbolleiste (in der linken oberen Ecke des Bereichs) wird ein zuvor geladenes Bild (mit einer Ebene) hinzugefügt. Wenn sich der Fokus im Bereich Quellen der Bilder befindet, dann wird das ausgewählte Bild hinzugefügt. Ansonsten wird ein Bild in einer ausgewählten Ebene im Bereich Ausgewähltes Bild hinzugefügt. Das hinzugefügte Bild wird im Bereich Liste der Bilder hervorgehoben angezeigt.

Bereich "Quellen der Bilder"

Im Bereich Quellen der Bilder (siehe die Abbildung Bilderlisten-Editor weiter oben) werden alle Bilder in der Source-Sammlung der aktuellen TImageList-Bilderliste angezeigt. Mit diesen Quellbildern werden Bilder in der Sammlung Destination erstellt (angezeigt im Bereich Liste der Bilder).

Wie bereits erwähnt, wird durch Klicken auf Löschen im Bereich Liste der Bilder das ausgewählte Bild aus der Sammlung Destination gelöscht. Mit Löschen wird das zugehörige Bild nicht aus der Sammlung Source gelöscht, die im Bereich Quellen der Bilder angezeigt wird. Um ein Bild aus der Sammlung Source zu löschen, verwenden Sie die Schaltfläche Quelle löschen in der Symbolleiste.

Mit den Pfeilschaltflächen und in der Symbolleiste können Sie die Reihenfolge der Bilder ändern, indem Sie einzelne Bilder nach oben oder unten verschieben.  

Klicken Sie auf die Schaltfläche (Neue Quelle) in der Symbolleiste, um der Sammlung Source ein neues Bild hinzuzufügen. Durch Klicken auf diese Schaltfläche wird ein Dialogfeld geöffnet, in dem Sie den Namen des neuen Quellelements eingeben müssen. Anschließend wird der MultiResBitmap-Editor aktiviert.

Verwenden des MultiResBitmap-Editors

Das Video demonstriert die typische Verwendung des MultiResBitmap-Editors (EN).

Mit dem MultiResBitmap-Editor können Sie mehrere, für verschiedene Skalierungen optimierte Bilder hinzufügen:

Während der Laufzeit wählt eine Anwendung ein Bild aus, das über die am besten geeignete Skalierung verfügt.

Wie bereits erwähnt, ist die Komponente TImageList für die Speicherung von Listen mit einer großen Anzahl kleiner Bilder vorgesehen. Bilder aus der Komponente TImageList sind für die Verwendung als Symbole in Steuerelementen, Menüs, Listen usw gedacht.

Wenn Sie nur Dateien mit großen Bildern haben, dann können Sie deren Größe beim Hinzufügen dieser Bilder im MultiResBitmap-Editor anpassen. Klicken Sie, bevor Sie ein großes Bild aus einer Datei hinzufügen, auf das Steuerelement SizeKind, und wählen Sie in der geöffneten Liste Benutzerdefinierte Größe aus. Die Eingabefelder Breite und Höhe werden angezeigt, falls sie nicht schon zuvor vorhanden waren. Breite und Höhe legen die Eigenschaften Width und Height für das Bild mit Scale = 1 fest. Wenn Sie beispielsweise ein Bild für Scale = 1.5 laden, dann wird die angegebene Breite und Höhe mit 1,5 multipliziert. Um ein Bild für eine bestimmte Skalierung zu laden, klicken Sie in diesem Skalierungs-Eingabefeld auf die Schaltfläche . Um ein Bild für alle Skalierungen zu laden, klicken Sie in der Symbolleiste des MultiResBitmap-Editors auf die Schaltfläche Alle aus Datei füllen.

Beachten Sie bitte, dass mit der Option Benutzerdefinierte Größe nicht das Bild in einer Quelldatei geändert wird. Benutzerdefinierte Größe ändert nur die Größe des in der FMX- oder DFM-Datei gespeicherten Bildes.

Die vom MultiResBitmap-Editor verwendeten Entwurfszeitinformationen enthalten Transparente Farbe, SizeKind, Breite, Höhe und die Namen von Dateien mit Quellbildern. Diese Eigenschaften werden nicht veröffentlicht, sie werden nur beim Entwurf verwendet. Nach Bearbeitung des Bitmaps mit Mehrfachauflösung können diese Eigenschaften aus der FMX- oder DFM-Datei mit der Schaltfläche (Fertig stellen) der Symbolleiste entfernt werden. Mit der Schaltfläche des MultiResBitmap-Editors werden die Entwurfszeitinformationen nur aus dem Bitmap mit Mehrfachauflösung entfernt, das gerade im MultiResBitmap-Editor bearbeitet wird. Mit der Schaltfläche des Bilderlisten-Editors werden die Entwurfszeitinformationen aller Bilder in der aktuellen Bilderliste entfernt.

Bereich "Ausgewähltes Bild"

Im Bereich Ausgewähltes Bild (siehe die Abbildung Bilderlisten-Editor weiter oben) werden detaillierte Informationen über das im Bereich Liste der Bilder ausgewählte Bild angezeigt. Im Bereich Liste der Bilder wird eine Vorschau der Bilder in der Sammlung Destination angezeigt.

Wie bereits im Abschnitt TImageList-Struktur erläutert (siehe die Abbildung Strukturansicht weiter oben), kann jedes Bild in der Sammlung Destination mehrere Ebenen enthalten. Für jede Ebene wird ein Name eines Bildes aus der Sammlung Source und dem zugehörigen Bitmap mit Mehrfachauflösung angezeigt. Außerdem enthält jede Ebene Koordinaten eines Abschnitts dieses Bitmaps mit Mehrfachauflösung (immer in der Skalierung 1, unabhängig von der Skalierung des zu verwendenden Bitmaps). Nur dieser Abschnitt des Bitmaps mit Mehrfachauflösung wird im fertigen Bild gezeichnet.

Normalerweise enthält jedes Bild nur eine Ebene. In manchen Situationen könnte aber die Verwendung mehrerer Ebenen zum Erstellen eines zusammengesetzten Bildes erforderlich sein. Beispielsweise könnte es zweckmäßig sein, eine separate Ebene für ein "durchgestrichenes" oder "Vergrößerungsglas"-Bild zu verwenden. Diese Ebene kann dann über eine Ebene mit einem anderen Bild gelegt werden. Beispielsweise könnte das Bild in der Ebene über eine Ebene mit einem "Ordner"- oder einem "Umschlag"-Bild gezeichnet werden. Dann können diese beiden Ebenen ein kombiniertes Bild bilden, z. B. ein Bild mit einem "durchgestrichenen Ordner" oder einem "Vergrößerungsglas über einem Umschlag".

Beim Generieren eines Bildes zeichnet FireMonkey zuerst das Bitmap mit Mehrfachauflösung aus der Ebene 0, das Bitmap mit Mehrfachauflösung aus der Ebene 1 wird über das erhaltene Bild gezeichnet, das Bitmap mit Mehrfachauflösung aus der Ebene 2 wird über das erhaltene kombinierte Bild gezeichnet usw. Wenn ein Bild mit dem in einer Ebene angegebenen Namen nicht vorhanden ist oder sich der angegebene Sektor außerhalb des Bildes befindet, dann zeichnet die Ebene nichts, und es wird keine Exception ausgelöst. Wenn ein Bitmap mit Mehrfachauflösung in einer Ebene Bitmaps mit mehreren Skalierungen enthält, dann wird das Bitmap mit der passendsten Skalierung verwendet. Die Skalierung wird entsprechend der erforderlichen Größe des fertigen Bildes und der Skalierung der Szene ausgewählt.

Diese Funktionalität wird im Folgenden anhand von Bildern aus dem Beispiel ImageList demonstriert. Wählen Sie im Bereich Liste der Bilder (siehe Verwenden des Bilderlisten-Editors weiter oben) das Bild mit ImageIndex = 3 aus. Dies ist der "durchgestrichene Ordner". Im Bereich Ausgewähltes Bild werden die beiden folgenden Ebenen angezeigt:

Vergleichen Sie dies mit der Darstellung des Destination-Bildes mit ImageIndex = 3 in der Strukturansicht:

In dieser Abbildung befindet sich das Bild folder in der Ebene 0 und das Bild delete in der Ebene 1. Im Bereich Liste der Bilder wird das Ergebnis dieser beiden Ebenen angezeigt, nämlich das folgende Zielbild "durchgestrichener Ordner":

Das Bild delete aus der Ebene 1 wird über das Bild folder aus der Ebene 0 gezeichnet.

Die Eingabefelder Links, Oben, Breite und Höhe in einem Ebenenbereich legen die Koordinaten eines Abschnitts des Bitmaps mit Mehrfachauflösung fest, der in der Ebene gespeichert ist. Diese Koordinaten haben in der Abbildung Bereich "Ausgewähltes Bild" für den "durchgestrichenen Ordner" für das Bild delete die Werte (0,0,16,16). Setzen Sie nun für das Bild delete Links auf 4 und Oben auf 4. Klicken Sie auf Übernehmen. In der Strukturansicht werden nun die Koordinaten (4,4,20,20) des Abschnitts für das Bild delete angezeigt. Im Bereich Liste der Bilder hat sich das Zielbild "durchgestrichener Ordner" geändert. Das Bild "durchgestrichener Ordner" wurde nach links oben verschoben:

Um zu zeigen, wie Koordinaten des Abschnitts eines Bitmaps mit Mehrfachauflösung verwendet werden können, doppelklicken Sie auf das Bild "durchgestrichen". Der MultiResBitmap-Editor wird geöffnet:

Diese Abbildung zeigt, welcher Abschnitt des "durchgestrichen"-Bildes in der Ebene gezeichnet wird. Klicken Sie in das Auswahlrechteck, das den anzuzeigenden Abschnitt angibt. Versuchen Sie, die Größe des Auswahlrechtecks zu ändern. Versuchen Sie, das Auswahlrechteck zu verschieben, und beachten Sie die entsprechenden Änderungen der Eigenschaften Links, Oben, Breite und Höhe des Auswahlrechtecks (in der Ebene im Bereich Ausgewähltes Bild) und die Änderungen des Vorschaubildes im Bereich Liste der Bilder.

Die Funktionen der Schaltflächen in der Symbolleiste des Bereichs Ausgewähltes Bild sind weitgehend selbsterklärend. – Fügt dem Bereich Ausgewähltes Bild eine neue Ebene hinzu. – Löscht die ausgewählte Ebene aus dem Bereich Ausgewähltes Bild. Die Pfeile und verschieben die ausgewählte Ebene nach oben bzw. unten und ändern so die Reihenfolge der Ebenen. Dies kann nützlich sein, weil das Bild in einer Ebene mit einer höheren Nummer über Bilder aus vorherigen Ebenen gezeichnet wird.

Grundlegende Klassen von TImageList

Die Informationen über grundlegende Merkmale und Funktionen der Bilderlistenklassen können für die Entwicklung benutzerdefinierter Komponenten, die Bilderlisten verwenden, sehr hilfreich sein.

Unit "System.ImageList"

Ab Version XE8 stellt RAD Studio die neue RTL-Unit System.ImageList bereit. System.ImageList enthält die Gemeinsamkeiten für FireMonkey- und VCL-Code und implementiert die grundlegendsten geräteunabhängigen Funktionen von Bilderlisten. System.ImageList enthält den Code zur Unterstützung der Interaktion zwischen Bildern in einer Bilderliste und deren Verwendung in Komponenten (wie Steuerelemente, Menüeinträge usw.).

Die Unit System.ImageList definiert die Klassen TBaseImageList und TImageLink.

Klasse "TBaseImageList"

Die Klasse TBaseImageListstellt Methoden und Eigenschaften für die Behandlung von Interaktionen zwischen einer Bilderliste und allen GUI-Komponenten bereit, die Bilder aus dieser Bilderliste verwenden. Ab der Version RAD Studio XE8 erben die Klassen FMX.ImgList.TCustomImageList und Vcl.ImgList.TCustomImageList diese TBaseImageList-Klasse.

Klasse "TImageLink"

Ein TBaseImageList-Bilderlisten-Objekt sendet mit TImageLink-Objekten Benachrichtigungen über Änderungen, die in dem Bilderlisten-Objekt aufgetreten sind, an Komponenten, die das Bilderlisten-Objekt verwenden.

Wenn Änderungen der Eigenschaft ImageIndex oder Images aufgetreten sind, dann ruft das TImageLink-Objekt die virtuelle Methode Change auf. Beachten Sie, dass jede Änderung in TBaseImageList zur Änderung von Images führt.

Damit Ihre Komponente eine adäquate Reaktion auf Änderungen in einer Bilderliste bereitstellen kann, muss Ihre Komponente eine Instanz eines TImageLink-Nachkommens enthalten. Dieser TImageLink-Nachkomme muss korrekte Images- und ImageIndex-Eigenschaften haben und die Methode Change überschreiben, oder die Ereignisbehandlungsroutine OnChange muss definiert sein.

TBaseImageList enthält die Array-Eigenschaft Links, die TImageLink-Instanzen enthält. Wenn Sie die Eigenschaft TImageLink.Images auf eine Komponente setzen, dann wird diese Bilderliste diesem Links-Array hinzugefügt. Nach Änderungen von Images oder ImageIndex übernehmen Nachkommen von TBaseImageList sequenziell alle Bildverknüpfungsobjekte aus dem Array Links und rufen Change für alle (oder nur für einige) dieser Bildverknüpfungen (Komponenten) auf.

Eigenschaft TImageLink.IgnoreIndex

Ist die Eigenschaft IgnoreIndex True, dann wird Change nicht ausgeführt, wenn ein Bild oder die Reihenfolge der Bilder in einer TBaseImageList-Bilderliste geändert wurde. Normalerweise gehen Benachrichtigungen ein, wenn ein Bild an einem Index geändert wird. Durch Setzen von IgnoreIndex auf True werden derartige Benachrichtigungen unterdrückt. Diese Eigenschaft kann verwendet werden, wenn eine Anwendung die gesamte Bilderliste anzeigen muss, beispielsweise in einem Editorfenster.

Eigenschaft TImageLink.IgnoreImages

Ist die Eigenschaft IgnoreImages True, dann wird Change nicht ausgeführt, wenn der Images-Wert geändert wurde. Diese Eigenschaft wird aus Kompatibilitätsgründen mit VCL-Klassen verwendet, die Klassen aus System.ImageList erben.

Unit "FMX.ImgList"

Die Unit FMX.ImgList definiert die grundlegenden FireMonkey-Klassen, die FireMonkey-Bilderlisten implementieren.

Klasse "FMX.ImgList.TCustomImageList"

Die Komponente FMX.ImgList.TCustomImageList implementiert die Kernfunktionalität von FireMonkey-Bilderlisten. FMX.ImgList.TImageList unterscheidet sich von der Klasse FMX.ImgList.TCustomImageList nur durch die Neudeklaration einiger Eigenschaften als Published. Im Fall von FMX.ImgList.TImageList sind dies die folgenden Published-Eigenschaften: Source, Destination, OnChanged und OnChange.

Eigenschaft TCustomImageList.Dormant

Die Eigenschaft Dormant ist True, wenn die Eigenschaft Dormant aller Bitmaps mit Mehrfachauflösung in der Sammlung Source True ist.

Eigenschaft TCustomImageList.CacheSize

Die Eigenschaft CacheSize gibt die maximale Anzahl an Bildern an, die im internen Zwischenspeicher des aktuellen TCustomImageList-Objekts gespeichert werden können.

Das Zeichnen jedes Bildes besteht aus mehreren Schritten mit ziemlichem Ressourcenaufwand. Um das Skalieren und Zeichnen mehrerer Ebenen zur Anzeige desselben Bildes in jedem betroffenen Steuerelement zu vermeiden, wird das generierte Bild in ein Array im internen Zwischenspeicher gesetzt und dann das fertige Bild aus diesem Zwischenspeicher-Array übernommen. Ein neu generiertes Bild wird an das Ende dieses Zwischenspeicher-Arrays angehängt, und alle vorhandenen Bilder werden um eine Position in Richtung des Anfangs des Arrays verschoben. Wenn die Anzahl der im Zwischenspeicher-Array zu speichernden Bilder die angegebene CacheSize-Anzahl an Bildern übersteigt, dann wird das älteste Bild aus dem Zwischenspeicher entfernt. Eine große CacheSize-Anzahl erhöht die Verarbeitungsgeschwindigkeit, aber auch den verwendeten Speicher. Die standardmäßige Maximalanzahl an im Zwischenspeicher-Array zu speichernder Bilder ist 8; die Minimalanzahl ist 1.

Methode TCustomImageList.ClearCache

ClearCache entfernt das durch die Index-Nummer angegebene Bild aus dem internen Zwischenspeicher-Array. Im Zwischenspeicher können mehrere Bilder mit derselben Nummer, aber mit unterschiedlicher Größe gespeichert sein. Wenn Index -1 (die Vorgabe) ist, dann werden alle Bilder aus dem Zwischenspeicher entfernt (der Zwischenspeicher wird geleert). Normalerweise wird ClearCache automatisch aufgerufen, wenn sich das TImageList-Objekt ändert.

Methode TCustomImageList.BitmapExists

Die Methode BitmapExists gibt True zurück, wenn ein Bild mit der angegebenen Nummer vorhanden ist und tatsächlich ein Bitmap enthält. Das heißt, wenn das angegebene Bild mindestens eine Ebene mit einem Namen eines vorhandenen Quellbildes mit einem zu zeichnenden Rechteck enthält, das über einen Schnittpunkt ungleich null mit dem Rechteck des Bildes verfügt.

Ein nicht vorhandenes Bild wird im Bilderlisten-Editor als leeres gestricheltes Rechteck angezeigt. Siehe das Bild mit der Nummer 9 im Bereich Liste der Bilder in der Abbildung des Bilderlisten-Editors weiter oben. Wenn das zu zeichnende Rechteck Grafikdaten enthält, aber all diese Grafiken transparent sind (siehe Transparente Farbe), dann gibt die Methode BitmapExists True zurück, aber diese Ebene zeichnet keine Grafiken. BitmapExists wird in der Klasse TGlyph verwendet, um die Eigenschaft Visible festzulegen, wenn AutoHide True ist.

Methode TCustomImageList.Bitmap

Die Methode Bitmap gibt das im Zwischenspeicher gespeicherte TBitmap-Objekt zurück, das dem in Index angegebenen Bild entspricht und das die angegebene Größe Size hat.

Wenn das in Index angegebene Bild mit der Größe Size im Zwischenspeicher nicht vorhanden ist, dann versucht Bitmap, ein passendes Bild zu erstellen und es dem Zwischenspeicher hinzuzufügen. Wenn kein Index-Bild in der Source-Sammlung vorhanden ist oder Bitmap kein Bitmap mit der angegebenen Größe Size erstellen oder es dem Zwischenspeicher hinzufügen kann, dann gibt Bitmap nil zurück.

Da Bilder im Zwischenspeicher von internen TCustomImageList-Funktionen erstellt und freigegeben werden, sollten Sie das zurückgegebene, im Zwischenspeicher gespeicherte TBitmap-Objekt nicht explizit freigeben oder versuchen, einen Verweis auf dieses Objekt zu speichern.

Wenn Sie nur ein Bild aus der TCustomImageList-Liste zeichnen müssen, verwenden Sie die Methode Draw. Wenn Sie das erhaltene TBitmap-Objekt tatsächlich für die zukünftige Verwendung speichern müssen, sollten Sie ein weiteres TBitmap-Objekt erstellen und mit Assign eine Kopie des erhaltenen TBitmap-Objekts erstellen.

Methode TCustomImageList.BitmapItemByName

Die Methode BitmapItemByName gibt True zurück, wenn ein Bild mit dem angegebenen Name in der Source-Sammlung gefunden wird.

Wenn BitmapItemByName True zurückgibt, dann gibt Item das gefundene Bitmap für eine am besten für 1 geeignete Skalierung zurück, und Size gibt die Größe des zurückgegebenen Bitmaps zurück. Wenn BitmapItemByName False zurückgibt, dann werden Item und Size nicht geändert.

Methode TCustomImageList.UpdateImmediately

Die Methode UpdateImmediately initiiert das unverzügliche Neuzeichnen aller Komponenten, die diese Bilderliste verwenden.

Wenn ein Bild geändert wird, dann sollten alle Komponenten, die dieses Bild verwenden, darüber benachrichtigt werden, dass sie ihr Bild aktualisieren müssen. Standardmäßig werden solche Benachrichtigungen kurz nach den Änderungen gesendet, um ein mehrfaches Neuzeichnen beim Umgestalten einer Bilderliste zu vermeiden. Wenn während dieser Zeit mehrere Änderungen vorgenommen werden, wird nur eine Benachrichtigung gesendet, und Steuerelemente werden nur einmal neu gezeichnet.

Eigenschaft TCustomImageList.Source

Die Eigenschaft Source enthält den Verweis auf die TSourceCollection-Sammlung mit den TCustomSourceItem-Quell-Bitmaps mit Mehrfachauflösung. Quellsammlungen werden von der Methode CreateSource erstellt. Sie können diese Methode überschreiben, um Sammlungen mit einem eigenen Typ zu erstellen. Die wichtige Methode von TSourceCollection-Quellsammlungen ist IndexOf, die den Index des Bildes in den Quellsammlungen zurückgibt, das dem angegebenen Name entspricht. Wird kein Bild gefunden, wird nil zurückgegeben.

Klasse "TCustomSourceItem"

Die Klasse TCustomSourceItem definiert Elemente von TSourceCollection-Quellsammlungen. Jedes TCustomSourceItem-Objekt hat einen eindeutigen Namen des Bildelements (ohne Berücksichtigung der Groß-/Kleinschreibung) in der Source-Sammlung und eine MultiResBitmap-Eigenschaft mit einem Bitmap mit Mehrfachauflösung, das die Menge der Bilder mit derselben Form für verschiedene Skalierungen enthält.

Eigenschaft "TCustomImageList.Destination"

Die Eigenschaft Destination enthält den Verweis auf die TDestinationCollection-Sammlung mit den TCustomDestinationItem-Elementen. Zielelemente enthalten Informationen, die zum Vorbereiten der zu zeichnenden Bilder benötigt werden. Zielsammlungen werden von CreateDestination erstellt.

Klasse "TCustomDestinationItem"

TCustomDestinationItem-Objekte sind Elemente von TDestinationCollection-Sammlungen. Jedes TCustomDestinationItem-Element enthält die Layers-Sammlung mit TLayer-Elementen. Layers wird mit CreateLayers erstellt. Die Funktion LayersCount gibt die Anzahl der nicht leeren Ebenen zurück. Beachten Sie den Unterschied zur Eigenschaft TLayers.Count, die die Gesamtanzahl der Ebenen in der Ebenen-Sammlung enthält.

Klasse "TLayers"

Die TLayers-Sammlung enthält TLayer-Ebenen. Bei der Generierung der fertigen Bilder werden Bitmaps mit den am besten passenden Skalierungen aus allen sichtbaren Ebenen beginnend mit der Ebene 0 bis zur letzten Ebene Count sequenziell gezeichnet.

Klasse "TLayer"

Die Ebene TLayer enthält Informationen über ein Quellbild, das beim Zeichnen eines fertigen Bildes verwendet wird.

Eigenschaft TLayer.MultiResBitmap

Die Eigenschaft MultiResBitmap enthält ein Bitmap mit Mehrfachauflösung aus der Source-Sammlung.

Eigenschaft TLayer.Name

Die Eigenschaft Name enthält den Namen (ohne Berücksichtigung der Groß-/Kleinschreibung) eines Bildes aus der Source-Sammlung. Die Funktion BitmapItemByName gibt das Bitmap mit Mehrfachauflösung mit dem Namen in der Source-Sammlung zurück.

Eigenschaft TLayer.SourceRect

Die Eigenschaft SourceRect enthält die Koordinaten eines Abschnitts dieses Bitmaps mit Mehrfachauflösung (immer in der Skalierung 1, unabhängig von der Skalierung des zu verwendenden Bitmaps). Nur dieser Abschnitt des Bitmaps mit Mehrfachauflösung wird im fertigen Bild gezeichnet.

Codebeispiel "FMX.TImageList"

Sehen Sie sich das Video, das Funktionen aus dem "Beispiel FMX.ImageList" demonstriert, an.

Im Folgenden werden typische Codefragmente aus dem Beispiel FMX.ImageList behandelt, das als Muster für die Verwendung von Bilderlisten dient, mit deren Hilfe Standardoperationen mit Bilderlisten programmiert werden.

Öffnen Sie das Projekt ImageListDemo.dproj, wie im Beispiel FMX.ImageList beschrieben. Rufen Sie den Formular-Designer mit dem Modul UnitMain auf, und öffnen Sie die Registerkarte Bitmap and Image. Diese Registerkarte enthält mehrere Steuerelemente, die Bilder aus der Bilderliste verwenden. Hier wird die Codeimplementierungsfunktionalität der Schaltflächen Add New Source und Update Text und der Pfeilschaltflächen Right und Left besprochen, die das nächste bzw. vorherige Bild aus der ImageList1-Bilderliste auf den Titel None der Registerkarte None zeichnen. Der Code für die Pfeilschaltflächen Right und Left zeigt, wie ein Bild aus einer Bilderliste auf die Oberfläche Ihres Steuerelements gezeichnet wird.

Um den Code zur Behandlung eines Steuerelements im Quelltext-Editor zu öffnen, doppelklicken Sie im Formular-Designer einfach auf dieses Steuerelement.

Ereignisbehandlungsroutine der Schaltfläche "Add New Source"

Doppelklicken Sie im Formular-Designer auf die Schaltfläche Add New Source. Der Quelltext-Editor zeigt die ActnAddSourceExecute-Implementierung der Methode an. ActnAddSourceExecute ist die OnClick-Ereignisbehandlungsroutine für die Schaltfläche Add New Source. ActnAddSourceExecute ruft AddSourceToItem(9) auf. Der Kern von ActnAddSourceExecute ist die interne Methode

DrawPicture(Canvas: TCanvas; R: TRectF; Scale: Single)

Diese Methode zeichnet einfach ein Bild auf das angegebene Canvas. Weiterer Code von AddSourceToItem(9) bereitet Parameter für den Aufruf von DrawPicture vor. Die Methode AddSourceToItem(9) weist den angegebenen Parameterwert 9 dem ImageIndex des neuen in ImageList1 eingefügten Bildes zu. Das heißt ImageIndex=9. Zuerst überprüft AddSourceToItem, ob das Bild in der Destination-Sammlung mit dem ImageIndex=9 über mindestens eine Ebene (Layer) verfügt. Falls nicht, wird die Ebene 0 erstellt. Wenn die Ebene 0 ein Bild enthält, dann wird das Bild in der Variable SourceName gespeichert:

SourceName := Layer.Name;

BitmapItemByName wird aufgerufen

MainDataModule.ImageList1.BitmapItemByName(SourceName, Item, Size)

um ein Element abzurufen, das dem angegebenen SourceName-Namen aus der Sammlung Source entspricht. Bei Erfolg wird davon ausgegangen, dass das Bild bereits hinzugefügt wurde, und es wird nichts ausgeführt. Ansonsten wird der Sammlung Source ein neues Bild hinzugefügt. Wenn die Ebene vorhanden ist und den SourceName-Namen enthält, dann wird der SourceName-Name den hinzugefügten Bild zugewiesen. Andernfalls wird der Standardname verwendet.

Jetzt werden zyklisch mehrere Bilder für unterschiedliche Skalierungen erstellt. Ein neues Element wird in TMultiResBitmap eingefügt und dessen Standardskalierung ermittelt:

S := Item.Scale;

Mit S und SourceRect der Ebene wird die Größe des Quellbildes berechnet:

Size.cx := Round(Layer.SourceRect.Width * S);

Anschließend wird dieses Bild mit der transparenten Farbe gefüllt

Item.Bitmap.Clear(TAlphaColorRec.Null);

und ein Bild gezeichnet:

DrawPicture(Item.Bitmap.Canvas, R, S);

Hinweis: Öffnen Sie die Unit UnitDataModule im Formular-Designer, und doppelklicken Sie auf das Bild ImageList1. Im Bereich Liste der Bilder sehen Sie, dass das Bild mit dem ImageIndex=9 leer ist.

Mit der aktuellen Implementierung wird durch Klicken auf Add New Source das neue Bild mit dem ImageIndex=9 in die Bilderliste ImageList1 eingefügt.

So überprüfen Sie die Funktionalität der Schaltfläche "Add New Source":

1. Lesen Sie, wie das Beispiel FMX.ImageList verwendet wird.
2. Wählen Sie in der Anwendung Demo of images die Registerkarte Bitmap and Image aus.
3. Klicken Sie wiederholt auf die Pfeilschaltfläche Right.
   Die Bilder aus der Bilderliste ImageList1 werden sequenziell auf den Titel None der Registerkarte None gezeichnet.
4. Wenn Sie zum neunten Mal auf die Pfeilschaltfläche Right klicken, wird der folgende Text in der Beschriftung Label1 angezeigt:
   

Images: 'ImageList1': Counts 11

ImageIndex: 9; Width 16; Height 16

und das leere Bild auf den Titel None gezeichnet (es wird kein Bild gezeichnet).

5. Klicken Sie auf der Registerkarte Bitmap and Image auf Add New Source. Das Bild mit dem ImageIndex=9 wird der ImageList1 hinzugefügt.
6. Das hinzugefügte Bild erscheint auf dem Titel None.

Ereignisbehandlungsroutine der Schaltfläche "Update Text"

Doppelklicken Sie im Formular-Designer auf die Schaltfläche Update Text. Der Quelltext-Editor zeigt die ActnUpdateTextExecute-Implementierung der Methode an. ActnUpdateTextExecute ist die OnClick-Ereignisbehandlungsroutine für die Schaltfläche Update Text.

Der zu zeichnende Text wird aus dem Integerfeld FNumber ermittelt, indem es in die String-Repräsentation FNumber.ToString konvertiert wird. Jeder Klick auf Update Text erhöht den Wert dieses Feldes um Inc(FNumber).

ActnUpdateTextExecute ruft Folgendes auf

DrawTextOnLayer(8,FNumber.ToString)

Hier gibt der erste Parameter 8 den Index des Bildes in der Destination-Sammlung der ImageList1-Bilderliste an, das geändert werden soll.

Hinweis: Öffnen Sie die Unit UnitDataModule im Formular-Designer, und doppelklicken Sie auf das Bild ImageList1. Klicken Sie im Bereich Liste der Bilder auf das Bild mit dem ImageIndex=8. Im Bereich Ausgewähltes Bild sehen Sie, dass dieses Bild zwei Ebenen enthält. Die Ebene 0 ist leer, und die Ebene 1 enthält das TMultiResBitmap mit dem Namen mail, das einen Umschlag darstellt:

Der zweite Parameter FNumber.ToString gibt den zu zeichnenden Text an.

DrawTextOnLayer entspricht weitgehend DrawPicture. Zuerst überprüft DrawTextOnLayer, ob das Bild in der Destination-Sammlung mit dem ImageIndex=8 über mindestens eine Ebene (Layer) verfügt. Anschließend wird überprüft, ob die oberste Ebene ein Bild enthält, und dann wird das Bild in der Variable SourceName gespeichert:

SourceName := Layer.Name;

BitmapItemByName wird aufgerufen

MainDataModule.ImageList1.BitmapItemByName(SourceName, Item, Size)

um ein Element abzurufen, das dem angegebenen SourceName-Namen aus der Sammlung Source entspricht.

Wenn BitmapItemByName kein Element mit dem SourceName entsprechenden Namen ermittelt, wird ein neues Quellelement hinzugefügt:

NewSource := MainDataModule.ImageList1.Source.Add;

Diesem Element wird der Name SourceName zugewiesen:

NewSource.Name := SourceName;

Dann wird versucht, Item abzurufen:

Item := NewSource.MultiResBitmap.ItemByScale(1, False, True);

Wenn Item nicht vorhanden ist, dann wird der MultiResBitmap-Sammlung ein neues Element hinzugefügt:

Item := NewSource.MultiResBitmap.Add;

und dessen Größe festgelegt:

Item.Bitmap.SetSize(Size.cx, Size.cy);

Entsprechend

Size.cx := Round(Layer.SourceRect.Rect.Width);

Size.cy := Round(Layer.SourceRect.Rect.Height);

Danach oder wenn BitmapItemByName erfolgreich war, zeichnet DrawTextOnLayer den Text (gleich FNumber.ToString) auf das erhaltene Bild:

Item.Bitmap.Canvas.FillText(

TRectF.Create(1,0,Size.cx - 1,Size.cy div 2),

Text, False, 1, [], TTextAlign.Center, TTextAlign.Center);

Mit der aktuellen Implementierung wird durch Klicken auf Update Text eine Zahl auf das Bild mit dem ImageIndex=8 in die Bilderliste ImageList1 gezeichnet. Mit jedem Klick wird die gezeichnete Zahl um 1 erhöht.

So überprüfen Sie die Funktionalität der Schaltfläche "Update Text":

1. Wählen Sie in der Anwendung Demo of images die Registerkarte Bitmap and Image aus.
2. Klicken Sie wiederholt auf die Pfeilschaltfläche Right.
   Die Bilder aus der Bilderliste ImageList1 werden sequenziell auf den Titel None der Registerkarte None und in das Glyph1-Steuerelement gezeichnet.
3. Wenn Sie zum achten Mal auf die Pfeilschaltfläche Right klicken, wird das Umschlag-Bild mit dem ImageIndex=8 gezeichnet.
4. Die folgende Abbildung zeigt, dass der String 4 auf das Bild im Titel None und in das Glyph1-Steuerelement gezeichnet wurde.

Verwenden von Bilderlisten in Steuerelementen

Im Folgenden wird erläutert, wie Bilder aus einer Bilderliste auf die Oberfläche Ihrer Steuerelemente gezeichnet werden. Ähnlich können Sie beim Erstellen Ihrer eigenen Steuerelemente mit Bildern aus Bilderlisten verfahren.

Dieses Beispiel zeichnet Bilder aus der Bilderliste ImageList1 auf die Oberfläche des vierten Registerkarten-Steuerelements auf den Titel None. Um dies anzuzeigen, klicken Sie wiederholt auf die Pfeilschaltfläche Right oder Left. Die Bilder aus der Bilderliste ImageList1 werden sequenziell auf den Titel None gezeichnet.

Funktionsweise des Zeichnens von Bildern

Im TMainForm.Create-Konstruktor des Formulars wird das Feld FImageLink mit dem Typ TImageLink erstellt. Dann weist

FImageLink.Images := MainDataModule.ImageList1;

diesem Feld die Bilderliste ImageList1 zu. Anschließend wird die Ereignisbehandlungsroutine OnImagesChange für das Ereignis OnChange zugewiesen. OnImagesChange wird ausgeführt, wenn das Programm ein Bild auf einem Steuerelement mit der Bilderliste ImageList1 zeichnen muss. OnImagesChange kann folgendermaßen aussehen:

... TabItem4.Repaint; ...

Das Zeichnen eines Bildes wird von der Ereignisbehandlungsroutine TabItem4Paint der Ereignisbehandlungsroutine OnPaint des Registerkarten-Steuerelements TabItem4 durchgeführt:

procedure TMainForm.TabItem4Paint(Sender: TObject; Canvas: TCanvas;
                                  const ARect: TRectF);
var
  R: TRectF;
begin
  R := TRectF.Create(ARect.Right - 22, 4, ARect.Right - 6, 20);
  MainDataModule.ImageList1.Draw(TabItem4.Canvas, R,
                                 Glyph1.ImageIndex);
end;

Hier ist R das Rechteck auf dem Registerkarten-Steuerelement TabItem4, in das das Bild gezeichnet wird. Draw zeichnet das Glyph1.ImageIndex-Bild in R auf die angegebene TabItem4.Canvas-Zeichenfläche.

Sie können auch Nachkommen von TImageLink ableiten, in denen die Methode Change überschrieben werden soll, anstatt die Ereignisbehandlungsroutine OnChange zu erstellen.

Hinweis: Vergessen Sie nicht das erstellte FImageLink-Feld im Destruktor freizugeben. Verwenden Sie dazu die Methode DisposeOf.

Wenn Ihr Steuerelement die Verwendung von Aktionen unterstützt, dann unterstützt dieses Steuerelement wahrscheinlich das Interface IGlyph. In diesem Fall sollten Sie ein TGlyphImageLink-Objekt erstellen, das die Methode ImagesChanged aufruft. Dann müssen Sie die Ereignisbehandlungsroutine OnChange nicht zuweisen.

Die Eigenschaften ImageIndex und Images Ihres Steuerelements müssen korrekte Werte haben. Normalerweise werden Eigenschaften mit dem folgenden Stil verwendet:

property ImageIndex: TImageIndex read GetImageIndex write SetImageIndex
                                  stored ImageIndexStored;
…
function TMyControl.GetImageIndex: TImageIndex;
begin
  Result := FImageLink.ImageIndex;
end;

procedure TGlyph.SetImageIndex(const Value: TImageIndex);
begin
  FImageLink.ImageIndex := Value;
end;

Siehe auch

• Bilderlisten-Editor (FireMonkey)
• Video, das zeigt, wie mit dem Bilderlisten-Editor eine Bilderliste erstellt und bearbeitet wird (EN) Es werden einige fortgeschrittene und wichtige Leistungsmerkmale des Bilderlisten-Editors demonstriert.

• Video, das die typischen Schritte beim Erstellen einer neuen Bilderliste in einem FireMonkey-Projekt demonstriert (EN)

• FMX.ImageList (Beispiel)
• Video, das Funktionen aus dem "Beispiel FMX.ImageList" demonstriert (EN)

• Verwenden von Bitmaps mit Mehrfachauflösung
• MultiResBitmap-Editor
• Video, das die typische Verwendung des MultiResBitmap-Editors demonstriert (EN)