A Tabbed Application from Scratch for iPhone

Even though Xcode provides a template for building a tabbed application, we often want to start from scratch when building a tabbed app. So let’s see how it’s done.

Start Xcode, select “Create a new Xcode project,” and click Next. Choose the Empty Application template, click Next, and name the project TabBar. Select options as shown here:

Click Next, choose a location to save the project, and click Create.

Once the project has been created, add two images to the project using any available drawing software. I’ve created these images using Gimp (a free vector drawing application). These images should be 30 x 30 pixels, and for best effect should be drawn in black on a transparent background. You can either create your own or use these:

When you save these images, rename them first.png and second.png. If you are using some other format than .png for your images, make sure to adjust the extension in the code.

Add two new UIViewController classes to the project by selecting File | New > File… Name them FirstViewController and SecondViewController; make sure that they both are subclasses of UIViewController, and allow .xib files to be created for both as shown:

Open the .xib files for these view controllers, and drag a UINavigationBar to the top of each. Title the first bar “First View” and the second “Second View.” This step is not strictly necessary, but will give a nice title to each of our view controllers.

Now open the AppDelegate.h file, and add two properties for the view controllers, as well as one for the UITabBarController as shown:


#import <uikit/UIKit.h>
#import "FirstViewController.h"
#import "SecondViewController.h"

@interface AppDelegate : UIResponder <uiapplicationDelegate>

@property (strong, nonatomic) UIWindow *window;
@property (strong, nonatomic) UITabBarController *tabBarController;
@property (strong, nonatomic) FirstViewController *firstViewController;
@property (strong, nonatomic) SecondViewController *secondViewController;




All the set up for the application will be done in the AppDelegate.m file, in the application: didFinishLaunchingWithOptions: method. Here is the listing:


#import "AppDelegate.h"

@implementation AppDelegate

@synthesize window = _window;
@synthesize tabBarController = _tabBarController;
@synthesize firstViewController = _firstViewController;
@synthesize secondViewController = _secondViewController;

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
// Override point for customization after application launch.

// instantiate the view controllers:
self.firstViewController = [[FirstViewController alloc] initWithNibName:nil bundle:nil];
self.secondViewController = [[SecondViewController alloc] initWithNibName:nil bundle:nil];

// set the titles for the view controllers:
self.firstViewController.title = @"First";
self.secondViewController.title = @"Second";

// set the images to appear in the tab bar:
self.firstViewController.tabBarItem.image = [UIImage imageNamed:@"first.png"];
self.secondViewController.tabBarItem.image = [UIImage imageNamed:@"second.png"];

// instantiate the tab bar controller:
self.tabBarController = [[UITabBarController alloc] init];

// set the tab bar's view controllers array:
self.tabBarController.viewControllers = [NSArray arrayWithObjects:

// add the tab bar to the application window as a subview:
[self.window addSubview:self.tabBarController.view];

// make the application window key and visible:
[self.window makeKeyAndVisible];
return YES;



After synthesizing the properties we just created, we first instantiate the two view controllers, each with a nib name of nil (meaning to use the .xib file we created for each controller), and a bundle of nil (meaning to use this application’s bundle). A title is set for each view controller; this title will appear in the tab (in the tab bar) for each controller. Next, we set the image for each controller as it will appear on the tab bar. These are the images we created earlier; make sure that they have been added to the project.

Now that the view controllers are instantiated, with titles and images for each, we need a tab bar controller to put them on. We instantiate one, then add the view controllers to the UITabBarController’s viewControllers array, using the class method arrayWithObjects (from NSArray). Finally, we add the tab bar’s view to the main application window as a subview and make the main window key and visible.

Here is the application running:

Notice that iOS has taken the black on transparent images we provided and applied color to them in a stylistic manner.

UITabBarController should always be used as the top level controller for an application. A view controller inside a tab bar can be of any type, even a navigation controller. But we should not place a tab bar controller inside a navigation controller. This is because tab bars are meant to be on the screen (for access by the user) throughout the life of the application.

Leave a Comment: