Mobile-Tutorial: Verwenden von Registerkarten-Komponenten zur Anzeige von Seiten (iOS und Android)

Aus Appmethod Topics
Wechseln zu: Navigation, Suche

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


Register werden von FMX.TabControl.TTabControl definiert, einem Container zur Aufnahme von mehreren Registerkarten. Jede Registerkarte kann beliebige Steuerelemente als UI-Elemente enthalten. Sie können das Register für diese Seiten ausblenden und Seiten ohne Anzeige der Register ändern.

IOSTabs.png

Sie können für jedes Register Folgendes angeben:

  • Eine Beschriftung – für iOS und Android
  • Vordefinierte Symbole – nur für iOS
  • Benutzerdefinierte Symbole – für iOS und Android

Verwenden des nativen Stils für Register unter iOS und Android

In diesem Tutorial werden Register mit demselben Stil für iOS und Android gezeigt, aber dieses Vorgehen wird nicht empfohlen.
Sie sollten den nativen Stil der jeweiligen Plattform beachten:

  • Android:
  • iOS:
    • Register werden normalerweise am unteren Rand des Bildschirms angezeigt (daher sollten Sie TTabPosition entweder auf Top oder auf PlatformDefault setzen).
    • Auf Registern wird immer Text und ein Symbol angezeigt, das Sie mit der Eigenschaft StyleLookup für jedes Register festlegen können.

Hinweis: Sie können mit dem Wert PlatformDefault der Aufzählung TTabPosition die Position des Registers gemäß dem Standardverhalten der Zielplattform festlegen. Wenn für TTabPosition der Wert PlatformDefault festgelegt ist:

  • Werden in iOS-Apps die Registerkarten am unteren Rand der TTabControl-Komponente ausgerichtet.
  • Werden in Android-Apps die Registerkarten am oberen Rand der TTabControl-Komponente ausgerichtet.

Entwerfen von Registerkarten im Formular-Designer

Führen Sie für die Komponente TTabControl die folgenden Schritte aus, um Registerkarten in einer Anwendung zu erstellen:

  1. Wählen Sie einen der folgenden Befehle aus:
  2. Erstellen Sie im Feld Ansichten des Formular-Designers eine Ansicht für jede Plattform, die Sie unterstützen möchten. In diesem Tutorial wird eine iOS- und eine Android-Ansicht verwendet.
  3. Wählen Sie in der Tool-Palette die Komponente TTabControl aus:
    SelectTTabControlFromToolPalette.png

  4. Nach dem Ablegen der TTabControl-Komponente wird im Formular-Designer ein leeres TabControl angezeigt (Sie müssen eventuell die Position des TabControl manuell anpassen):
iOS

EmptyTabControlOnMobileDesigner.png

Android

AndroidEmptyTabControlOnMobileDesigner.png


  1. Normalerweise wird für Anwendungen mit TabControl-Steuerelementen zum Anzeigen der Seiten der Vollbildmodus verwendet.
    Dazu müssen Sie die Standardausrichtung von TabControl ändern. Ändern Sie im Objektinspektor die Eigenschaft Align von TabControl in Client:
    ChangeAlignPropertyForTabControlXE6.png

  2. Klicken Sie mit der rechten Maustaste auf das TabControl-Steuerelement, und wählen Sie im Kontextmenü Eintrags-Editor...:
    SelectItemEditorForTabControl.png

  3. Klicken Sie dreimal auf Eintrag hinzufügen, damit drei TabItem-Instanzen erstellt werden. Schließen Sie das Dialogfeld.
    ItemEditorForTabControl.png


  4. Wählen Sie im Formular-Designer das erste TabItem aus, und ändern Sie dessen Eigenschaft StyleLookup:
    iOS 7

    SetStyleLookupForTabItem iOS7.png

    Android

    AndroidSetStyleLookupForTabItem.png


  5. Sie können auf jeder Seite beliebige Komponenten platzieren.
    Um im Formular-Designer zu einer anderen Seite zu wechseln, klicken Sie einfach auf das entsprechende Register, oder ändern Sie im Objektinspektor die Eigenschaft ActiveTab:
    : ChangeActiveTab.png

  6. Um die Position von Registern zu ändern, wählen Sie die Eigenschaft TabPosition der TabControls-Komponente aus.
    Sie können im Objektinspektor für jedes Register einen der folgenden Werte der Eigenschaft auswählen:
    SelectTabPositionPropertyForTabControlXE7.jpeg

Vergleich der Registerkarteneinstellungen unter iOS und Android

Die folgenden Abbildungen zeigen Apps mit denselben Einstellungen für TabPosition (Top, Bottom, Dots und None) unter iOS und Android.
Sie sollten aber die entsprechenden unterschiedlichen Einstellungen für Register für jede mobile Plattform festlegen, wie unter Verwenden des nativen Stils für Register unter iOS und Android beschrieben.

Top
iOS Android
TabControlTop.png AndroidTabControlTop.png
Register werden oben angezeigt.


Bottom
iOS Android
TabControlButtom.png AndroidTabControlBottom.png
Register werden unten angezeigt.


Dots
iOS Android
TabControlDots.png AndroidTabControlDots.png
Es werden keine Register angezeigt.

Stattdessen werden drei Punkte ([...]) angezeigt, um anzugeben, dass weitere Seiten vorhanden sind.


None
iOS Android
TabControlTopNone.png AndroidTabControlNone.png
Zur Laufzeit werden keine Register oder Punkte angezeigt, zur Entwurfszeit hingegen schon.

Seiten können nur durch Code oder eine Aktion gewechselt werden.


Plattformvorgabe
iOS Android
Ios.jpeg Android.jpeg
Registerkarten werden mit den Standardeinstellungen für die jeweilige Plattform angezeigt.


Verwenden von benutzerdefinierten Symbolen mit Mehrfachauflösung für Register

Sie können in Ihrer Anwendung benutzerdefinierte Symbole mit Mehrfachauflösung sowie benutzerdefinierten Text für Register verwenden.
In diesem Tutorial wird gezeigt, wie Sie die drei folgenden Register erstellen, die benutzerdefinierte Symbole und Text enthalten:

ThreeTabsWithText.png
Hinweise:
  • In Android-Apps werden keine vordefinierten Symbole unterstützt. Sie müssen daher benutzerdefinierte Symbole verwenden.
  • In iOS-Apps ist die Verwendung von vordefinierten und benutzerdefinierten Symbolen möglich.
  • Wählen Sie für die Verwendung von benutzerdefinierten Symbolen unter iOS und Android im Formular-Designer das gewünschte iOS- oder Android-Entwurfsgerät aus, setzen Sie die Eigenschaft StyleLookup von TTabItem auf tabitemcustom, geben Sie Ihr benutzerdefiniertes Symbol wie in diesem Abschnitt beschrieben an, und erzeugen Sie dann Ihre App.
  • Für iOS können Sie unsere vordefinierten Symbole verwenden, indem Sie die Eigenschaft StyleLookup von TTabItem auf das gewünschte Symbol setzen, z. B. auf TabItemSearch.png (tabitemsearch).
  • Die in diesem Abschnitt verwendeten benutzerdefinierten Glyphen finden Sie in einer ZIP-Datei im Verzeichnis $(BDS)\Images\GlyFX.

Die hier verwendeten drei PNGs befinden sich im Verzeichnis "Aero":

    • users_32 (People)
    • unlock_32 (Security)
    • tree_32 (Organization)
    Entpacken Sie vor dem Verwenden des MultiResBitmap-Editors die glyFX.zip-Datei, wenn Sie diese oder andere in der GlyFX-Sammlung enthaltenen Bilder verwenden möchten.

Anzeigen von benutzerdefinierten Symbolen mit Mehrfachauflösung auf Registern

  1. Ziehen Sie für geräteübergreifende Anwendungen eine TabControl-Komponente in den Formular-Designer, setzen Sie deren Eigenschaft Align auf Client, und fügen Sie dem TabControl mehrere Registerkarten hinzu:
    TabsAtTop.png

  2. Wählen Sie ein Register aus, und klicken Sie im Objektinspektor bei der Eigenschaft CustomIcon von TTabItem auf die Ellipsen-Schaltfläche [...]:
    TabItemCustomIconBitmapXE6.png

  3. Der MultiResBitmap-Editor wird geöffnet:
    MultiResBitmapEditor0.png
    Für den anfänglich leeren Eintrag für "Skalierung" wird eine Skalierung von 1,000 angenommen.

Klicken Sie auf die Dropdown-Liste für die Größe, wählen Sie Standardgröße aus, und legen Sie die Größe auf 32 x 32 fest:

  1. DefaultSize.png

  2. Wiederholen Sie den folgenden Schritt, um weitere Skalierungen, die Sie unterstützen möchten, hinzuzufügen:
    1. Klicken Sie auf Neuen Eintrag hinzufügen. New.bmp
    2. Geben Sie die weitere Skalierung ein, die Sie unterstützen möchten, z. B. 1,5, 2 oder 3.
    • Nachdem Sie alle gewünschten Skalierungen hinzugefügt haben, sieht der Editor etwa folgendermaßen aus:
      AllTheScalesAdded2.png

  3. Klicken Sie auf die Schaltfläche Alle aus Datei füllen MResBMPFill.png, navigieren Sie zur PNG-Datei, die Sie verwenden möchten, und klicken Sie auf Öffnen.
    Das ausgewählte Bild wird korrekt skaliert in den Einträgen für die Skalierung im MultiResBitmap-Editor angezeigt:
    EditorFullyPopulated2.png

  4. Schließen Sie den MultiResBitmap-Editor.
  5. Wiederholen Sie die Schritte 2 bis 6 für alle verbleibenden Registerelemente, und weisen Sie jedem Registerelement ein benutzerdefiniertes Symbolbild zu.
  6. Ändern Sie in der Eigenschaft Text den Text für alle Register:
    TabItemTextProperty.png

Nach Festlegung eines benutzerdefinierten Symbols erzeugt das FireMonkey-Framework anhand der angegebenen PNG-Datei ein Bild für den ausgewählten Zustand und ein Bild für den nicht ausgewählten (abgedunkelten) Zustand. Diese Transformation wird mit dem Alphakanal der Bitmap-Daten durchgeführt. Zum Beispiel:

Originalbild Ausgewähltes Bild Nicht ausgewähltes Bild
Users 32 h.png TabItemSelected.png TabItemNotSelected.png


Verwenden eines Bitmaps mit Einzelauflösung für ein benutzerdefiniertes Symbol

Sie können auch nur ein Bitmap mit Einzelauflösung hinzufügen, indem Sie den Bitmap-Editor verwenden. Für ein Bitmap mit Einzelauflösung wird in der Strukturansicht nur eine Skalierung angezeigt:

SingleResBitmapInStructureView.png

Führen Sie zuerst die obigen Schritte aus, und gehen Sie dann wie folgt vor, um ein Bitmap mit Einzelauflösung für ein benutzerdefiniertes Symbol festzulegen:

  1. Wählen Sie in der Strukturansicht unter CustomIcon Empty aus:
    TabItemCustomIconBitmapXE6 1.png

  2. Klicken Sie dann im Objektinspektor im Feld Bitmap (von TabItem1.CustomIcon[0]) auf die Ellipsen-Schaltfläche [...]. Der Bitmap-Editor wird geöffnet:
    TabItemCustomIconBitmapXE6 2.png

  3. Klicken Sie im Bitmap-Editor auf die Schaltfläche Laden..., und wählen Sie eine PNG-Datei aus.

Die empfohlene Größe beträgt für die normale Auflösung 30 x 30 Pixel und für die hohe Auflösung 60 x 60 Pixel:

  1. BitmapEditorForCustomIcon.png

  2. Klicken Sie auf OK, um den Bitmap-Editor zu schließen.



  1. Setzen Sie im Objektinspektor die Eigenschaft StyleLookup auf tabitemcustom:
    TabItemStyleLookupProperty.png

Definieren von Steuerelementen auf einem TabControl

Wie bereits erwähnt, kann jede Registerkarte eine beliebige Anzahl von Steuerelementen, einschließlich eines weiteren TabControl-Steuerelements, enthalten. In solchen Fällen können Sie in der Strukturansicht verschiedene Registerkarten schnell durchsuchen und verwalten:

iOS

TabControlCanContainAnotherTabControl.png

Android

AndroidTabControlCanContainAnotherTabControl.png


Wechseln der Seite zur Laufzeit

Durch Tippen auf das Register

Wenn Register angezeigt werden (wenn die Eigenschaft TabPosition nicht auf None gesetzt ist), können Endbenutzer einfach auf ein Register tippen, um die zugehörige Seite zu öffnen.

Durch Aktionen und eine Aktionsliste

Eine Aktion ist einem oder mehreren Elementen der Benutzeroberfläche zugeordnet, z. B. Menübefehlen, Schaltflächen und Symbolleisten. Aktionen dienen zwei Zwecken:

  • Aktionen stellen allgemeine Eigenschaften für Benutzeroberflächenelemente dar, z. B. ob ein Steuerelement oder ein Kontrollkästchen aktiviert ist.
  • Aktionen reagieren auf das Auslösen eines Steuerelements, beispielsweise wenn der Anwendungsbenutzer auf eine Schaltfläche klickt oder einen Menüeintrag auswählt.

Mit den folgenden Schritten ermöglichen Sie, dass Benutzer durch Klicken auf eine Schaltfläche zu anderen Registerkarten wechseln können:

  1. Platzieren Sie in einer mobilen FireMonkey-Anwendung ein TabControl, und fügen Sie mehrere Registerelemente hinzu (TabItem1, TabItem2 und TabItem3).
  2. Ziehen Sie aus der Tool-Palette ein TButton-Steuerelement und dann eine ActionList-Komponente auf das Formular:
    iOS:
    PlaceActionListComponentToForm.png

    Android:
    AndroidPlaceActionListComponentToForm.png

  3. Aktivieren Sie im Formular-Designer die Master-Ansicht. Wählen Sie dann im Objektinspektor die Schaltflächen-Komponente und im Dropdown-Menü Aktion | Neue Standardaktion | Tab > TChangeTabAction aus. Wenn der Benutzer auf diese Schaltfläche klickt, wird die definierte Aktion ausgeführt (die Registerkarte wird gewechselt):
    iOS:
    CreateNewChangeTabAction.png

    Android:
    AndroidCreateNewChangeTabAction.png

  4. Wählen Sie in der Strukturansicht die Aktion ChangeTabAction1 und dann für die Eigenschaft Tab im Objektinspektor TabItem2 aus. Durch Verknüpfen von TabItem2 kann mit dieser Aktion zur Seite TabItem2 gewechselt werden:
    iOS:
    SelectTabPageForChangeTabAction.png

    Android:
    AndroidSelectTabPageForChangeTabAction.png

  5. Im vorherigen Schritt wird die Beschriftung (die Eigenschaft "Text") der Schaltfläche automatisch in "Go To Security" geändert, weil der Titel von TabItem2 in diesem Beispiel "Security" lautet. Ändern Sie die Größe der Schaltfläche, damit die neue Beschriftung Platz hat, oder ändern Sie die Eigenschaft CustomText der ChangeTabAction1-Komponente wie im Folgenden gezeigt:
    iOS:
    ChangeCustomText.png

    Android:
    AndroidChangeCustomText.png

  6. ChangeTabAction unterstützt auch die Slide-Animation zur Darstellung eines Seitenwechsels. Setzen Sie dazu die Eigenschaft Transition auf Slide:
    SetChangeTabTransitionXE6.png


Durch Quellcode

Zum Ändern der aktiven Registerkarte im Quellcode können Sie eine der folgenden drei Möglichkeiten verwenden:

Weisen Sie der Eigenschaft ActiveTab eine Instanz von TTabItem zu

Object Pascal:
  TabControl1.ActiveTab := TabItem1;
C++:
  TabControl1->ActiveTab = TabItem1;

Setzen Sie die Eigenschaft TabIndex auf einen anderen Wert

Die Eigenschaft TabIndex ist ein nullbasierter Integerwert. Sie können eine beliebige Zahl zwischen 0 und TabControl1.TabCount - 1 angeben.

Object Pascal:
  TabControl1.TabIndex := 1;
C++:
  TabControl1->TabIndex = 1;

Wenn ChangeTabAction definiert ist, können Sie eine Aktion aus dem Quellcode ausführen

Object Pascal:
  // You can set the target at run time if it is not defined yet.
  ChangeTabAction1.Tab := TabItem2;

  // Call the action
  ChangeTabAction1.Execute;
C++:
  ChangeTabAction1->Tab = TabItem2;
  ChangeTabAction1->Execute();

Siehe auch