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

Aus Appmethod Topics
Wechseln zu: Navigation, Suche

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


Schaltflächen in mobilen FireMonkey-Anwendungen

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 mobilen Anwendungen verfügbar sind:

  • Schaltflächen im Formular:
iOS 6 iOS 7 Android

Tint Buttons IOS6.png

Tint Buttons IOS7.png

Tint Buttons Android.png

IOSSegmentedControl.png

IOS7 SegmentedControl.png

AndroidSegmentedControl.png
  • Schaltflächen in der Navigationsleiste (Symbolleiste):
iOS 6 iOS 7 Android

IOSToolBarAndBackButton.png

IOS7 ToolBarAndBackButton.png

AndroidToolBarAndBackButton.png

IOSToolBarWithArrowButtons.png

IOS7 ToolBarWithArrowButtons.png

AndroidToolBarWithArrowButtons.png

IOSToolBarCancelDoneButtons.png

IOS7 ToolBarCancelDoneButtons.png

AndroidToolBarCancelDoneButtons.png

IOSToolBarWithPlusButton.png

IOS7 ToolBarWithPlusButton.png

AndroidToolBarWithPlusButton.png

IOS6 ToolBarWIthToolButtonIcons.png

IOS7 ToolBarWIthToolButtonIcons.png

AndroidToolBarWIthColoredToolButtons.png

IOSScopeBar.png

IOS7 ScopeBar.png

AndroidScopeBar.png

Definieren von Aussehen und Verhalten einer Schaltflächen-Komponente

Nach dem Platzieren einer neuen Schaltfläche im Designer für mobile FireMonkey-Formulare 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 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 Tint und IconTintColor. Die zweite Eigenschaft steht nur für mit Stilen und Symbolen versehene Schaltflächen zur Verfügung.

Verwenden von TintColor 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.

Für die Android-Zielplattform können Sie Schaltflächen beliebigen Stils mit einer Tönung versehen.

Für die iOS-Zielplattform stellt FireMonkey zwei Schaltflächen bereit, die dem Apple Style Guide entsprechen. Einige Schaltflächen unterstützen eventuell die Tönungsfunktion nicht. Unter iOS 6 unterstützen beispielsweise die segmentierten Schaltflächen die Tönungsfunktion nicht, aber unter iOS 7 haben diese Schaltflächen die Eigenschaft TintColor.

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

TintColor2.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 jeweilige Text-Eigenschaft beliebig:
iOS Android

LeftMiddleRightButtons.png

AndroidLeftMiddleRightButtons.png

  1. Klicken Sie, und ziehen Sie den Mauszeiger über die drei Schaltflächen, um diese Komponenten auszuwählen:
iOS Android

SelectAllThreeButtons.png

AndroidSelectAllThreeButtons.png

  1. Legen Sie für die Eigenschaft GroupName einen eindeutigen Namen fest, wie z. B. LocationSegments:
SetStayPressedToTrue.png

  1. Um festzulegen, dass eine dieser Komponenten standardmäßig als Gedrückt angezeigt wird, setzen Sie die Eigenschaft IsPressed einer Komponente auf True:
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:

  • toolbuttonleft
  • toolbuttonmiddle
  • toolbuttonright
iOS Android

IOSScopeBar.png

AndroidScopeBar.png

Siehe auch