Anpassen des Designs einer FireMonkey-Anwendung
Nach oben zu FireMonkey Quick Start - Entwerfen der Benutzeroberfläche
Inhaltsverzeichnis
Anpassen des Designs einer FireMonkey-Anwendung
Bei Verwendung der visuellen Komponentenbibliothek (Visual Component Library, VCL) können Sie im Objektinspektor die Farbe und andere Eigenschaften für das Aussehen und Verhalten jeder Komponente ändern. Diese Eigenschaften werden aber in FireMonkey nicht angezeigt. In FireMonkey wird das Aussehen und Verhalten von Komponenten in ihren Stilen definiert, und Sie können einer Komponente einen Stil zuweisen.
Aufgrund des Stile-Konzepts können Sie das Aussehen und Verhalten der gesamten Anwendung durch einfaches Zuweisen eines anderen Stils schnell ändern.
Im Folgenden werden FireMonkey-Stile gezeigt, die Sie in Ihren Anwendungen einfach einsetzen können:
Air.Style |
Amakrits.Style |
AquaGraphite.Style |
Blend.Style |
Dark.style |
FMX.Platform.iOS.style |
FMX.Platform.Mac.style |
FMX.Platform.Win.style |
GoldenGraphite.Style |
iOS.Style |
iOSNative.Style |
Light.Style |
Mac.Style |
MacBlue.Style |
MacGraphite.Style |
RubyGraphite.style |
Windows7.Style |
AndroidDark.style |
Für die Implementierung eines Stils in Ihre Anwendung stehen mehrere typische Methoden zur Verfügung:
- In Schritt 1 wird beschrieben, wie der Stil zur Laufzeit im Code geändert wird.
- In Schritt 2 wird beschrieben, wie der Stil beim Entwurf der Anwendung festgelegt und der festgelegte Stil in Ihre Anwendung einbezogen wird.
- In Schritt 3 wird beschrieben, wie der Stil für eine bestimmte Komponente festgelegt wird.
Schritt 1: Übernehmen des vorhandenen Stils für Ihre Anwendung zur Laufzeit
- Hinweis: Sie finden eine Beispielanwendung im Verzeichnis
C:\Users\Public\Documents\Embarcadero\Studio\19.0\Samples\Object Pascal\FireMonkey Desktop\ControlsDemo.
Die Beispielanwendung ControlsDemo enthält viele FireMonkey-Komponenten, und die Implementierung zum Wechseln des Stils zur Laufzeit ist bereits enthalten.
Um die Funktionalität dieser Demoanwendung zu nutzen, klicken Sie auf File > Load Style… und wählen eine Stildatei aus.
Die FireMonkey-Stildateien befinden sich im Verzeichnis C:\Users\Public\Documents\Embarcadero\Studio\19.0\Styles.
Mit diesem Code können Sie einen neuen Stil anwenden:
procedure TfrmCtrlsDemo.MenuItem7Click(Sender: TObject);
begin
if OpenDialog1.Execute then
TStyleManager.SetStyleFromFile(OpenDialog1.FileName);
end;
Zuerst zeigt dieser Democode ein Öffnen-Dialogfeld an, in dem eine Datei ausgewählt werden kann. Der Name des Dialogfeldes lautet im Code OpenDialog1. Wenn der Benutzer eine Datei auswählt, gibt die Methode Execute True zurück. Dieser Code überprüft, ob der Benutzer eine Datei ausgewählt hat. Dann setzt die Prozedur TStyleManager.SetStyle den aktiven Stil auf den Stil aus der Datei OpenDialog1.Filename. OpenDialog1.Filename enthält den vom Benutzer ausgewählten Dateinamen.
Schritt 2: Übernehmen eines vorhandenen Stils für Ihre Anwendung zur Entwurfszeit
Sie können vorhandene Stile auch zur Entwurfszeit mithilfe der Komponente TStyleBook übernehmen.
So übernehmen Sie einen Stil zur Entwurfszeit:
- Legen Sie eine TStyleBook-Komponente auf dem Formular ab. Standardmäßig erhält die neue Komponente den Namen StyleBook1.
- Wählen Sie ein geräteübergreifendes Formular aus, und setzen Sie die Eigenschaft StyleBook auf StyleBook1.
- Doppelklicken Sie auf die Komponente StyleBook1. Der Stil-Designer wird geöffnet.
- Klicken Sie auf die Schaltfläche Load, und wählen Sie den Stil aus. Stile befinden sich im Verzeichnis
C:\Program Files (x86)\Embarcadero\Studio\19.0\styles\Fmx. - Wählen Sie Übernehmen und schließen. Jetzt werden die Steuerelemente im Formular-Designer im angegebenen Stil gerendert.
- Hinweis: Durch Schritt 2 dieses Tutorial wurde die Funktionalität dieser Demoanwendung (siehe Schritt 1) geändert. Wenn Sie diesen Schritt ausprobiert haben, entfernen Sie die Komponente StyleBook1 wieder aus der Anwendung, damit die ursprüngliche Funktionalität der Demo nicht geändert wird.
Schritt 3: Ändern des Stils einer bestimmten Komponente
Sie können auch den Stil einer bestimmten Komponente anpassen.
So passen Sie den Stil für eine bestimmte Komponente an:
- Wählen Sie im Formular-Designer eine Komponente aus.
- Klicken Sie mit der rechten Maustaste auf die Komponente, und wählen Sie die Option Benutzerdefinierten Stil bearbeiten aus.
- Der Stil-Designer wird geöffnet, und ein StyleBook1 wird erstellt. Die Eigenschaft StyleBook des Hauptformulars wird auf StyleBook1 gesetzt. In der Strukturansicht wird StyleBook1 angezeigt. Wählen Sie in der Strukturansicht den Stil des Steuerelements aus, auf das Sie im Formular-Designer mit der rechten Maustaste geklickt haben. Wenn es sich beispielsweise um das Steuerelement Panel1 handelt, dann wählen Sie panel1style1 aus. Im Objektinspektor werden die Eigenschaften für diesen Stil angezeigt.
- 3. Ändern Sie im Objektinspektor die Eigenschaften dieses Stils. Sie können im Objektinspektor jede angezeigte Eigenschaft ändern.
- 4. Wählen Sie Übernehmen und schließen, und kehren Sie zum Formular-Designer zurück.
- 5. Wenn Sie die Komponente (deren Stil Sie gerade angepasst wird) auswählen, erhält die Eigenschaft StyleLookup den Namen des gerade erstellten Stils (wie z. B. Panel1Style1).
- 6. Jetzt können Sie unterschiedlichen Komponenten diesen Stil zuweisen. Wählen Sie eine andere Komponente aus, und setzen Sie die Eigenschaft StyleLookup auf Panel1Style1.
