Using TabControl Transitions
Go Up to FireMonkey Applications Guide
This section explains how to use the Transition, Direction and Tab properties for FMX.TabControl.TTabControlAction in an application for mobile platforms.
Adding the TTabControl to the Mobile Form
- Create a multi-device form by selecting either:
- File > New > Multi-Device Application - Delphi
- File > New > Multi-Device Application - C++Builder
- Figure 1. Using the File menu to create a Multi-Device Application.
- In the Multi-Device Application dialog box select Blank Application
- Figure 2. Selecting Blank Application for the multi-device application.
- From the Tool Palette, add a TTabControl to the form
- To add TabItems, right-click the TabControl, select Add TTabItem. Add three TTabItems.
Adding Buttons to the TabItems
- From the Tool Palette, add one TButton to TabItem1 and one button to TabItem2.
- Add a TActionList to the mobile form.
- Select Button1 on TabItem1, then select the Action property in the Object Inspector, and assign New Standard Action > Tab > TChangeTabAction to the Action property.
- Repeat the same to Button2 on TabItem2.
- On TabItem2, select Button2. In the Object Inspector, expand the Action node. Select the Tab item and click the down arrow on the right. From the list, select TabItem3 to define that clicking the button triggers transition from the TabItem2 tab to TabItem3 tab. Notice that this changes the Button2 caption to Go to TabItem3.
Using TTabControlAction Properties
Here we discuss the Transition and Direction properties of FMX.TabControl.TTabControlAction actions, which switched active tabs in tab controls.
The Transition property has the TTabTransition type, which uses the following values:
- None Simple transition to the destination tab.
- Slide Visual animation for the switch action.
Setting Transition to Slide enables you to use the Direction property to specify the direction of the transition animation.
The Direction property has the TTabTransitionDirection type, which uses the following values:
- Normal Defines the forward left-to-right tab items switching transition effect. If the destination tab is before the currently active one, FMX.TabControl.TTabControlAction slides the content of the tabs to the right and vice-versa.
- Reversed Defines the reversed right-to-left tab items switching transition effect.
When you are working with a ListBox, you can use the following on-click event to go from TabItem1 to TabItem2 when using a tab control (ideally with TPosition set to None). Select the ListBox and create an OnItemClick event, as shown in the following code:
procedure TMasterDetail.ListBox3ItemClick(const Sender: TCustomListBox; const Item: TListBoxItem); begin ChangeTabAction1.Tab := TabItem2; ChangeTabAction1.ExecuteTarget(self); end;