Create a TabBarController

The UITabBarController class implements a specialized view controller that manages a radio-style selection interface. This tab bar interface displays tabs at the bottom of the window for selecting between the different modes and for displaying the views for that mode. Each tab of a tab bar controller interface is associated with a custom view controller. When the user selects a specific tab, the tab bar controller displays the root view of the corresponding view controller. In this tutorial we create 2 Tabbar Items to display the custom view controllers.

Create a new Project. Select the Empty View Application. Name the project TabBarControllerDemo. Check the Use Automatic Reference Counting. Build for the Iphone Device. This project is created with Xcode 4.5 and built for iOS 6.

First we create 2 custom View Controllers. Create a new file,  choose Objective-C class. Name the class FirstViewcontroller and make this a subclass of UIViewController. Create another file, do the same and name this SecondViewController.

Let's put a label onto the view. In FirstViewController.m in the initWithNibName:bundle method inside the if (self) block enter the following code.


UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(self.view.frame.size.width/2, self.view.frame.size.height/2, 180, 20)]; 
label.text = @"First ViewController"; =;

[self.view addSubview:label];

Do the same in SecondViewController.m except the label.text becomes @"Second ViewController"

Go to Appdelegate.h. Create a property of type UITabBarController.

@property (nonatomic, strong) UITabBarController *tabBarController;

in AppDelegate.m import the header files of the viewcontrollers

#import "FirstViewController.h" 
#import "SecondViewController"

In AppDelegate.m in application:didFinishLaunchingWithOptions before the [self.window makeKeyAndVisible]; line initialize the tabbarcontroller and the viewcontrollers.

self.tabBarController = [[UITabBarController alloc] init];
FirstViewController *vc1 = [FirstViewController alloc] init];
SecondViewController *vc2 = [[SecondViewController alloc] init];

Create an array of viewcontrollers and assign this to the viewcontrollers property of the tabbarcontroller

NSArray *controllers = @[vc1, vc2];
self.tabBarController.viewControllers = controllers;

Point the tabbarcontroller to the rootviewcontroller and add the tabbarcontroller to the window.

self.window.rootViewcontroller = self.tabbarController; 
[window addSubview:tabBarController.view];

Build and Run, switch between tabs to change the displayed viewcontroller.

As you can see, right now the tabs are empty. Let's fix that and assign a image and a name to the tabs. Download the images and move them to the current project. In FirstViewController.m in the initWithNibName:bundle method inside the if (self) block enter the following code.


UIImage *image = [UIImage imageNamed:@"smile.png"];
UITabBarItem *item = [[UITabBarItem alloc] initWithTitle:@"One" image:image tag:0];

self.tabBarItem = item;

Repeat this for SecondViewController.m.

UIImage *image = [UIImage imageNamed:@"smile_sad.png"];
UITabBarItem *item = [[UITabBarItem alloc] initWithTitle:@"Two" image:image tag:0];

self.tabBarItem = item;

Build and Run, now the tabs have a name and a image inside them.