Utilisation des transitions de TabControl
Sommaire
Remonter à Guide d'applications FireMonkey
Cette section explique comment utiliser les propriétés Transition, Direction et Tab pour FMX.TabControl.TTabControlAction dans une application pour plates-formes mobiles.
Ajout de TTabControl à la fiche mobile
- Créez une fiche multi-périphérique en sélectionnant :
- Fichier > Nouveau > Application multi-périphérique - Delphi
- Fichier > Nouveau > Application multi-périphérique - C++Builder
- Figure 1. Utilisation du menu Fichier pour créer une application multi-périphérique.
- Dans la boîte de dialogue Application multi-périphérique, sélectionnez Application vide
- Figure 2. Sélection d'une application vide pour l'application multi-périphérique.
- Depuis la palette d'outils, ajoutez un TTabControl à la fiche.
- Figure 3. Ajout d'un TTabControl à une fiche.
- Pour ajouter un TTabItems, cliquez avec le bouton droit sur TabControl, puis sélectionnez Ajouter TTabItem. Ajoutez trois TTabItems.
- Figure 4. Ajout d'un TTabItem à un TTabControl.
Ajout de boutons aux TabItems
- Depuis la palette d'outils, ajoutez un TButton à TabItem1 et un autre à TabItem2.
- Ajoutez un TActionList à la fiche mobile.
- Sélectionnez Button1 sur TabItem1, puis sélectionnez la propriété Action dans l'inspecteur d'objets et assignez Nouvelle action standard > Onglet > TChangeTabAction à la propriété Action.
- Figure 5. Ajout d'une action à un bouton.
- Répétez la procédure relative à Button2 sur TabItem2.
- Sur TabItem2, sélectionnez Button2. Dans l'inspecteur d'objets, développez le noeud Action. Sélectionnez l'élément Onglet et cliquez sur la flèche vers le bas située à droite. Dans la liste, sélectionnez TabItem3 pour définir qu'un clic sur le bouton déclenche une transition de TabItem2 à TabItem3. Notez que le libellé de Button2 est changé en Go to TabItem3.
- Figure 6. Développement des options Action.
-
- Dans l'image ci-dessous, le bouton Go to TabItem3 de TabItem2 effectue une transition vers TabItem3:
- Figure 7. Go to TabItem3 avec une transition assignée.
Utilisation des propriétés de TTabControlAction
Nous allons présenter les propriétés Transition et Direction des actions FMX.TabControl.TTabControlAction qui ont pour effet de permuter les onglets actifs dans les contrôles Onglet.
La propriété Transition a le type TTabTransition et utilise les valeurs suivantes :
- None Transition simple vers l'onglet de destination.
- Slide Animation visuelle pour l'action de permutation.
La définition de Transition sur Slide vous permet d'utiliser la propriété Direction pour spécifier la direction de l'animation.
La propriété Direction a le type TTabTransitionDirection et utilise les valeurs suivantes :
- Normal Définit l'effet de transition en avant (les éléments onglet glissent de la gauche vers la droite). Si l'onglet de destination est situé devant l'onglet en cours, FMX.TabControl.TTabControlAction fait glisser le contenu des onglets vers la droite et vice-versa.
- Reversed Définit l'effet de transition inversé (les éléments onglet glissent de la droite vers la gauche).
Lorsque vous travaillez avec une zone de liste, vous pouvez utiliser l'événement On-click suivant pour effectuer une transition de TabItem1 à TabItem2 lors de l'utilisation d'un contrôle Onglet (idéalement avec TPosition défini sur None). Sélectionnez la zone de liste et créez un événement OnItemClick, comme illustré dans le code suivant :
procedure TMasterDetail.ListBox3ItemClick(const Sender: TCustomListBox;
const Item: TListBoxItem);
begin
ChangeTabAction1.Tab := TabItem2;
ChangeTabAction1.ExecuteTarget(self);
end;