www.invasivecode.com

In a previous post, I show how to build a navigation-based iPhone app using Interface Builder starting from a window-based project. Here, I repeat it for a tabbar-based application.

As in the previous case, the idea is to build a simple tab bar application with only 3 tabs. Each tab is going to be associated to a view controller.

So, launch Xcode and create a new window-based iPhone project (make sure that the option “Use Core Data for storage” is unchecked). Name the project MyTabBar. Edit the MyTabBarDelegate.h file in the following way

1
2
3
4
5
6
7
8
9
10
11
12
#import <UIKit/UIKit.h>



@interface MyTabBarAppDelegate : NSObject <UIApplicationDelegate> 

{

    UIWindow *window;

    UITabBarController *tabBarController;   // 1

}



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

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



@end

In line 1, I declare a new outlet tabBarController that will be connected in Interface Builder with a UITabBarController object I will add later. Then, I create a new property (line 2) for the added outlet. Now, save this file and switch to the class implementation (MyTabBarDelegate.m). Edit this file in the following way

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#import "MyTabBarAppDelegate.h"



@implementation MyTabBarAppDelegate



@synthesize window;

@synthesize tabBarController; // 1



- (void)applicationDidFinishLaunching:(UIApplication *)application 

{    

    [window addSubview:tabBarController.view]; // 2

    [window makeKeyAndVisible];

}



- (void)dealloc 

{

    [tabBarController release]; // 3

    [window release];

    [super dealloc];

}



@end

First, in line 1, I synthesize the previously added property. Then, I release the property in the dealloc method (line 3), because of its retain attribute and finally, I add the tabBrController’s view to the main window (line 2). Save this file.

Now, open the MainWindow.xib file. Drag from the library a UITabBarController object and drop it to the MainWindow.xib window. You should end up with this:

Then, connect the My Tab Bar App Delegate tabBarController outlet to the Tab Bar Controller object (right-click the My Tab Bar Delegate and drag a line from the tabBarController outlet to the Tab Bar Controller object). This is shown in the following figure.

Double-clicking the Tab Bar Controller object, a new window as the following appears:

Since we want to have 3 view controllers, we need to add a new tab. Hence, select a TabBarItem (UITabBarItem) from the IB Library and drag and drop it to the Tab Bar Controller window in correspondence of the tab bar. After doing that you should have 3 tabs in the bar, as in the following figure:

Before going on, I want to point out something important. Select the Tab Bar Controller object in the MainWindow.xib window. Then, open the Inspector and select the Attributes panel. There, you find the list of view controllers associated for each tab with their respective titles and classes. Click on one of the view controller class. In the pop-up menu, you find the different view controller types you can have for each tab. So, if you need a navigation controller, you need to define it here. Then, you can build a navigation controller stack as we did last time.

Another important things is the following. If you click any of the tab of the previous figure, the Inspector shows the view controller properties. If you click again on the same tab, you get the tab properties. Here, you can change the tab title, the icon, and much more. If you click between 2 tabs, the full bar is selected and you can change its properties.

Now, save and quit IB. Go back to Xcode and Build & Run. You get a white window with a tab bar. Nothing interesting. Now, we need to add the 3 view controllers.

I do it for just one of them. You simply repeat these steps for the other two view controllers.

1. In the Groups & Files, right-click on the Classes folder and choose Add -> New Files…
2. In the Cocoa Touch Class group, select the UIViewController subclass. Check the “With XIB for user interface” and uncheck “UITableViewController subclass”. Press Next.
3. Name it “FirstViewController” (you will name the other view controllers as SecondViewController and ThirdViewController). Be sure that “Also create FirstViewController” is checked. Press Finish.
4. Open the FirstViewController.xib and change the background color of View window to any color (to make it easier, we do this to distinguish the 3 view controllers).

Repeat the previous step and assign a different color for the second and the third view controllers.

Done that, we need to associate each tab to a view controller. To do so, open the MainWindow.xib file and click on the first tab (to make sure that you are selecting the view controller, after clicking on the tab, click inside the window). In the Inspector, select the Attributes pane and choose as NIB Name “FirstViewController”. Then, go to the Identity Inspector and choose the FirstViewController as class name. Repeat these steps for the second and third view controllers.

When done, save and quit IB. Finally, build and run.

I attach the project here.

Keep coding,

Geppy