iPhone Application Development : Building a Multi-View Tab Bar Application (part 1)

As you’ve seen, it isn’t difficult to manage multiple view controllers, but you’ll need to overcome some peculiarities if you choose to implement the view switching yourself.

Frequently, a more expeditious approach is to use a tab bar (UITabBar) and tab bar controller (UITabBarController). This combination handles the view switching process almost entirely on its own. You supply the views and define the interface, and it makes the magic. Tab bars are similar in appearance to toolbars but are intended solely for switching views rather than executing arbitrary commands.

Implementation Overview

You built a simple multi-view application that required us to manually insert subviews, clear the view, and deal with other “overhead” activities that would ideally be performed automatically. In this project, you’ll be creating another application with three views, but this time a tab bar controller will handle switching the views for us. This frees us up to add some real functionality!

If you follow along, you’ll create an application for calculating areas and volumes. It will also provide a Summary view to show how many times the user has performed a calculation. This will help you understand how views, which are implemented largely independently, might exchange data.

The implementation itself will require you to create an instance of a tab bar and tab bar controller and, within that, instances of each of the three view controllers that we will be using for the calculations. You’ll also add icons to the tab bar, giving it a professionally designed appearance. The views themselves will be in separate XIB files and will include a number of inputs and outputs. Figure 1 shows the application with tab bar that we’ll be implementing in this example.

Figure 1. This application will use a tab bar to enable easy switching between calculations.

Setting Up the Project

As your applications become more complex, you’ll want to start using more meaningful names for the classes and XIB files that you use in your projects. In this example, we’re going to be implementing a tab bar controller, but we’re not going to be using Apple’s default tab bar template.

Apple’s tab bar project template creates a two-view button bar with a view controller class called FirstViewController. The first view is contained in the MainWindow.xib and the second in SecondView.xib. The MainView.xib also contains view controllers instances for both views.

This, frankly, doesn’t make much sense. If you’re going to separate your content views into multiple XIB files, it should be consistent. This template gives us a tab bar implementation that is scattered and difficult to use. Instead, we’re going to start from scratch with a simple Window-Based Application template.

Begin by creating a new project and choosing the window-based iPhone application template. Name the project TabbedCalculation.

Adding Additional View Controllers and Views

Our new application will provide three views, each corresponding to a different functional area: calculating area, calculating volume, and displaying a calculation summary. We’ll name our view controller classes and corresponding XIB files based on the following functions:

• AreaViewController/AreaView.xib

• VolumeViewController/VolumeView.xib

• SummaryViewController/SummaryView.xib

Add the three new view controller classes (UIViewController) to the project. Make sure that you’ve chosen to also add the XIB files for the new controllers.

Rename the newly created XIB files that will contain the view layouts to AreaView, VolumeView, and SummaryView. This will finish our initial setup for the view controller classes and XIBs, but we still need a tab bar controller object and instances of the three view controllers that will be managed by the tab bar.

Preparing the Application Delegate for the Tab Bar Controller

Open the TabbedCalculationAppDelegate.h header in Xcode. Within the @interface directive, include an instance variable (tabBarController) and IBOutlet for a tab bar controller (UITabBarController), as well as a declaration that we will conform to the UITabBarControllerDelegate protocol. (All the methods in this protocol are optional, meaning that we can have a fully functional tab bar without doing any additional coding!) Finally, declare tabBarController as a property. The final header should resemble Listing 1.

Listing 1

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

Next, open TabbedCalculationAppDelegate.m, and add the @synthesize directive for tabBarController to prepare our getters/setters for the property:

@synthesize tabBarController;

Update the application:DidFinishLaunchingWithOptions method to add the view of the tabBarViewController instance to the window:

- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

    // Override point for customization after application launch
    [window addSubview:tabBarController.view];
    [window makeKeyAndVisible];

    return YES;
}

Finally, make sure the tab bar controller is released in the dealloc method:

- (void)dealloc {
    [tabBarController release];
    [window release];
    [super dealloc];
}

This completes all the code additions that we need to make a tab bar controller function and switch views! Our next step is to instantiate an instance of the controller in the MainWindow.xib file along with the view controllers it will manage.

Adding a Tab Bar Controller

Open the MainWindow.xib file in Interface Builder. Because we started with a window-based application, the file should be looking a bit sparse. We can fix that pretty quickly! Open the Library (Tools, Library) and drag a tab bar controller (UITabBarController) into the Document window.

Before doing anything else, Control-drag from the Tabbed Calculation App Delegate icon to the new tab bar controller. Connect the controller instance to the tabBarController outlet, as demonstrated in Figure 2.

Figure 2. Connect the controller to its outlet.

Now, double-click the tab bar controller in the Document window to preview what we’re creating, and then expand the controller and the objects it contains. As you can see in Figure 2, Apple provides us with an initial setup for the tab bar controller. Nested in the controller is the tab bar itself (UITabBar), within which are two view controllers (UIViewController) and, within them, are Tab Bar Items (UITabBarItem). In our project, we need a total of three view controllers: one for the area calculator, another for the volume calculations, and a third for a simple summary. In other words, the default controller is one view short from the three we need.

Adding New View Controllers and Tab Bar Items

There are two ways we can add a new view controller to the tab bar controller. We could drag a new view controller into the tab bar instance—this will automatically create the nested tab bar item—or, we can use the Attributes Inspector for the tab bar controller object. The Attributes Inspector is my preferred approach, so that’s what we’ll use here. Select the Tab Bar Controller icon in the Document window, and then press Command+1 to open the Attributes Inspector.

The inspector shows the different view controllers that are controlled by the tab bar, along with the titles of the individual tab bar items. To add a new controller (paired with a tab bar item), click the plus icon below the View Controllers list. This will create the third view controller instance that we need for the project. Now double-click the titles of each of the three view controllers and name them Area, Volume, and Summary, as shown in Figure 3.

Figure 3. You can add additional view controller instances along with tab bar items in the Attributes Inspector.

Adding Tab Bar Item Images

Looking at the preview of the tab bar, you can tell that something is missing: images. Each tab bar item can have an image that is displayed along with a title. The images are 32×32 points or smaller and are automatically styled by the iPhone to appear in a monochromatic color scheme (regardless of what you choose). Simple line drawings turn out the best when creating your interface art.

For this project, there are three tab bar images included in the project’s Images folder: Area.png, Volume.png, and Summary.png. Open Xcode and drag these files to the Resources folder for your project.

Switching back to Interface Builder and MainWindow.xib, use the Document window to drill down to the individual tab bar items. Select the first item, titled Area, and open the Attributes Inspector (Command+1). Use the Image drop-down to choose Area.png.

Repeat this step for the last two tab bar items, setting their images to Volume.png and Summary.png. As the images are set, the preview should update to show the new interface. If all is going according to plan, your display should resemble Figure 4.

Figure 4. Your finished tab bar should have three buttons, complete with images.

Did you Know?

Within the tab bar item Attributes Inspector, there is an Identifier drop-down menu. This menu can be used to configure the tab bar item to one of several different standard types, such as Favorites or History. This will automatically set the title and a default image for the item.