Anpassen von FireMonkey-Anwendungen mit Stilen

Aus Appmethod Topics
Wechseln zu: Navigation, Suche

Nach oben zu FireMonkey-Anwendungsdesign


FireMonkey-Steuerelemente sind Anordnungen einer Hierarchie von Untersteuerelementen, grundlegenden Formen und Pinseln, die mit Effekten ausgestattet sind. Diese Zusammensetzungen sind als Stile definiert, die in einem Stilbuch gespeichert sind. Die einzelnen Elemente eines Stils werden intern Ressourcen genannt; da dieser Begriff aber mehrere andere Bedeutungen hat, wird zur Vermeidung von Verwechslungen der Begriff Stilressource verwendet. Stile stellen eine breite Palette von Anpassungen ohne Erstellung von Unterklassen bereit.

Die im Produkt enthaltenen FireMonkey-Stile sind in .Style-Dateien gespeichert, die sich in C:\Program Files (x86)\Embarcadero\Studio\17.0\Redist\styles\Fmx befinden. Sie können diese Stile mit FireMonkey-Stil-Designer laden.

Standardstile

In FireMonkey hat jede Steuerelementklasse einen fest codierten Standardstil für jede Plattform. Nach dem Klicken auf Standardstil bearbeiten im Kontextmenü des Steuerelements wird eine Kopie des intern fest codierten Stils für eine Steuerelementklasse erstellt.

So zeigen Sie die Stildefinitionen im FireMonkey-Stil-Designer an:

  1. Legen Sie im Formular-Designer ein TStyleBook auf dem Formular ab.
  2. Doppelklicken Sie auf das Stilbuch.

Der Standardstil von FMX.StdCtrls.TPanel ist beispielsweise wie folgt definiert:

  • panelstyle: TRectangle

Der Name der Stilressource, die den Stil definiert, lautet "panelstyle". Sie verweist auf ein TRectangle. Das Erscheinungsbild dieses Rechtecks kann im Stil-Designer geändert werden. Jedes TPanel-Steuerelement auf dem Formular wird dann standardmäßig entsprechend Ihren Änderungen dargestellt.

Es gibt jedoch keine Regel, dass ein TPanel mit einem TRectangle dargestellt werden muss. TRoundRect oder TEllipse wären ebenfalls möglich. Sogar einfache Steuerelemente können komplexe Zusammensetzungen sein.

Nehmen Sie als Beispiel FMX.StdCtrls.TCheckBox, das ungefähr folgendermaßen aussieht:

  • checkboxstyle: TLayout (das gesamte Steuerelement)
    • TLayout (das Layout für das Kästchen)
      • background: TRectangle (das Kästchen selbst, das eine Zusammensetzung aus dem Folgenden ist:)
        • TGlowEffect (leuchten, wenn das Steuerelement den Fokus hat)
        • TRectangle (das äußere Rechteck, das das Kästchen bildet)
        • TRectangle (das innere Rechteck)
        • TColorAnimation (Farbanimation, wenn der Mauszeiger über das Steuerelement geführt wird)
        • TColorAnimation (und wieder zurück)
        • checkmark: TPath (das Häkchen in dem Kästchen, das als Pfad gezeichnet wird, mit:)
          • TColorAnimation (Farbanimation, wenn das Häkchen ein- oder ausgeblendet wird)
    • text: TText (und wieder auf der obersten Ebene: der Text der Beschriftung)

Der Stil hat einen Namen, damit Sie ihn finden und verwenden können. Zusätzlich haben bestimmte Unterelemente einen Namen, damit sie referenziert werden können. Wird die Eigenschaft IsChecked umgeschaltet, wird die Sichtbarkeit von "checkmark" geändert (durch Animation der Opazität seiner Farbe von deckend bis transparent). Wenn Sie die Eigenschaft Text von TCheckBox festlegen, wird die Text-Eigenschaft des zugrunde liegenden TText-Objekts ("text") festgelegt.

Ressourcenbenennung und Ressourcenreferenzierung

Zwei Eigenschaften mit ähnlichen Namen bilden die Verknüpfungen zwischen einem Steuerelement, seinem Stil und seinen Unterkomponenten:

  • Die Eigenschaft StyleName ist der Name, der einen Stil oder eine Stil-Unterkomponente für andere Elemente identifiziert und anhand dessen der Stil gefunden werden kann.
  • Die Eigenschaft StyleLookup eines Steuerelements wird auf den Namen der gewünschten Stilressource gesetzt, die für das jeweilige Steuerelement übernommen werden soll. Wenn StyleLookup leer ist, wird der Standardstil verwendet.
  • Unterkomponenten können durch Aufruf von FindStyleResource mit dem gewünschten Namen gesucht werden.

Ein Steuerelement verfügt über beide Eigenschaften, weil ihm ein Stil zugewiesen werden kann und es aber auch ein Stilelement (oder ein Teil davon) sein kann. Einfacheren Komponenten, wie Formen, kann kein Stil zugewiesen werden. Sie können nur Stilelemente sein.

Speicherung von Stilressourcen: Plattformübergreifendes TStyleBook

In FireMonkey ist eine TStyleBook-Komponente jetzt eine Sammlung von Stilen für verschiedene Zielplattformen. Jedes Element in der Sammlung beinhaltet einen Stil und einen Plattformmarker (einen String). Es gibt zwei unterschiedliche Plattformstilmarker für einen benutzerdefinierten Stil und einen Plattformstil.

  • Für den Plattformstil gibt es 4 Marker für jede Zielplattform, wie Windows, OS X, Android und iOS.

StyleBook.png

  • Für den benutzerdefinierten Stil ist die Anzahl der Marker höher, weil ein angepasstes Steuerelement auf jeder Version der Zielplattform nativ sein muss. FireMonkey unterstützt jetzt benutzerdefinierte Stile für die folgenden Plattformen:
    • Windows
    • Windows 7
    • Windows 8 Desktop
    • Windows 10 Desktop
    • OSX Yosemite
    • OSX Lion
    • iOS
    • Android Light

Hinweis: Es gibt auch einen "Default"-Plattformmarker. Die FireMonkey-Anwendung lädt den Default-Stil, wenn die Anwendung keine passenden Stile für die aktuelle Plattform finden kann.

Im FireMonkey-Stil-Designer können Sie Stile aus einer TStyleBook-Komponente bearbeiten, hinzufügen oder entfernen.

So öffnen Sie den FireMonkey-Stil-Designer:

  1. Legen Sie im Formular-Designer ein TStyleBook auf dem Formular ab.
  2. Doppelklicken Sie auf das Stilbuch.

Weitere Informationen finden Sie unter FireMonkey-Stil-Designer.

Das neu erstellte Objekt wird als Eigenschaft StyleBook des Formulars festgelegt, sodass es sich auf das Formular auswirkt.

Ein Formular kann mehr als ein TStyleBook-Objekt haben. Die Eigenschaft StyleBook kann jeweils ein beliebiges davon referenzieren; oder sie kann auf nil gesetzt werden, was bewirkt, dass das Formular nur den fest codierten Standardstil verwendet.

Der FireMonkey-Stil-Designer bearbeitet jeweils die Stile eines einzelnen TStyleBook-Objekts. Durch Doppelklicken auf ein TStyleBook-Objekt auf einem Formular wird der Stil-Designer mit diesen Stilen geöffnet. Der Stil-Designer kann das TStyleBook in eine .style-Datei in einem Textformat speichern und solche Dateien laden. Der gesamte Satz der fest codierten Standardstile kann auch in den Stil-Designer geladen werden.

Plattformstile

In FireMonkey bezeichnet der Begriff Plattformstil eine .Style-Datei, die eine Menge von Ressourcen für eine Plattform enthält. Um im Formular-Designer mit Plattformstilen zu arbeiten, doppelklicken Sie auf die TStyleBook-Komponente, um den FireMonkey-Stil-Designer zu öffnen.

Im Fenster des FireMonkey-Stil-Designers können Sie mit den Schaltflächen Load FMStyle.png und Save FMStyle.png eine vorhandene .Style-Datei öffnen bzw. aktuelle Stile in einer .Style-Datei speichern. Im Bereich Struktur wird die Hierarchie des Stils angezeigt:

Platform Styles.png

Benutzerdefinierte Stile

Neue Stile können durch Ändern der Standardstile erstellt oder von Grund auf für eine einzelne Komponente neu erstellt werden.

  • Klicken Sie zum Ändern eines Standardstils im Formular-Designer auf ein Steuerelement, und wählen Sie Benutzerdefinierten Stil bearbeiten. Der erzeugte Stilname wird vom Namen des Steuerelements abgeleitet, dadurch ersparen Sie sich das Festlegen eines aussagekräftigen Namens. Der erzeugte Name wird der Eigenschaft StyleLookup des Steuerelements zugewiesen, damit sich der Stil auf das Steuerelement auswirkt. Der neue Stil ist eine Kopie des aktuellen Stils des Steuerelements.
    FireMonkey Platform Style.png
  • Um einen benutzerdefinierten Stil für eine neue Plattform hinzuzufügen, klicken Sie im FireMonkey-Stil-Designer auf die Schaltfläche FireMonkey Style Designer Add Platform.png, und befolgen Sie die Anleitungen auf dem Bildschirm. Weitere Informationen finden Sie unter FireMonkey-Stil-Designer.
  • Um einen völlig neuen Stil zu erstellen, ändern Sie eine .style-Datei, und laden Sie sie mit dem FireMonkey-Stil-Designer. Zum Beispiel: Bearbeiten Sie nach dem Speichern des aktuellen Stile die Datei, und fügen Sie Folgendes vor dem letzten end hinzu:
object TBrushObject
  StyleName = 'somebrush'
end

Hinweis: Nach dem Hinzufügen einer neuen Plattform oder dem Ändern der aktuellen Plattform erstellt FireMonkey automatisch den benutzerdefinierten Stil für das Zielsteuerelement neu.

Verschachtelte Stile

Stile können auf andere, mit Stilen versehene Komponenten verweisen. Wie üblich werden Stile im TStyleBook-Objekt anhand des Namens ihrer obersten Ebene gesucht. Um beispielsweise denselben Verlauf zu verwenden, gehen Sie folgendermaßen vor:

  1. Speichern Sie im FireMonkey-Stil-Designer die vorhandenen Stile in einer .style-Datei.
  2. Bearbeiten Sie diese Datei mit einem Texteditor, um ein TBrushObject zu erstellen. Verwenden Sie einen geeigneten StyleName.
  3. Laden Sie die .style-Datei.
  4. Wählen Sie den neu definierten Stil aus, damit er im Objektinspektor angezeigt wird.
  5. Öffnen Sie die Eigenschaft Brush:
    1. Bearbeiten Sie die Eigenschaft Gradient im Pinsel-Designer (wählen Sie im Dropdown-Menü des Eigenschaftswertes Bearbeiten).
    2. Setzen Sie die Eigenschaft Kind auf Gradient.
  6. Führen Sie für jede Komponente, die den Verlauf verwendet, Folgendes aus (z.
    1. Setzen Sie die Eigenschaft Kind auf Resource.
    2. Öffnen Sie die Eigenschaft Resource (eine TBrushResource), und setzen Sie StyleLookup auf den Namen des Verlaufs aus Schritt 2.

Suchreihenfolge für Stilressourcen

Appmethod sucht folgendermaßen nach einem Stil und hält bei der ersten Übereinstimmung an:

  1. Wenn die Eigenschaft StyleBook des Formulars festgelegt ist, wird das Stilbuch anhand zweier Namen durchsucht:
    1. Der Eigenschaft StyleLookup des Steuerelements, sofern festgelegt.
    2. Eines Standardnamens, der aus dem Klassennamen des Steuerelements folgendermaßen gebildet wird: Der Standardname setzt sich aus dem Klassennamen ohne das führende "T", gefolgt von dem String "style" zusammen. Wenn der Klassenname beispielsweise TEdit lautet, dann ist der Stilname Editstyle.
  2. Die fest codierten Standardstile werden anhand von drei Namen gesucht:
    1. Der Eigenschaft StyleLookup des Steuerelements, sofern festgelegt.
    2. Des Standardstilnamens, der aus dem Klassennamen des Steuerelements gebildet wird.
    3. Eines Standardnamens, der aus dem Klassennamen des übergeordneten Steuerelements nach demselben Muster gebildet wird.

Beispiel: Die Standardnamen für TPanel lauten "Panelstyle" und "Controlstyle". Für TCalloutPanel lauten die Standardnamen "CalloutPanelstyle" und "Panelstyle".

Hinweis: FireMonkey generiert Namen von Standardstilen (siehe die Schritte 2.2 und 2.3) mit den virtuellen Methoden GetDefaultStyleLookupName und GetParentClassStyleLookupName. Optional können Sie diese Methoden überschreiben, um den Algorithmus für die Generierung von Namen zu ändern.

Bei dem Namensabgleich wird die Groß-/Kleinschreibung nicht berücksichtigt. Wenn keine Übereinstimmung gefunden wird, hat das Steuerelement keinen Inhalt und ist eigentlich nicht sichtbar. Code, der vom Auffinden von Unterkomponenten abhängt, schlägt fehl. (Dies dürfte nur bei unvollständigen oder inkorrekt zusammengestellten, benutzerdefinierten Steuerelementen vorkommen, weil alle integrierten Steuerelemente über zugehörige fest codierte Stile verfügen. Direkte Nachkommen von integrierten Klassen hätten den Inhalt ihrer Basisklasse; Nachkommen der zweiten Generation wären leer.)

Formularstil

Obwohl TForm kein Steuerelement und keine Unterklasse von TStyledControl ist, ist TForm dennoch mit einem Stil versehen. Die Eigenschaft StyleLookup eines Formulars hat den Standardwert "backgroundstyle". Die Standard-Stilressource mit diesem StyleName ist ein graues TRectangle-Objekt.

Die Eigenschaft Align der Ressource wird beim Laden auf Contents gesetzt, um den Hintergrund des Formulars damit zu füllen. Dies ist das erste Objekt, das gezeichnet wird, vor den anderen untergeordneten Objekten des Formulars.

Hinweis: Wenn Sie die Funktion TStyleManager.SetStyle im initialization-Abschnitt einer Unit der Hauptprojektdatei vor Application.Initialize angeben, dann wird der Stil allen Formularen zugewiesen.

Siehe auch