Mobile Tutorial: Using Tab Components to Display Pages (iOS and Android)

From Appmethod Topics
Jump to: navigation, search

Go Up to Mobile Tutorials: Mobile Application Development (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.

IOSTabs.png

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

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:
    • Tabs are typically shown at the bottom of the screen (so you should set TTabPosition either to Bottom or to PlatformDefault).
    • Tab items always display both text and an icon, which can be set via the StyleLookup property for each tab.

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:

  • In iOS apps, tabs are aligned at the lower edge of the TTabControl.
  • In Android apps, tabs are aligned at the top edge of the TTabControl.

Designing Tab Pages Using the Form Designer

To create tab pages in your application, use the TTabControl component with the following steps:

  1. Select:
  2. 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.
  3. Select TTabControl from the Tool Palette:
    SelectTTabControlFromToolPalette.png

  4. 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):
iOS

EmptyTabControlOnMobileDesigner.png

Android

AndroidEmptyTabControlOnMobileDesigner.png


  1. 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:
    ChangeAlignPropertyForTabControlXE6.png

  2. Right-click the TabControl, and select Items Editor... from the context menu:
    SelectItemEditorForTabControl.png

  3. Click Add Item three times, so that now you have three instances of TabItem here. Close the dialog box.
    ItemEditorForTabControl.png


  4. On the Form Designer, select the first TabItem and change its StyleLookup property:
    iOS 7

    SetStyleLookupForTabItem iOS7.png

    Android

    AndroidSetStyleLookupForTabItem.png


  5. 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:
    : ChangeActiveTab.png

  6. 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:
    SelectTabPositionPropertyForTabControlXE7.jpeg

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.

Top
iOS Android
TabControlTop.png AndroidTabControlTop.png
Tabs are displayed at the Top.


Bottom
iOS Android
TabControlButtom.png AndroidTabControlBottom.png
Tabs are displayed at the Bottom.


Dots
iOS Android
TabControlDots.png AndroidTabControlDots.png
No Tabs are displayed.

Instead, three Dots ([...]) are displayed to indicate additional pages.


None
iOS Android
TabControlTopNone.png AndroidTabControlNone.png
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.


Platform Default
iOS Android
Ios.jpeg Android.jpeg
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:

ThreeTabsWithText.png
Notes:
  • 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.png (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

  1. 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:
    TabsAtTop.png

  2. Select a tab, and click the ellipsis button [...] on the CustomIcon property of TTabItem in the Object Inspector:
    TabItemCustomIconBitmapXE6.png

  3. The MultiResBitmap Editor opens:
    MultiResBitmapEditor0.png
    The initial empty Scale entry is assumed to have a scale of 1.000.
    Click the Size size selector, choose Default size, and set the size to 32 x 32:
    DefaultSize.png

  4. Repeat the following step to add any additional scales that you want to support:
    1. Click Add new item New.bmp.
    2. Enter the additional Scale you want to support, such as 1.5, 2, or 3.
    • When you have added all the scales you want, the editor looks like this:
      AllTheScalesAdded2.png

  5. Click the Fill All from File button MResBMPFill.png, navigate to the .png file you want to use, and click Open.
    The selected image now appears appropriately scaled in each of the Scale entries on the MultiResBitmap Editor:
    EditorFullyPopulated2.png

  6. Close the MultiResBitmap Editor.
  7. Repeat steps 2 - 6 for each of the remaining tabitems, and assign each tabitem a custom icon image.
  8. In the Text property, change the text on each tab:
    TabItemTextProperty.png

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
Users 32 h.png TabItemSelected.png TabItemNotSelected.png


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:

SingleResBitmapInStructureView.png

To specify a single-resolution bitmap for a custom icon, perform the first step of the procedure above and then proceed as follows:

  1. In the Structure View, select Empty under CustomIcon:
    TabItemCustomIconBitmapXE6 1.png

  2. Now, in the Object Inspector, click the ellipsis button [...] in the Bitmap field (of the TabItem1.CustomIcon[0]). This opens the Bitmap Editor:
    TabItemCustomIconBitmapXE6 2.png

  3. 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:
    BitmapEditorForCustomIcon.png

  4. Click OK to close the Bitmap Editor.

  5. In the Object Inspector, set the StyleLookup property to be tabitemcustom:
    TabItemStyleLookupProperty.png

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:

iOS

TabControlCanContainAnotherTabControl.png

Android

AndroidTabControlCanContainAnotherTabControl.png


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:

  1. On a multi-device application, place a TabControl, and add several tab items on it (TabItem1, TabItem2, and TabItem3).
  2. From the Tool Palette, add a TButton to the form, and then add an ActionList component:
    iOS:
    PlaceActionListComponentToForm.png

    Android:
    AndroidPlaceActionListComponentToForm.png

  3. 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):
    iOS:
    CreateNewChangeTabAction.png

    Android:
    AndroidCreateNewChangeTabAction.png

  4. 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:
    iOS:
    SelectTabPageForChangeTabAction.png

    Android:
    AndroidSelectTabPageForChangeTabAction.png

  5. 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:
    iOS:
    ChangeCustomText.png

    Android:
    AndroidChangeCustomText.png

  6. ChangeTabAction also supports the Slide animation to indicate a transition between pages. To use it, set the Transition property to Slide:
    SetChangeTabTransitionXE6.png


By Source Code

You can use any of the following three ways to change the active tab page from your source code:

Assign an instance of TTabItem to the ActiveTab property

Object Pascal:

  TabControl1.ActiveTab := TabItem1;

C++:

  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 0 and TabControl1.TabCount - 1.

Object Pascal:

  TabControl1.TabIndex := 1;

C++:

  TabControl1->TabIndex = 1;

If ChangeTabAction is defined, you can execute an action from your code

Object Pascal:

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

  // Call the action
  ChangeTabAction1.Execute;

C++:

  ChangeTabAction1->Tab = TabItem2;
  ChangeTabAction1->Execute();

See Also