Using TabControl Transitions

From RAD Studio
Jump to: navigation, search

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

  1. Create a multi-device form by selecting either:
    NewMobileApp.png
    Figure 1. Using the File menu to create a Multi-Device Application.
  2. In the Multi-Device Application dialog box select Blank Application
    NewMobileApp BlankApp.png
    Figure 2. Selecting Blank Application for the multi-device application.
  3. From the Tool Palette, add a TTabControl to the form
    AddTabControl.JPG
    Figure 3. Adding a TTabControl to a form.
  4. To add TabItems, right-click the TabControl, select Add TTabItem. Add three TTabItems.
    AddTabItem.jpg
    Figure 4. Adding a TTabItem to a TTabControl.

Adding Buttons to the TabItems

  1. From the Tool Palette, add one TButton to TabItem1 and one button to TabItem2.
  2. Add a TActionList to the mobile form.
  3. Select Button1 on TabItem1, then select the Action property in the Object Inspector, and assign New Standard Action > Tab > TChangeTabAction to the Action property.
    AddAction.jpg
    Figure 5. Adding an action to a button.
  4. Repeat the same to Button2 on TabItem2.
  5. 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.
    Action expanded.PNG
    Figure 6. Expanding the Action options.

In the image below, the Go to TabItem3 button in TabItem2 makes a transition to TabItem3:
Go to TabItem3.JPG
Figure 7. Go to TabItem3 button with a transition assigned.

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;

See Also