UITAB

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  tabbar 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 or iPod touch, 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. Upon pressing 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 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.  

Using the Tab Bar Application Template

The Tab Bar Application template is the easiest route to creating a tabbed application, and unlike 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. 1. Create a new Tab Bar Application by selecting the template in the New Project Name the project TabBarExOne.
   2. In Groups & Files, expand Classes And 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 h and notice the application’s delegate adopts the UIT abBarControllerDelegate protocol. It also declares a UITabBarController property as an IBOutlet (Listing 8-1).
   4. Open xib and review the document window. 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 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 document window, in List View, expand Selected First View Controller (First) and notice the Tab Bar Item (First). The second view controller also has a tab bar item associated with
   7. Highlight the second view controller in the document 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). Also notice the template took a shortcut. Rather than creating a UIViewController for the second SecondView.xib, it used a generic UIViewController. If you wished, you could easily remedy this by adding a new UIViewController class to the Xcode project and changing SecondView.xib’s view controller’s class to the class created.
   8. Build and run the A simple two-tab application runs in the simulator.

                                                                     Figure 8-4 The second tab bar item’s view controller is from another nib.   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

1. Open xib in Interface Builder.
2. On the tab bar controller’s canvas, click the tab bar item labeled Be careful—only click once. Clicking the item once selects the tab bar item’s view controller. You know you clicked once if the Inspector tabs have ―View Controller‖ in their title.
3. Click the tab bar item twice, and you select the actual tab bar The Inspector tabs should have ―Tab Bar Item‖ in their title.
4. Save and close Interface
5. Click Build And Go and run the application in the

  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.  

Adding a Tab Bar Item to a Tab Bar Application

1. If closed,open the last task’s application in Create another UIViewController and name the controller ThirdViewController. Ensure the checkbox that creates an accompanying xib is also selected. Xcode should generate the ThirdViewController.h, ThirdViewController.m, and ThirdViewController.xib files.
2. Open xib in Interface Builder. Change the view’s color to something other than white. Save and exit Interface Builder.
3. Open xib in Interface Builder. Drag a UIViewController from the library to the document window. Change the UIViewController’s class to ThirdViewController.
4. Highlight the tab bar controller and open its Tab Bar Attributes
5. Add a tab bar item to the View Controllers Name the item Search, and notice a third tab appears on the tab bar controller canvas.
6. Click the third tab bar item In the Inspector, change the class from UIViewController to ThirdViewController. Also change the nib name to ThirdViewController.
7. Click the third tab bar item two Change the tab’s identifier to Search in the Tab Bar Item Attributes Inspector. A magnifying glass and Search appears in the tab (Figure 8-5).
8. Save and exit Interface
9. Build and run the application. The application now has a third tab bar item (Figure 8-6).

       Figure 8-5 Changing a tab bar item’s image to Search                                             Figure 8-6 Running the three-tab application in iPhone Simulator   Creating a Tab Bar Application from Scratch Using a template is well and good, but doesn’t teach you how to actually build a tabbed application (unless you are using 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 h and change it so 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.
3. Create a new UIViewController class and name it 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
5. Open xib and change the view’s color. Open SecondViewController xib and change the view’s color.
6. Save and exit Interface
7. Open xib and add a UITabBarController to the document window. Interface Builder should show the tab bar controller’s canvas.
8. Select the TabBarExTwoAppDelegate’s Connections Inspector and connect its tabBarController outlet to the tab bar controller in the document
9. In the document window, ensure the view mode displays the items as a Expand the tab bar controller, select the Selected View Controller (Item 1), and change its class to FirstViewController in the First View Controller Identity Inspector. Change its Nib Name to FirstViewController.
10. Change View Controller (Item 2) to the SecondViewController, using the same steps as the previous 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 and close Interface
13. Open TabBarExTwoAppDelegate.m. Add the tab bar controller to the applicationDidFinish Launching method (Listing 8-3).

     Figure 8-7 The first and second tab identifiers   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 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 Build And Go, and a two-tab application runs in the iPhone Simulator (Figure 8-8).   Figure 8-8 Two-tabbed application running in iPhone Simulator      

Allowing Users to Customize a Tab Bar

Sometimes you might wish to add more than four tabs to your application. However, the iPhone tab bar can only 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 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 xib in Interface Builder. Change the view’s color.
3. Close xib and open MainWindow.xib in Interface Builder.
4. Add three more tabs by adding One, Two, and Three to the View Controllers in the Tab Bar Controller Attributes Inspector (Figure 8-9).

Figure 8-9 Adding three view controllers to the project     5.Change each view controller’s class to 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.

1. Save and quit Interface builder.
2. Build and run in the iPhone 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.
3. Click the Edit button, and a screen where you can configure the tab bar items is displayed (Figure 8-12).

       Figure 8-10 Application displaying four                                                                                                          Figure 8-11 Clicking the More tab tabs and a More button.                                                                                                                                  displays the remaining two tabs in a list.     Figure 8-12 Clicking the Edit button displays                                                                              Figure 8-13 Replacing a couple tabs with a view for configuring the tab bar’s tabs.                                                                                                  Two and Three.  

1. Try dragging Two and Three to the tab bar and replacing a couple of the other tabs (Figure 8-13). Click Done and exit the program.
2. Open TabBarExOneAppDelegate.m and add the following line to the applicationDidFinish Launching method tabBarController.customizableViewControllers = nil;

3. Click Build And Notice the Edit button appears but clicking it results in no tabs displayed.
4. Now modify applicationDidFinishLaunching Change the code so it matches Listing 8-4.
5. Click Build And Go. Notice you can only edit First and Second (Figure 8-14).

    Figure 8-14 Only First and Second are editable.   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]; } 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.