Mobile Tutorial: Using Tab Components to Display Pages (iOS and Android)
Tabs are defined by FMX.TabControl.TTabControl, which is a container that can hold several tab pages. Each tab page can contain any control as a UI element. You can hide the tab for these pages, and change pages without showing tabs.
For each tab, you can specify:
- A text label — for both iOS and Android
- Predefined icons — for iOS only
- Custom icons — for both iOS and Android
- 1 Using the Native Style for Tabs on iOS and Android
- 2 Designing Tab Pages Using the Form Designer
- 3 Using Custom Multi-Resolution Icons for Your Tabs
- 4 Defining Controls within a TabControl
- 5 Changing the Page at Run Time
- 6 See Also
Using the Native Style for Tabs on iOS and Android
This tutorial shows tabs with the same style on both iOS and Android, but this practice is not recommended.
We recommend that you observe the native style of each platform, as follows:
- On Android:
- On iOS:
Note: You can use the PlatformDefault value of the TTabPosition enumeration to set the tab position according to the default behavior of the target platform. When PlatformDefault is set for TTabPosition:
Designing Tab Pages Using the Form Designer
To create tab pages in your application, use the TTabControl component with the following steps:
- In the Views field on the Form Designer, create a view for each platform you want to support. This tutorial uses an iOS and an Android view.
- Select TTabControl from the Tool Palette:
- After you drop the TTabControl, an empty TabControl is shown on the Form Designer (you might need to manually adjust the position of the TabControl):
Typically, applications that use TabControl use the full screen to show pages.
To do this, you need to change the default alignment of TabControl. In the Object Inspector, change the Align property of TabControl to Client:
Right-click the TabControl, and select Items Editor... from the context menu:
Click Add Item three times, so that now you have three instances of TabItem here. Close the dialog box.
On the Form Designer, select the first TabItem and change its StyleLookup property:
iOS 7 Android
You can place any component on each page.
To move to a different page, just click the tab you want on the Form Designer, or change the ActiveTab property in the Object Inspector:
To change the location of tabs, select the TabPosition property for the TabControls component.
For each tab, you can select any of the following values of the TabPosition property in the Object Inspector:
Comparing the Tab Settings on iOS and Android
The following figures show both apps with the same TabPosition settings (Top, Bottom, Dots, and None) on iOS and Android.
However, you should set the appropriate different tab settings for each mobile platform, as indicated in #Using the Native Style for Tabs on iOS and Android.
|Tabs are displayed at the Top.|
|Tabs are displayed at the Bottom.|
|No Tabs are displayed.
Instead, three Dots ([...]) are displayed to indicate additional pages.
|No Tabs or Dots are displayed at run time, although you can see them at design time. |
Page can be changed only through code or action.
|Tabs are displayed with their platform default settings.|
Using Custom Multi-Resolution Icons for Your Tabs
You can use custom multi-resolution icons as well as custom text on tabs in your application.
This tutorial shows you how to construct the following three tabs that have custom icons and text:
- In Android apps, predefined icons are not supported, so you must use custom icons.
- In iOS apps, you can use either predefined icons or custom icons.
- To use custom icons on either iOS or Android, select the appropriate iOS or Android design device in the Form Designer, set the StyleLookup property of TTabItem to tabitemcustom, specify your custom icon as described in this section, and then build your app.
- For iOS, you can use our predefined icons by setting the StyleLookup property of TTabItem to the icon of your choice, such as (tabitemsearch).
- The custom glyphs used in this section are available in a zip file that is delivered in your $(BDS)\Images\GlyFX directory.
The three PNGs used here are located in the Aero directory:
- users_32 (People)
- unlock_32 (Security)
- tree_32 (Organization)
- Unzip the glyFX.zip file before you use the MultiResBitmap Editor if you want to use these images or any others available in the GlyFX collection.
Displaying Multi-Resolution Custom Icons on Tabs
- For a multi-device application, drop a TabControl component onto the Form Designer, set its Align property to Client, and add several tabs on the TabControl:
- Select a tab, and click the ellipsis button [...] on the CustomIcon property of TTabItem in the Object Inspector:
- The MultiResBitmap Editor opens:
- Repeat the following step to add any additional scales that you want to support:
- Click the Fill All from File button , navigate to the .png file you want to use, and click Open.
- Close the MultiResBitmap Editor.
- Repeat steps 2 - 6 for each of the remaining tabitems, and assign each tabitem a custom icon image.
- In the Text property, change the text on each tab:
After you define a custom icon, the FireMonkey framework generates a Selected Image and Non-Selected (dimmed) Image based on the given .png file. This transformation is done using the Alpha-Channel of the bitmap data. For example:
|Original Image||Selected Image||Non-Selected Image|
Using a Single-Resolution Bitmap for a Custom Icon
You can also use only a single-resolution bitmap by using the Bitmap Editor. A single-resolution bitmap displays only one scale in the Structure View:
To specify a single-resolution bitmap for a custom icon, perform the first step of the procedure above and then proceed as follows:
- In the Structure View, select Empty under CustomIcon:
- Now, in the Object Inspector, click the ellipsis button [...] in the Bitmap field (of the TabItem1.CustomIcon). This opens the Bitmap Editor:
- In the Bitmap Editor, click the Load... button, and select a PNG file.
The recommended size is 30x30 pixels for normal resolution, and 60x60 pixels for high resolution:
- Click OK to close the Bitmap Editor.
- In the Object Inspector, set the StyleLookup property to be tabitemcustom:
Defining Controls within a TabControl
As discussed, each Tab Page can contain any number of controls including another TabControl. In such a case, you can easily browse and manage different tab pages in the Structure View:
Changing the Page at Run Time
By the User Tapping the Tab
If Tabs are visible (when the TabPosition property is set to other than
None), an end user can simply tap a Tab to open the associated page.
By Actions and an ActionList
An action corresponds to one or more elements of the user interface, such as menu commands, toolbar buttons, and controls. Actions serve two functions:
- Actions represent properties common to the user interface elements, such as whether a control is enabled or whether a check box is selected.
- Actions respond when a control fires, for example, when the application user clicks a button or chooses a menu item.
Here are the steps to enable a user to move to different tab pages by clicking a button:
- On a multi-device application, place a TabControl, and add several tab items on it (TabItem1, TabItem2, and TabItem3).
- From the Tool Palette, add a TButton to the form, and then add an ActionList component:
- In the Form Designer, activate the Master view. Then select the button component in the Object Inspector, and select Action | New Standard Action | Tab > TChangeTabAction from the drop-down menu. After the user clicks this button, the action you just defined is performed (the tab page changes):
- Select ChangeTabAction1 in the Structure View, and then select TabItem2 for the Tab property in the Object Inspector. By linking to TabItem2, this action can change the page to TabItem2:
- With the previous step, the caption (the Text property) of the button is automatically changed to "Go To Security" because the caption of TabItem2 is "Security" in our example. Change the size of the button to fit the new caption text, or change the CustomText property of ChangeTabAction1 component as shown here:
- ChangeTabAction also supports the Slide animation to indicate a transition between pages. To use it, set the Transition property to Slide:
By Source Code
You can use any of the following three ways to change the active tab page from your source code:
TabControl1.ActiveTab := TabItem1;
TabControl1->ActiveTab = TabItem1;
Change the TabIndex property to a different value
The TabIndex property is a zero-based Integer value. You can specify any number between
TabControl1.TabCount - 1.
TabControl1.TabIndex := 1;
TabControl1->TabIndex = 1;
If ChangeTabAction is defined, you can execute an action from your code
// You can set the target at run time if it is not defined yet. ChangeTabAction1.Tab := TabItem2; // Call the action ChangeTabAction1.Execute;
ChangeTabAction1->Tab = TabItem2; ChangeTabAction1->Execute();
- Mobile Tutorial: Using a Button Component with Different Styles (iOS and Android)
- Mobile Tutorial: Using the Web Browser Component (iOS and Android)
- Mobile Tutorial: Using ListBox Components to Display a Table View (iOS and Android)
- Mobile Tutorial: Using LiveBindings to Populate a ListView (iOS and Android)