UserGuide

iOS TabBars

From 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 iPhoneLayout or iPadLayout project items. With either iPhoneLayout or iPadLayout 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 screen 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 Screen1
Self.ParentTabBar.AddTab(v)
End If

You can also even create a tab bar at runtime by using the iOSTabBar class and the MobileApplication.CurrentLayout 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 screen without tabs and one with tabs. For example, this could be useful if you initial screen 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 screens and tabs to it:

// Create new TabBar
Var tab As New iOSTabBar

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

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

// Assign the TabBar as the new current layout content
App.CurrentLayout.Content = tab

See Also

iOSTabBar, MobileScreen classes; UserGuide:iOS User Interface Controls topic