Mobile-Tutorial: Verwenden von Schaltflächen-Komponenten mit unterschiedlichen Stilen (iOS und Android)

Aus RAD Studio
Wechseln zu: Navigation, Suche

Nach oben zu Mobile-Tutorials: Mobile Anwendungsentwicklung (iOS und Android)


Schaltflächen auf mobilen Plattformen

FireMonkey definiert verschiedene Schaltflächentypen, und Sie können alle diese verschiedenen Typen mit den hier beschriebenen Schritten verwenden. Zu den FireMonkey-Schaltflächen zählen TButton und TSpeedButton.

Im Folgenden sind einige Beispiele verschiedener Stile für Schaltflächen-Komponenten dargestellt, die in unterschiedlichen Teilen der Benutzeroberfläche von Anwendungen verfügbar sind:

  • Schaltflächen im Formular:
iOS Android

Tint Buttons IOS7.png

Tint Buttons Android.png

IOS7 SegmentedControl.png

AndroidSegmentedControl.png


  • Schaltflächen in der Navigationsleiste (Symbolleiste):
iOS Android

IOS7 ToolBarAndBackButton.png

AndroidToolBarAndBackButton.png

IOS7 ToolBarWithArrowButtons.png

AndroidToolBarWithArrowButtons.png

IOS7 ToolBarCancelDoneButtons.png

AndroidToolBarCancelDoneButtons.png

IOS7 ToolBarWithPlusButton.png

AndroidToolBarWithPlusButton.png

IOS7 ToolBarWIthToolButtonIcons.png

AndroidToolBarWIthColoredToolButtons.png

IOS7 ScopeBar.png

AndroidScopeBar.png


Definieren von Aussehen und Verhalten einer Schaltflächen-Komponente

Nach dem Platzieren einer neuen Schaltfläche im Formular-Designer können Sie im Objektinspektor wichtige Eigenschaften für eine ausgewählte Komponente festlegen.

Wählen Sie eine Komponente (in diesem Fall: eine Schaltfläche) aus, suchen Sie dann bestimmte Eigenschaften, und ändern Sie deren Wert folgendermaßen:

  • Ändern Sie den Text, der auf der Schaltflächenoberfläche angezeigt wird, indem Sie den Wert der Eigenschaft Text im Objektinspektor aktualisieren.
  • Ändern Sie den Wert der Eigenschaften Position.X und Position.Y (oder ziehen Sie die Komponente mit der Maus an die gewünschte Position).
  • Ändern Sie den Wert der Eigenschaften Height und/oder Width (oder ziehen Sie mit der Maus am Rand der Komponente).
  • Klicken Sie in der Eigenschaft StyleLookup auf den nach unten weisenden Pfeil.
    In der Dropdown-Liste StyleLookup können Sie einen vordefinierten Stil je nach Verwendung der Komponente auswählen:

    IOSButtonStyleLookup.png
  • Um eine farbige Schaltfläche zu erstellen, ändern Sie die Werte der Eigenschaften TintColor und IconTintColor. Die zweite Eigenschaft steht nur für mit Stilen und Symbolen versehene Schaltflächen zur Verfügung. Der nächste Abschnitt enthält Einzelheiten zur Verwendung von TintColor und IconTintColor.

Verwenden von TintColor und IconTintColor für Schaltflächen

Für TButton und TSpeedButton stellt FireMonkey zwei Eigenschaften bereit, die die Tönung oder Farbe der Schaltfläche festlegen:

  • TintColor legt die Hintergrundfarbe von Schaltflächen fest.
  • IconTintColor legt die Farbe des Symbols auf mit Stilen versehenen Schaltflächen fest.

Hinweis: Die Eigenschaften TintColor und IconTintColor sind im Objektinspektor nur verfügbar, wenn Sie für die Schaltfläche einen passenden Stil und im Formular- Designer die geeignete Ansicht auswählen (diese Eigenschaften sind nicht in allen Ansichten sichtbar).

Für die Android-Zielplattform:

Sie können die meisten Schaltflächen mit beliebigen Stilen mit einer Tönung versehen:

  • Für TSpeedButton-Schaltflächen müssen Sie einen geeigneten StyleLookup-Wert auswählen, um den TintColor-Wert im Objektinspektor zu ändern.
  • Wählen Sie rechts oben im Formular-Designer in der Liste Ansichten ein Android-Gerät aus, um TintColor und IconTintColor zu ändern.
C.png

Für die iOS-Zielplattformen:

  • FireMonkey stellt dem Apple Style Guide entsprechende Schaltflächen bereit, und einige Schaltflächen unterstützen die Färbung von Schaltflächen möglicherweise nicht.
  • Beispielsweise verfügen segmentierte Schaltflächen unter iOS über die Eigenschaft TintColor.

Wenn Sie die Eigenschaft StyleLookup einer Schaltfläche ändern, werden im Objektinspektor automatisch entsprechend dem Wert der Eigenschaft StyleLookup die Eigenschaften TintColor und IconTintColor angezeigt bzw. ausgeblendet. Die folgende Abbildung zeigt drei TSpeedButtons für eine Android-App:

TintColor2.png

Verwenden von mit Stilen versehenen und farbigen Schaltflächen auf Zielplattformen

Informationen zur Verfügbarkeit der Eigenschaften StyleLookup, TintColor und IconTintColor für Schaltflächen auf allen Zielplattformen finden Sie in dieser Übersichtstabelle: Verwenden von mit Stilen versehenen und farbigen Schaltflächen auf Zielplattformen.

Anpassen von Schaltflächen mit Stilen

In FireMonkey ist eine TStyleBook-Komponente jetzt eine Sammlung von Stilen für verschiedene Zielplattformen. Sie können eigene Stile für einzelne Schaltflächen oder für eine gesamte Steuerelementklasse (TButton oder TSpeedButton) erstellen.

So beginnen Sie die Arbeit mit benutzerdefinierten Stilen für Schaltflächen:

  1. Überprüfen Sie im Formular-Designer, ob Sie in der Ansichtsauswahl Master ausgewählt haben.
  2. Klicken Sie im Formular-Designer mit der rechten Maustaste auf eine Schaltfläche oder Symbolschaltfläche, und wählen Sie dann im Kontextmenü einen der folgenden Einträge:

Button Custom Syles.png

Weitere Informationen zur Arbeit mit benutzerdefinierten Stilen finden Sie in den folgenden Themen:

Anzeigen von Bildern als Schaltflächen

In RAD Studio können Sie zur Entwurfszeit auf einfache Weise benutzerdefinierte Bilder als Schaltflächen-Komponenten anzeigen.

So verwenden Sie ein Bild als Schaltfläche:

  1. Ziehen Sie eine TButton- und eine TImage-Komponente in den Formular-Designer, und legen Sie TImage als untergeordnete Komponente von TButton fest. (Verwenden Sie dazu die Strukturansicht.)
  2. Wählen Sie im Objektinspektor die TImage-Komponente aus, und setzen Sie deren Eigenschaft Align auf Client.
  3. Wählen Sie in der Strukturansicht die Schaltfläche aus, erweitern Sie den Knoten Image, und klicken Sie dann auf 0 - Empty (1.000).
  4. Klicken Sie im Objektinspektor neben Bitmap auf die Ellipsen-Schaltfläche (...).
  5. Fügen Sie im MultiResBitmap-Editor Ihr benutzerdefiniertes Bild hinzu.
  6. Wählen Sie im Objektinspektor die Komponente TButton aus, und führen Sie Folgendes aus:
    • Leeren Sie die Eigenschaft Text.
    • Setzen Sie die Eigenschaften Height und Width von TButton auf die tatsächliche Höhe und Breite Ihres Bildes.

AddingImagetoButton.png

Erstellen von segmentierten Steuerelementen mit Schaltflächen-Komponenten

FireMonkey verwendet zum Definieren eines segmentierten Steuerelements die SpeedButton-Komponente. Mit segmentierten Steuerelementen können Benutzer einen Wert aus mehreren Optionen auswählen.

iOS Android

IOSSegmentedControl.png

AndroidSegmentedControl.png

Führen Sie die folgenden Schritte aus, um ein segmentiertes Steuerelement zu definieren:

  1. Ziehen Sie drei TSpeedButton-Komponenten aus der Tool-Palette auf das Formular. Ordnen Sie die TSpeedButton-Komponenten mit der Maus nebeneinander an:
iOS Android

ThreeButtonControls.png

AndroidThreeButtonControls.png

  1. Wählen Sie die erste Komponente aus, und ändern Sie deren Eigenschaft StyleLookup in segmentedbuttonleft:
iOS Android

ChangeFirstButtonToSegment.png

AndroidChangeFirstButtonToSegment.png

  1. Wählen Sie die zweite Komponente aus, und ändern Sie deren Eigenschaft "StyleLookup" in segmentedbuttonmiddle.
  2. Wählen Sie die dritte Komponente aus, und ändern Sie deren Eigenschaft "StyleLookup" in segmentedbuttonright. Alle drei Schaltflächen sehen nun wie ein segmentiertes Steuerelement aus:
iOS Android

AllButtonsAreNowSegments.png

AndroidAllButtonsAreNowSegments.png

  1. Wählen Sie jede Komponente aus, und ändern Sie die Eigenschaft Text beliebig:
iOS Android

LeftMiddleRightButtons.png

AndroidLeftMiddleRightButtons.png

  1. Wählen Sie alle drei Schaltflächen mit der Maus aus:
iOS Android

SelectAllThreeButtons.png

AndroidSelectAllThreeButtons.png

  1. Setzen Sie die Eigenschaft GroupName auf einen eindeutigen Namen, wie z. B. LocationSegments:
SetStayPressedToTrue.png

  1. Setzen Sie die Eigenschaft IsPressed einer Komponente auf True, um eine dieser Komponenten standardmäßig als gedrückt festzulegen:
iOS Android

IOSSegmentedControl.png

AndroidSegmentedControl.png

Erstellen einer Bereichsleiste (Scope Bar) auf einer Symbolleisten-Komponente

Sie können ein segmentiertes Steuerelement auf einer Symbolleiste erstellen; ein solches Steuerelement wird auch Scope Bar (Bereichsleiste) genannt, mit der der Suchbereich gesteuert werden kann.

Verwenden Sie dieselben TSpeedButton-Steuerelemente wie in den vorhergehenden Schritten, aber mit den folgenden Werten für die Eigenschaft StyleLookup (nur auf der iOS-Zielplattform verfügbar):

  • toolbuttonleft
  • toolbuttonmiddle
  • toolbuttonright

(Legen Sie auf der Android-Zielplattform StyleLookup für jede Schaltfläche als toolbutton fest.)

iOS Android

IOSScopeBar.png

AndroidScopeBar.png

Wichtige Unterschiede zwischen TButton und TSpeedButton

  • TSpeedButton kann den TAB-Fokus nicht erhalten. Das bedeutet auch, dass durch Drücken eines TSpeedButton der Fokus nicht von anderen Steuerelementen entfernt wird.
  • TSpeedButton ist in erster ‎Linie eine Symbolleisten-Schaltfläche.
  • Der Stil von TSpeedButton kann sich vom Stil von TButton unterscheiden. Beispielsweise entspricht auf der Android-Plattform der Standardstil von TSpeedButton dem Stil toolbutton von TButton. Wählen Sie den Stil buttonstyle, wenn ein TSpeedButton denselben Stil wie TButton haben soll.

Siehe auch