Xojo Documentation Xojo Documentation

iOS Clock showing a TabBar

A TabBar in iOS apps provides a way for you to easily switch between different views. The TabBar itself displays at the bottom of the screen. An iPad split screen can have separate tabs in each of the split sections.

The iOS clock app uses tabs to switch between "World Clock", "Alarm", “Bedtime”, "Stopwatch" and "Timer".

Tab Layout

The Tab Inspector Settings

You configure a tab in the iPhoneScreen or iPadScreen project items. With either IPhoneScreen or iPadScreen selected in the Navigator, go to the Inspector and for the "Content" property change the drop-down to "Tabs". This displays two new properties (Tabs and Tab 0 Content) and changes the screen layout to show two tabs.

Click the Edit button for the Tabs property to show the Tab Editor. In the Tab Editor, you can add and remove tabs and set the label and icon for each tab.

To assign a view to a tab, click on the tab at the bottom of the layout itself (you may have to scroll down on the larger iPad layouts). When you click on the tab, the property in the Inspector changes to indicate the tab #. For example it will say “Tab 1 Content” when you click on that tab. In the dropdown for that property, choose a view from your project to be displayed on that tab.

Dynamic Tabs

You can add new tabs at runtime by using the AddTab method of iOSTabBar. This code first checks to see that a TabBar is active and then it creates a new view and adds it to a new tab:

If Self.ParentTabBar <> Nil Then
Var v As New View3
Self.ParentTabBar.AddTab(v)
End If

You can also even create a tab bar at runtime by using the iOSTabBar class and the iOSApplication.CurrentScreen property. You create a new iOSTabBar in your code, add tabs to it and then set it as the current screen content. This technique allows your app to switch between a view without tabs and one with tabs. For example, this could be useful if you initial iOS view is a login that does not need tabs. If the login is successful you could switch in your tab layout instead. This code shows you how you can create a new TabBar and add views and tabs to it:

// Create new TabBar
Var tab As New iOSTabBar

// Add some views and tabs
Var v1 As New TabView1
v1.Title = "Tab 1"
tab.AddTab(v1)

Var v2 As New TabView2
v2.Title = "Tab 2"
tab.AddTab(v2)

// Assign the TabBar as the new current screen content
App.CurrentScreen.Content = tab

See Also

iOSTabBar, iOSScreen classes; UserGuide:iOS UI topic