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

Aus RAD Studio
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. Wählen Sie in der Tool-Palette die Komponente TTabControl aus:
    SelectTTabControlFromToolPalette.png

  3. Nach dem Ablegen der TTabControl-Komponente wird im Formular-Designer ein leeres TabControl angezeigt (Sie müssen eventuell die Position des TabControl manuell anpassen):
EmptyTabControlOnMobileDesigner.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

    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 TabControl-Komponente aus und setzen sie dann im Objektinspektor auf einen der folgenden Werte:
    SelectTabPositionPropertyForTabControl.png

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
TabControlPlatformDefaultiOS.png AndroidTabControlPlatformDefault.png
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 den gewünschte iOS- oder Android-Stil 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 C:\Program Files (x86)\Embarcadero\Studio\20.0\Images\GlyFX.
    Die hier verwendeten drei PNGs befinden sich im Verzeichnis Icons\Aero\PNG\32x32:
    • 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. Wählen Sie im Objektinspektor TabItem1 aus, und ändern Sie dann den Registerkartentitel, der in der Eigenschaft Text angegeben ist, in People; ändern Sie die Eigenschaft Text von TabItem2 in Security und von TabItem3 in Organization.
    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
  4. Stellen Sie sicher, dass die Master-Ansicht aktiv ist, klicken Sie im MultiResBitmap-Editor auf den Pfeil neben Benutzerdefinierte Größe, und wählen Sie Standardgröße.
    DefaultSize.png

  5. Wiederholen Sie die folgenden Schritte, um weitere Skalierungen, die Sie unterstützen möchten, hinzuzufügen:
    1. Klicken Sie im MultiResBitmap-Editor auf New.png (Neuen Eintrag hinzufügen).
    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

  6. Klicken Sie auf die Schaltfläche Alle aus Datei füllen MResBMPFill.png, navigieren Sie zu der Bilddatei, 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

  7. Schließen Sie den MultiResBitmap-Editor.
  8. Wiederholen Sie die Schritte 2 bis 7 für alle verbleibenden Registerelemente, und weisen Sie jedem Registerelement ein benutzerdefiniertes Symbolbild zu.


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. Klicken Sie im Formular-Designer auf TabItem1, um es auszuwählen.
  2. Ziehen Sie aus der Tool-Palette eine TActionList-Komponente und dann ein TButton-Steuerelement auf TabItem1:
    PlaceActionListComponentToForm.png
  3. Wählen Sie im Objektinspektor das Schaltflächen-Steuerelement und im Dropdown-Menü Aktion | Neue Standardaktion | Registerkarte > TChangeTabAction aus. Wenn der Benutzer auf diese Schaltfläche klickt, wird die definierte Aktion ausgeführt (die Registerkarte wird gewechselt):
    CreateNewChangeTabAction.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:
    SelectTabPageForChangeTabAction.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. Setzen Sie die Eigenschaft CustomText der ChangeTabAction1-Komponente auf Security, wie unten gezeigt, und ändern Sie bei Bedarf die Größe der Schaltfläche, damit die neue Beschriftung Platz hat.
    ChangeCustomText.png
  6. ChangeTabAction unterstützt auch die Slide-Animation zur Darstellung eines Seitenwechsels. Setzen Sie dazu die Eigenschaft Transition auf Slide:
    SetChangeTabTransitionXE6.png
  7. Wählen Sie im Formular-Designer TabItem2 aus, und ziehen Sie zwei TButtons aus der Tool-Palette auf TabItem2.
  8. Wählen Sie im Formular-Designer Button2 aus, und wählen Sie dann im Objektinspektor aus dem Dropdown-Menü Aktion | Neue Standardaktion | Registerkarte TPreviousTabAction aus.
  9. Wählen Sie im Formular-Designer Button3 aus, und wählen Sie dann im Objektinspektor aus dem Dropdown-Menü Aktion | Neue Standardaktion | Registerkarte TNextTabAction aus.
  10. Wählen Sie in der Strukturansicht PreviousTabAction1 aus, und setzen Sie im Objektinspektor dessen Eigenschaft TabControl auf TabControl1.
  11. Wählen Sie in der Strukturansicht NextTabAction1 aus, und setzen Sie im Objektinspektor dessen Eigenschaft TabControl auf TabControl1.
    SetTabControl1.png
  12. Wählen Sie im Formular-Designer TabItem3 aus, und ziehen Sie ein TButton aus der Tool-Palette auf TabItem3.
  13. Setzen Sie im Objektinspektor die Eigenschaft Action der Schaltfläche auf PreviousTabAction1.

Durch Quellcode

Zum Ändern der aktiven Registerkarte durch Klicken auf die Schaltfläche über den Quellcode können Sie eine der folgenden drei Möglichkeiten verwenden.

Weisen Sie der Eigenschaft ActiveTab eine Instanz von TTabItem zu

  1. Ziehen Sie aus der Tool-Palette eine TButton-Komponente auf TabItem3.
  2. Setzen Sie im Objektinspektor deren Eigenschaft Text auf Go To People.
    TextGoToPeople.png
  3. Doppelklicken Sie im Formular-Designer auf die Schaltfläche, um die Ereignisbehandlungsroutine OnClick zu erstellen, und fügen Sie den folgenden Code hinzu:
Delphi:
  TabControl1.ActiveTab := TabItem1;
C++:
  TabControl1->ActiveTab = TabItem1;

Legen Sie für die Eigenschaft TabIndex einen anderen Wert fest

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

  1. Ziehen Sie aus der Tool-Palette eine TButton-Komponente auf TabItem1.
  2. Setzen Sie im Objektinspektor deren Eigenschaft Text auf Go To Organization.
    TextGoToOrganization.png
  3. Doppelklicken Sie im Formular-Designer auf die Schaltfläche, um die Ereignisbehandlungsroutine OnClick zu erstellen, und fügen Sie den folgenden Code hinzu:
Delphi:
  TabControl1.TabIndex := 2;
C++:
  TabControl1->TabIndex = 2;

Rufen Sie die Methode ExecuteTarget einer Registeraktion auf

Sie können die Methode ExecuteTarget für jede Aktion des Register-Steuerelements aufrufen (TChangeTabAction, TNextTabAction und TPreviousTabAction). Dazu muss aber die Eigenschaft TChangeTabAction.Tab, TPreviousTabAction.TabControl bzw. TNextTabAction.TabControl definiert sein.

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

  // Call the action
  ChangeTabAction1.ExecuteTarget(nil);
C++:
  // You can set the target at run time if it is not defined yet.
  ChangeTabAction1->Tab = TabItem2;
  
  // Call the action
  ChangeTabAction1->ExecuteTarget(NULL);

Siehe auch

Beispiele