Creating the Objects in Interface Builder

The process for combining tab bar and navigation controllers in a nib file is relatively straightforward. The only real difference is how you create the relationship between the tab bar controller and the navigation controller. When using these objects by themselves, each one takes on the role of the root view for the application’s window. When combined, however, only the tab bar controller assumes this role. Instead of providing the root view for the window, the navigation controller acts as the root view for a tab in the tab bar interface.

Figure 7-1 shows the configuration of the objects that you need to create in your nib file. In this example, the first three tabs of the tab bar interface use custom view controllers but the last tab uses a navigation controller. One additional view controller is then added to act as the navigation controller’s root view controller. To manage memory better, each of the custom view controllers (including the root view controller of the navigation controller) stores its corresponding view in a different nib file.

Assuming you are starting from a generic main nib file (one that does not include a tab bar controller), you would use the following steps to create the objects from Figure 7-1 in Interface Builder:

1. Drag a tab bar controller object from the library to your Interface Builder document window.

   When you add a tab bar controller to a nib file, Interface Builder also adds a tab bar view, two root view controllers, and two tab bar items (one for each view controller).

2. Save a reference to the tab bar controller using an outlet.

   In order to access the tab bar controller at runtime, you either need to use an outlet or you must explicitly retrieve the nib file’s top-level objects when you load the nib file. Using an outlet is generally much simpler. To add an outlet for both the tab bar controller and window, you need to include code similar to the following in your application delegate’s header file:

   @interface MyAppDelegate : NSObject <UIApplicationDelegate> {

   UITabBarController* tabBarController;

   UIWindow *window;

   }

   @property (nonatomic, retain) IBOutlet UIWindow *window;

   @property (nonatomic, retain) IBOutlet UITabBarController *tabBarController;

   @end

   After adding the outlet definition, create a connection from that outlet to the tab bar controller object.

3. Synthesize the properties from the preceding step by adding the following code to the implementation file of your application delegate class:

   @synthesize window;

   @synthesize tabBarController;

4. Add one View Controller object and one Navigation Controller object to the tab bar controller.

   The number of view controllers embedded inside your tab bar controller object determines the number of tabs displayed by your tab bar interface. Because the initial tab bar controller already has two generic view controllers, you need to add one more View Controller object (UIViewController) and one Navigation Controller object (UINavigationController).

   To add a view controller, do one of the following:

   • Drag the appropriate object from the library to the tab bar in the edit surface.

   • Drag the object from the library to the tab bar controller in your Interface Builder document window. The window must be in outline mode.

   When adding the navigation controller, you should either drag the appropriate object from the library or select the tab bar controller object and configure your view controller types using the Attributes inspector. Both of these options add the correct type of view controller object to your nib file. You should never add a navigation controller by dragging a generic View Controller object to the nib file and change its class name to the desired class type.

   To delete a view controller, select the view controller object in the edit surface or document window and press the Delete key.

5. Arrange the view controllers in the order you want them to appear in the tab bar interface.

   You can rearrange view controllers (and the corresponding tabs) by dragging the tabs displayed on the tab bar controller edit surface or by dragging the view controllers in the Interface Builder document window (outline mode only). Although the edit surface shows all of the tabs, only five are displayed at runtime. If your tab bar controller contains six or more view controllers, only the first four are displayed in the tab bar initially. The last spot on the tab bar is reserved for the More view controller, which presents the remaining view controllers.

6. Configure the view controllers.

   For each root view controller, you should configure the following attributes:

   • Set the class of each custom view controller object using the Identity inspector. For generic View Controller objects, change the class name to the custom subclass you want to use to display the contents of that tab. Do not change the class of the Navigation Controller object itself but do set the class of the navigation controller’s embedded custom view controller.

   • Provide a view for each custom view controller. The preferred way to do this is to configure the NIB Name attribute of each custom view controller with the name of the nib file containing the view. Although you can include each view in the same nib file as the view controller, doing so is not recommended. For information on how to configure the nib file for a custom view controller, see Storing the View in a Detached Nib File.

   • As appropriate, configure any style or appearance information for any of the view controllers.

7. Configure the tab bar item for each view controller.

   You can select the tab bar item from the tab bar controller edit surface or from the Interface Builder document window when it is in outline or browser modes. Using Interface Builder, you can specify the title, image, and badge of a tab bar item. Alternatively, you can set the tab bar item to one of the standard system tabs by assigning a value to the Identifier property in the Attributes inspector.

8. Save your nib file.

Although the preceding steps configure the tab bar interface, they do not install it in your application’s main window. To do that, you need to add some code to the applicationDidFinishLaunching: method of your application delegate, as shown in Listing 7-1. This is where you use the outlet you created for the tab bar controller in your application delegate.

Listing 7-1  Installing the combined interface in your application’s window

- (void)applicationDidFinishLaunching:(UIApplication *)application {

    [window addSubview:tabBarController.view];

}

Creating the Objects Programmatically

If you are creating a combined tab bar and navigation interface programmatically for your application’s main window, the most appropriate place to do so is in the applicationDidFinishLaunching: method of your application delegate. The following steps explain how to create a combined interface where three tabs contain custom view controllers and one contains a navigation controller:

1. Create the UITabBarController object.

2. Create three custom root view controller objects, one for each tab.

3. Create an additional custom view controller to act as the root view controller for your navigation interface.

4. Create the UINavigationController object and initialize it with its root view controller.

5. Add the navigation controller and three custom view controllers to your tab bar controller’s viewControllers property.

6. Add the tab bar controller’s view to your application’s main window.

Listing 4-1 shows the template code needed to create and install three custom view controllers and a navigation controller as tabs in a tab bar interface. The class names of the custom view controllers are placeholders for classes you would provide yourself. And the init method of each custom view controller is also a method that you would provide to initialize the view controllers. The tabBarController and window variables are declared properties of the class that retain their values.

Listing 7-2  Creating a tab bar controller from scratch

- (void)applicationDidFinishLaunching:(UIApplication *)application {

   self.tabBarController = [[[UITabBarController alloc] init] autorelease];

   MyViewController1* vc1 = [[[MyViewController1 alloc] init] autorelease];

   MyViewController2* vc2 = [[[MyViewController2 alloc] init] autorelease];

   MyViewController3* vc3 = [[[MyViewController3 alloc] init] autorelease];

   MyNavRootViewController* vc4 = [[[MyNavRootViewController alloc] init] autorelease];

   UINavigationController* navController = [[[UINavigationController alloc]

                           initWithRootViewController:vc4] autorelease];

   NSArray* controllers = [NSArray arrayWithObjects:vc1, vc2, vc3, navController, nil];

   tabBarController.viewControllers = controllers;

   // Add the tab bar controller's current view as a subview of the window

   window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];

   [window addSubview:tabBarController.view];

}

Even if you create your custom view controllers programmatically, there are no restrictions on how you create the view for each one. The view management cycle is the same for a view controller regardless of how it is created, so you can create your views either programmatically or using Interface Builder as described in Creating the View for Your View Controller.