Working with TTabControl on iOS

Posted by on in Blogs
Tab Controls are very commonly used in mobile applications, especially on iOS.

In Delphi and RAD Studio XE4 we include several samples that show you the different ways TTabControl can be used.

If you are using TTabControl in your iOS application, you should set the TabPosition to either tpNone, tpDots or tpBottom.

tpBottom displays each tab item at the bottom, and you can choose from the built-in tab icons that are available via the StyleLookUp property or add you own glyphs via the custom icon property.

A good example of this is the 'Tabbed' Mobile Application Template that you can access by going to File->New->FireMonkey Mobile Application



tpDots provides you the option to show small dots instead of the tab bar buttons. Each tab represents a dot, and the dots are shown both at design time and runtime. The active tab is shown via a highlight color on the dot, indicating to the user what tab they are on. This is very useful if you are including a sign up screen in your application, for example. You can also use the dots in conjunction with the swipe right and left gestures, allowing the user to advance through the tabs by swiping left or right.

A good sample to look at is the iOS Tab Sliding demo that we include in the iOS Code Snippets directory that ships with RAD Studio XE4. You can also find the latest samples in our SourceForge directory.



tpNone provides you with design time only dots for navigating between each tab item. You can basically use each tab item as a different view. A good example of using tpNone is the Settings Project that ships with XE4. In this case, I have one tab control with two tabs, and the user navigates from tab1 to tab2 by clicking on a list item, and back to tab1 by clicking the back button.



-------------------------------------------------------

Tips for working with TTabControl in the IDE:

When working with TTabControl and selecting tpNone or tpDots as the TabPosition, you can navigate through the tabs by clicking on the circles that are shown in the Form Designer.

An alternative is selecting the TabControl in the Structure pane, and double-clicking in the ActiveTab field. This allows you to quickly move between all of your tabs.



Note: When deploying your application, it will default to the last selected active tab. If you want to be able to quickly navigate through your tabs at design time without changing the activetab at runtime, I would recommend setting up an OnCreate event:
procedure TTabbedForm.FormCreate(Sender: TObject);
begin
// 0 is the first tab
TabControl1.TabIndex := 0;
end;


- Sarina


About
Gold User, Rank: 5, Points: 558
Senior Product Manager, RAD Studio

Comments

  • Guest
    Vsevolod Leonov Monday, 24 June 2013

    Thanks! Great explanation how to use TTabControl poprely. That's important comparing to traditional use of the component in desktop appliations.

  • Please login first in order for you to submit comments
  • Page :
  • 1

Check out more tips and tricks in this development video: