Understanding Tab Bar Controllers
The second type of view controller that we work with in this article is the tab bar controller (UITabBarController). Tab bar controllers, like navigation controllers, are prominently featured in a wide range of iOS applications. As the name implies, a tab bar controller presents a series of "tabs" at the bottom of the screen, represented as icons and text, that can be touched to switch between scenes. Each scene represents a different function in the application or a unique way of viewing the application's information.
The Phone application on the iPhone, for example, presents different ways of sorting your calls using a tab bar controller.
Like a navigation controller, the tab bar controller handles everything for you. When you touch a button to transition between scenes, it just works. You don't need to worry about programmatically handling tab bar events or manually switching between view controllers. The similarity doesn't end there.
Tab Bars and Tab Bar Items
The implementation of a tab bar within the storyboard is also very similar to a navigation controller. It contains a UITabBar that resembles a toolbar, but in appearance only. Any scene that is presented with the tab bar controller inherits this navigation bar within its scene.
The scenes presented by a tab bar controller must contain a tab bar item (UITabBarItem) that has a title, an image, and, if desired, a badge (a little red circle with a number in it).
If you are wondering why a tab might need a badge, imagine that you have a longrunning calculation in one of the tab scenes in your application. If the user switches off of the tab, the calculation continues. You can have the scene's view controller update the badge in the tab, even when the user is viewing another tab's scene.
This gives an immediate visual indication that there is something to look at without the user needing to switch back and forth.
Using Tab Bar Controllers in Storyboard
Adding a tab bar controller to the storyboard is just as easy as adding a navigation controller. Let's walk through the steps of how to add the controller, configure the tab bar buttons, and add additional tab scenes to the storyboard.
(Tabbed) Templates
Before you start building tab-based applications, point out that Apple includes an iOS application template called the Tabbed Application. This template creates an application with two sample tabs already added and two view controller subclasses set up and associated with each tab. It also makes absolutely no sense (to me) to use.
This template may get you up and running a few seconds faster than adding a tab bar controller to a storyboard, but for production projects, it has a fatal flaw: Apple has associated two view controllers with the two default tabs in the application and named them FirstViewController and SecondViewController. There's nothing wrong with this for learning exercises, but in a real application, you want to name these in a way that reflects their actual use (MovieListViewController, TheaterListViewController, and so on). You could certainly rename all of their references in Xcode, but by the time you did that, it would have been faster to just add and associate your own tab bar controller and view controller subclasses.
To add a tab bar controller to an application, starting with a Single View Application template. If you don't want the initial scene to segue into the tab bar controller, you just delete the initial scene by removing its view controller and then delete the corresponding ViewController interface and implementation files. Once your storyboard is in the state you want, drag an instance of the tab bar controller object from the Object Library into the Document Outline or the editor. This adds a controller and two sample tab bar scenes to the view.
The tab bar controller scene represents the UITabBarController object that coordinates all the scene transitions. Within it is a tab bar object that can be customized slightly with Interface Builder, changing the color.
From the tab bar controller are two "relationship" connections to the two scenes that the tab bar will display. The scenes can be differentiated by the name of the tab bar button that is added to them (Item 1 and Item 2, by default).
Setting the Tab Bar Item Attributes
To edit the tab bar item (UITabBarItem) that is displayed for any scene, open that scene's view controller and select the tab bar item within the Document Outline area, and then open the Attributes Inspector (Option+Command+4).
Using the Tab Bar Item section, you can set a value to be displayed in the tab bar item badge. Typically you want to set this via tab bar item's badgeValue property (an NSString) in code. You can also use the Identifier pop-up menu to choose from over a dozen predefined tab bar icons and labels. If you choose to use a predefined icon/label, you cannot customize it further, because Apple wants these to remain constant throughout iOS.
To set your own image and title, use the Bar Item settings. The Title field sets the label for the tab bar item, and the Image drop-down associates an image resource from your project for the item.
Tab bar images are 32x32 points or smaller and are automatically styled by iOS to appear in a monochromatic color scheme (regardless of what you choose). Simple line drawings with a transparent background turn out the best when creating your tab bar interface art.
That's everything you need to configure a scene for a tab bar controller. But what if you want to add additional scenes to the tab bar? We tackle that now, and, as you'll see, it's even easier than adding a scene to a navigation controller. Adding Additional Tab Bar Scenes
Unlike other segues that we've used, a tab bar has a clearly defined item (the tab bar item) that will trigger a change in scene. The scene transition isn't even called a segue; it is a relationship between the tab bar controller and a scene. To create a new scene, tab bar item, and the relationship between the controller and scene, start by adding a new view controller to the storyboard.
Drag a new view controller instance into the Document Outline or editor. Next, Control-drag from the tab bar controller to the new scene's view controller in Document Outline. When prompted, choose Relationship - viewControllers.
Creating the relationship does everything we need; it automatically adds a tab bar item to the new scene, ready to be configured. We can keep doing this to create as many tabs and scenes as we need in the tab bar.
The scenes that you're adding to the tab bar controller are the same as any other scene. You associate a view controller subclass using the Identity Inspector and then interact with the scene the same as you would any other.
To set the tab bar item's badgeValue property, for example, you can just create a property in your view controller to reference the tab bar item. It's exactly the same as if you had added a button or a label to a view and wanted to modify it programmatically.
Sharing Data Between Tab Bar Scenes
Like the navigation controller, a tab bar controller presents us with an easy opportunity to share information. Create a tab bar controller (UITabBarController) subclass that is assigned as the identity of the tab bar controller. Add properties to the subclass that represent the data we want to share, and then access those properties through the parentViewController property in each scene.
Now that you've seen how to add these new view controllers to your project, let's actually create a few examples that demonstrate these principles in action. As promised, these will be light on the typing, so don't expect a masterpiece. The beauty is that once you know see how easy it is to use these controllers, the possibilities for your applications will open up tremendously.