Chapter 8
UITabBar and UITabBarController

Key Skills & Concepts

• Understanding tab bars

• Using the Tab Bar Application template

• Creating an application that uses a tab bar

• Adding tabs to a tab bar

• Customizing a tab bar

A tab bar consists of two or more tabs along a window’s bottom. Each tab contains a view controller. As a user selects a tab, the tab loads its view controller, which in turn loads and displays its associated view. In this chapter, you explore creating tabbed applications. In the first task, you create a tabbed application using Xcode’s Tab Bar Application template. After examining this template’s results, you manually add a third tab to the tab bar. In the next task, you start with a Window-based Application template and create a two-tab application. In this task, you solidify your understanding by manually duplicating the steps taken by the Tab Bar Application template. The chapter’s final task illustrates allowing users to customize a tab bar’s tabs when it contains five or more tabs.

UITabBar, UITabBarController, UITabBarItem, and UITabBarControllerDelegate

The tab bar is useful for presenting different application subtasks or different views of the same data. If you own an iPhone, iPod touch, or iPad, you are certainly familiar with a tab bar controller, as several applications use tab bars. The Clock application, for instance, has a tab bar containing tabs with different subtasks (Figure 8-1). Each tab is a different subtask: World Clock, Alarm, Stopwatch, and Timer. The iPod application illustrates a tab bar containing different views of the same data (Figure 8-2). The Artists tab organizes your multimedia by artist; the Album tab organizes your media by album. Each tab is a different view of the same data, your iTunes multimedia. The iPod application illustrates another tab bar feature. When a tab bar has more than four tabs, it displays a More tab. When you press More, the tab bar presents the remaining tabs in a selectable list (Figure 8-3). You can also modify the iPod application’s tab bar using the Edit button. Clicking the Edit button displays the tabs in a view that allows you to modify which tabs are displayed in the tab bar (see Figure 8-3). When presented with an application that contains a task with multiple subtasks or an application that requires different views of the same data, use a tab bar.

Figure 8-1 The Clock application has a tab for each subtask.

Figure 8-2 The iPod application has a tab for each data view.

Figure 8-3 The iPod application uses a More tab to display tabs.

NOTE
Do not use a tab bar for sequential navigation or data drill-down. The navigation control and tables (described in the next two chapters) are more appropriate choices for navigating sequential lists and data drill-down.

You create a tab bar using the UITabBar class. A UITabBar displays two or more tabs along a window’s bottom edge. Individual tabs are UITabBarItem class instances. You tie these classes together using the UITabBarController and UITabBarControllerDelegate. Each UITabBarItem contains its own view controller. Click a tab, and the UITabBarItem loads its view controller. The view controller displays its view.

NOTE
A tab’s view controller might be an advanced view, like a table or a navigation controller. Chapter 9 illustrates placing a navigation controller in a tab. Chapter 10 illustrates placing a navigation controller in a tab and then a table in the navigation controller.

A UITabBar has an associated UITabBarController and UITabBarDelegate. The UITabBarController manages the UIViewController objects in each tab. For instance, if a user wishes to add, remove, or rearrange tab bar items, the UITabBarController is responsible for implementing the behavior. You will see how to accomplish a rearrangeable tab bar later in this chapter. But first, consider the easiest tab bar implementation: the Tab Bar Application template.

Try This: Using the Tab Bar Application Template

The Tab Bar Application template is the easiest route to creating a tabbed application, and compared with last chapter’s Single View Application template, this template is a more useful starting point for real-world projects. In this task, you create a simple tab bar application using the Tab Bar Application template. After examining the template’s results, you manually add a third tab to the tab bar.

1. Create a new Tab Bar Application by selecting the template in the New Project dialog. Name the project TabBarExOne.

2. In the Navigation pane, expand Classes And Resources. At first glance, it appears the template created the same classes as it would for a View-based Application. However, the template added several tab bar–related classes for you, making this a slightly more complex application.

3. Open TabBarExOneAppDelegate.h and notice the application’s delegate adopts the UITabBarControllerDelegate protocol. It also declares a UITabBarController property as an IBOutlet (Listing 8-1).

Listing 8-1 The TabBarExOneAppDelegate adopts the UITabBarControllerDelegate protocol

#import <UIKit/UIKit.h>
@interface TabBarExOneAppDelegate : NSObject <UIApplicationDelegate,
UITabBarControllerDelegate> {
 UIWindow *window;
 UITabBarController *tabBarController;
}
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain)
    IBOutlet UITabBarController *tabBarController;
@end

4. Open MainWindow.xib and review the objects in the xib (the icons to the left of the Editing pane). In particular, note that the template added a tab bar controller.

5. The template also added TabBarExOneAppDelegate as a proxy object to MainView.xib. Review TabBarExOneAppDelegate’s connections in the View | Utilities | Connections pane. Notice Xcode added a tabBarController property as an IBOutlet. Interface Builder subsequently knew the application delegate had a tabBarController outlet and connected it to the tab bar controller in the document window.

6. In the Editing pane, select the tab labeled First and then select “First View Controller – First” in the hierarchy of objects across the top of the Edit pane and notice the “Tab Bar Item – First” object under it. The second tab view controller also has a tab bar item associated with it.

Figure 8-4 The second tab bar item’s view controller is from another nib.

7. Highlight the second view controller in the document window. Notice in the controller’s inspector that the UIViewController is from an external nib; the template specified the view controller’s Nib name (Figure 8-4).

8. Build and run the application. A simple two-tab application runs in the simulator.

9. Open MainWindow.xib in Interface Builder.

10. On the tab bar controller’s canvas, click the tab bar item labeled First. Be careful—only click once. Clicking the item once selects the tab bar item’s view controller. You know you clicked once if the Object Identity Inspector pane lists the class as “FirstViewController”.

11. Click the tab bar item twice, and you select the actual tab bar item. The Object Identity Inspector pane lists the class as “UITabBarItem”.

The Tab Bar Application template generates a two-tabbed application. You will most certainly find situations where you need more tabs. Adding another tab to a tab bar is not difficult. In the next task, you add a third tab to the application.

Try This: Adding a Tab Bar Item to a Tab Bar Application

1. Select File | New | New File to create another UIViewController subclass and name the controller ThirdViewController. Ensure the “With XIB for user interface” check box that creates an accompanying xib is also selected. Xcode should generate the ThirdViewController.h, ThirdViewController.m, and ThirdViewController.xib files.

2. Select ThirdViewController.xib to open it in Interface Builder. Change the view’s color to something other than white and save your changes.

3. Open MainWindow.xib in Interface Builder and select the tab bar controller from the object icons on the left of the Editor pane.

4. Drag a new ViewController from the Object Library pane to the Editing pane and carefully drop it in the tab bar area. As you hover over the tab bar, the ViewController that you’re dragging will shrink down and take on the appearance of a tab item.

5. Click the third tab bar item once. In the Inspector, change the class from UIViewController to ThirdViewController. Also type ThirdViewController for the nib name.

6. Click the third tab bar item two times. Change the tab’s identifier to Search from the pull-down menu in the Tab Bar Item Attributes Inspector. A magnifying glass and Search appears in the tab (Figure 8-5).

Figure 8-5 Changing a tab bar item’s image to Search

Figure 8-6 Running the three-tab application in iPhone Simulator

7. Save your changes and run the application. The application now has a third tab bar item (Figure 8-6).

Try This: Creating a Tab Bar Application from Scratch

Using a template is well and good, but it doesn’t teach you how to actually build a tabbed application (unless you are able to use the template). So in this task, you duplicate the Tab Bar Application template’s steps, but start with a Window-based Application template and manually add the tab bar items to your project. It is no more difficult than using the template— just slightly more tedious.

1. Create a new Window-based Application and name it TabBarExTwo.

2. Open TabBarExTwoAppDelegate.h and change it so that it adopts the UITabBarController Delegate protocol (Listing 8-2). Add a UITabBarController property as an IBOutlet. The UITabBarControllerDelegate.h should appear like Listing 8-2. Don’t forget to synthesize the controller in UITabBarControllerDelegate.m. Save and build.

Listing 8-2 TabBarExTwoAppDelegate.h modified to use a UITabBarController

#import <UIKit/UIKit.h>
@interface TabBarExTwoAppDelegate : NSObject <UIApplicationDelegate,
UITabBarControllerDelegate> {
 UIWindow *window;
 UITabBarController *tabBarController;
}
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UITabBarController
*tabBarController;
@end

3. Create a new UIViewController class and name it FirstViewController. Be certain it also creates an associated xib. Xcode should generate the FirstViewController.h, FirstViewController.m, and FirstViewController.xib files.

4. Create another UIViewController and associated xib named SecondViewController.

5. Open FirstViewController.xib and change the view’s color. Open SecondViewController.xib and change the view’s color.

6. Save all of your changes.

7. Open MainWindow.xib and drag a new UITabBarController from the Object Library to the Editing pane. Interface Builder should show a tab bar controller with two tabs.

8. Select the TabBarExTwoAppDelegate’s Connections Inspector and connect its tabBarController outlet to the tab bar controller in the document window.

9. Click once on the first tab of the TabBarController in the Editing pane, and change its class to FirstViewController in the Identity Inspector. Change its Nib Name to FirstViewController.

10. Change View Controller (Item 2) to the SecondViewController, using the same steps as the preceding step. Do not forget to set the NIB Name to SecondViewController in the Second View Controller Attributes Inspector.

11. Change the first tab’s identifier to Recents and the second tab’s identifier to Downloads (Figure 8-7).

12. Save your changes.

13. Open TabBarExTwoAppDelegate.m. Add the tab bar controller to the applicationDidFinishLaunching method (Listing 8-3).

Figure 8-7 The first and second tab identifiers

Listing 8-3 TabBarExTwoAppDelegate.m modified to use a UITabBarController

#import "TabBarExTwoAppDelegate.h"
@implementation TabBarExTwoAppDelegate
@synthesize window;
@synthesize tabBarController;
-(void)applicationDidFinishLaunching:(UIApplication *)application {
    [window addSubview:tabBarController.view];
    [window makeKeyAndVisible];
}
-(void)dealloc {
    [window release];
    [tabBarController release];
    [super dealloc];
}
@end

14. Click Run, and a two-tab application runs in the iPhone Simulator (Figure 8-8).

Figure 8-8 Two-tabbed application running in iPhone Simulator

Try This: Allowing Users to Customize a Tab Bar

Sometimes you might wish to add more than five tabs to your application. However, with six or more tabs, the iPhone tab bar will have to display four tabs and a More tab. When a user presses More, the excess tabs appear in a selectable list. By default, a navigation bar with an Edit button is displayed across the window’s top. A user can then tap Edit and modify which tabs he or she wishes to see displayed on the tab bar.

The default behavior is to allow all tab bar items to be editable. If you wish to modify this default and limit which tabs are editable, you must modify the toolbar. In this task, you add more than four tabs to the first task’s tab bar. You then make the tab bar non-editable, followed by making only some tabs editable.

1. Open TabBarExOne and add a new view controller. Name the class FourthViewController. Ensure it also creates an associated xib. Xcode should create the FourthViewController.h, FourthViewController.m, and FourthViewController.xib files.

2. Open FourthViewController.xib in Interface Builder. Change the view’s color.

3. Close FourthViewController.xib and open MainWindow.xib in Interface Builder.

4. Add three more tabs by dragging and dropping three new view controllers from the Object Library onto the tab bar. They should each shrink to a tab item as you hover over the tab bar before releasing the drag (Figure 8-9).

5. Change each view controller’s class to FourthViewController. Also change each view controller’s NIB name to FourthViewController.

NOTE
You would never use the same view controller for three different tabs in a real project, since each tab likely reveals a unique subtask or data view.

6. Save your changes and click Run. Notice it added the fourth tab and a More tab (Figure 8-10). When you click the More tab, it displays a UITableView with the other two tabs (Figure 8-11). When you click either tab, the tab’s associated view controller’s view is displayed.

Figure 8-9 Adding three view controllers to the project

Figure 8-10 Application displaying four tabs and a More button

Figure 8-11 Clicking the More tab displays the remaining two tabs in a list.

Figure 8-12 Clicking Edit displays a view for configuring the tab bar’s tabs.

7. Click Edit, and a screen where you can configure the tab bar items is displayed (Figure 8-12).

8. Try dragging Two and Three to the tab bar and replacing a couple of the other tabs (Figure 8-13). Click Done to see the new tab order.

9. Open TabBarExOneAppDelegate.m and add the following line to the applicationDidFinish Launching method.

tabBarController.customizableViewControllers = nil;

10. Save changes and click Run. Notice the Edit button no longer appears after clicking More.

11. Now modify applicationDidFinishLaunching again. Change the code so it matches Listing 8-4.

Figure 8-13 Replacing a couple tabs with Two and Three

Listing 8-4 Setting the customizableViewControllers

-(void)applicationDidFinishLaunching:(UIApplication *)application {
     NSMutableArray * conts =
        [[[NSMutableArray alloc] init] autorelease];
    [conts addObject:[tabBarController.viewControllers
objectAtIndex:0]];
    [conts addObject:[tabBarController.viewControllers
objectAtIndex:1]];
    tabBarController.customizableViewControllers = conts;
    [window addSubview:tabBarController.view];
}

12. Save changes and click Run. Notice you can only edit First and Second (Figure 8-14).

Figure 8-14 Only First and Second are editable.

A tab bar’s default behavior is to allow users to rearrange, delete, and add tabs when a tab bar contains more than four tabs. To disable editing all tabs, set the tab bar controller’s customizableViewControllers to nil. To disable only some tags, add the tabs that should be editable to the customizableViewControllers. Tabs not added to customizableViewControllers are automatically made non-editable.

Summary

As this chapter illustrated, creating a tabbed application is easy. First, ensure your application has a UITabBarControllerDelegate. Although you can create your own class to adopt the UITabBarControllerDelegate protocol, using the application’s delegate is easier. But note, more complex applications that use tab bars should have a custom delegate associated with the tab bar and should not have the application’s main delegate adopt the UITabBarController Delegate.

After changing your application’s delegate to adopt the UITabBarController Delegate, add a UITabBarController property to the delegate. Then add a UITabBarController to MainWindow.xib and connect the controller to the application delegate’s tabBarController property. After connecting the delegate and tab bar controller, connect the individual UITabBarItem objects to view controllers. Creating tabbed applications is that easy.

In this chapter, you learned how to create a tab bar, its associated controller, and its delegate. This chapter didn’t have much in the way of explanation, as tab bars are best learned by doing. You created a tabbed application both using a template and manually. If you still do not understand tab bars, you should definitely reread this chapter, as tab bars are a navigation component you will use frequently for developing iOS applications. Think of all the situations where you use tabs in a desktop application—tabs are as ubiquitous on iOS applications. But remember conventional user interface (UI) wisdom: Use tab bars for subtasks and for different views on the same data set. Do not use tab bars for tasks involving sequential steps. A navigation bar and its associated controller are much more useful for this navigation. In the next chapter, you learn how to create and use a navigation bar and its associated controller. Moreover, you will place a navigation bar in a view controller as a tab bar item. After learning about the navigation bar, you then explore tables. After learning about a table’s fundamentals, you will place a navigation item and a table in the same view controller in an individual tab. After learning about tables, you will then have the fundamentals for creating the navigation for virtually any iOS application.