Lateral Navigation

Lateral navigation implies replacing the current “mode” by an entirely different one. This is different from hierarchical navigation where you can access the history of views you had gone through, and from modal navigation which is a temporary takeover that eventually brings you back where you left off.

Tab Bar Controller

In iOS, lateral navigation is usually performed using a UITabBarController. The tab bar interface displays tabs at the bottom of the window for selecting between the different modes and for displaying the views for that mode. Each tab is associated with a custom view controller. When the user selects a specific tab, the tab bar controller displays the root view of the corresponding view controller, replacing any previous views.

The UITabBarController is usually at the root of the view hierarchy. The easiest way to create a tabbed application is to use the template provided by Xcode.

This will set a UITabBarController as the initial view controller, and add two lateral view controllers for you to start with. To add another tab, you can add a UIViewController to the Storyboard and drag a reference outlet from it to the viewControllers property of the tab bar controller.

You can then set up your view controller as you would regularly. The corresponding view will load the first time it is displayed, calling the viewDidLoad method, and stay loaded unless forced to unload. viewWillAppear: will be called every time the tab is selected, and viewWillDisappear: will be called every time the tab is deselected.

Tab Bar Items

Each view controller has a UITabBarItem associated to it, which can have a title, an icon, and a badge. The badge is text displayed in the top-right corner of the item, with a red oval around it. It is set using the badgeValue property.

You can use one of the built-in item styles provided by Apple (like Favorites, Contacts, History, etc.), which will automatically set the title and icon for you. You cannot edit either of these, but can provide a badge. Also note that if you use any of these built-in items, the mode associated with the tab must be somewhat related to the item, or else there is a chance that your app will be rejected for distribution by Apple.

Alternatively, you can provide your own icons and titles. The icon images must measure 30 x 30 pixels in standard resolution, and 60 x 60 pixels for Retina display. Only the alpha channel of the provided image is used to render the icon, so you should design a simple shape on a transparent background, stripped of any colour. The icon is automatically tinted by the tab bar controller to indicate selection.

The More Navigation Controller

The tab bar has limited space and can only display up to 5 items. If you add six or more view controllers to a UITabBarController, the tab bar will only display the first four items plus the standard More item on the right. Tapping the More item automatically brings up a standard interface for selecting the remaining items.

The interface for the standard More item includes an Edit button that allows the user to reconfigure the tab bar. By default, the user is allowed to rearrange all items on the tab bar. If you want some items to remain in place, you can remove their corresponding view controllers from the customizableViewControllers array property.

Combining Navigation Types

You’ll often want to use a UINavigationController inside a tab bar controller. This is done similarly to using a UIViewController; simply drag a reference outlet from it to the viewControllers property of the tab bar controller.

  1. View Controller Programming Guide for iOS. Apple, Sep 19 2012.

Comments are closed.