UITabBarController

Applications use tab bar controllers to manage multiple distinct interfaces, each of which consists of any number of custom views and view controllers. For many applications the UITabBarController is used to provide all of the views the user sees.

Useful Documentation

iOS Reference

Creating Multi UITabBarController Views Application

Create an App as normal with the main view XIB

Create at least 1 view you will want to display (see Adding A New View below)

Add to #AppDelegate.h

(#AppDelegate_iPhone.h or #AppDelegate_iPad.h for multi version apps, not #AppDelegate_Shared.h)

@interface AppDelegate_iPhone : AppDelegate_Shared
{
	UITabBarController *tabBarController;

In MyApNameAppDelegate.m add:

#import "MyViewAViewController.h"
#import "MyViewBViewController.h"

In MyApNameAppDelegate.m add to didFinishLaunchingWithOptions:

	//----- CREATE THE TAB BAR CONTROLLER -----
	tabBarController = [[UITabBarController alloc] init];
	//[tabBarController release];	//not released

	UIViewController *vc1 = [[MyViewAViewController alloc] init];			//Create view controllers for each view
	UIViewController *vc2 = [[MyViewBViewController alloc] init];

	NSArray *viewControllers = [NSArray arrayWithObjects:vc1, vc2, nil];	//Make an array containing the view controllers
	[vc1 release];
	[vc2 release];

	[tabBarController setViewControllers:viewControllers];					//Attach them to the tab bar controller
	[window addSubview:[tabBarController view]];							//Put the tabBarController's view on the window

	//Show the window
	[self.window makeKeyAndVisible];

In each of the #ViewController.m files

Create the init function to populate the tab bar area for this view

//**************************
//**************************
//********** INIT **********
//**************************
//**************************
-(id)init
{
	[super init];

	//----- SETUP TAB BAR -----
	UITabBarItem *tbi = [self tabBarItem];						//Get the tab bar item
	[tbi setTitle:@"My Label 1"];									//Optional text label
	//UIImage *i = [UIImage imageNamed:@"MyImageFile.png"];		//Create a UIImage from a file in resources folder (drag file in to add to project)
	//[tbi setImage:i];

	return self;
}

Adding A New View

Menu > File > New File > iOS > Cocoa Touch Class > UIViewControllerSubClass

With XIB for user interface = checked

Name it (a good idea to use format #ViewController and add _iPhone or _iPad to the end for multi version apps, for example MySub1ViewController_iPhone.m)

Design the view as required.

To Deal With When View Closes

Add view will disappear method

//*****************************************
//*****************************************
//********** VIEW WILL DISAPPEAR **********
//*****************************************
//*****************************************
- (void)viewWillDisappear:(BOOL)animated
{
	[super viewWillDisappear:animated];

	//Clear first responder (in case any input objects are first responder)
	[SomeTextField1 resignFirstResponder];
	[SomeTextField2 resignFirstResponder];
}

Hide Tab Bar

An example of how to hide the tab bar is shown below in delegate events, however the hidden tab bar leaves a blank white area which there doesn’t seem to be any easy way to utilise.  A simpler solution is simply to display a modal view on top of the main view

Getting Tab Bar Controller Delegate Events

Add this to the AppDelegate.h file

@interface AppDelegate_iPhone : AppDelegate_Shared
			<UITabBarControllerDelegate>	        //-ADD THIS
{
	UITabBarController *tabBarController;

Add this to the AppDelegate.m

//Add when creating the tabBarController
	tabBarController = [[UITabBarController alloc] init];
	//[tabBarController release];	//not released
	[tabBarController setDelegate:self];	    //-ADD THIS

Functions you can add to AppDelegate.m

//**************************************************
//**************************************************
//********** TAB BAR CONTROLLER DELEGATES **********
//**************************************************
//**************************************************

//*********************************************
//***** SHOULD SELECTED VIEW BE PERMITTED *****
//*********************************************
- (BOOL)tabBarController:(UITabBarController *)ptabBarController shouldSelectViewController:(UIViewController *)pviewController
{

	return(YES);
}

//*****************************
//***** VIEW WAS SELECTED *****
//*****************************
- (void)tabBarController:(UITabBarController *)ptabBarController didSelectViewController:(UIViewController *)pviewController
{
	/* This works but the hidden tab bar leaves a blank white area so is just shown for info - simpler solution is simply to display a modal view on top of the main view
	//----- HIDE TAB BAR FOR SPECIFIC VIEWS -----
    if (pviewController == [viewControllers objectAtIndex:1])		//Make viewControllers a global definition for this
    {
		//	UITabBar *tabBar = ptabBarController.tabBar;
		//	tabBar.hidden = YES;

		ptabBarController.tabBar.hidden = YES;
		UIView *mainView = [[viewControllers objectAtIndex:1] view];

		CGRect mainViewFrame = mainView.frame;
		mainViewFrame.size.height += ptabBarController.tabBar.frame.size.height;
		mainViewFrame.origin.y = 0;
		mainView.frame = mainViewFrame;
    }
	*/
}

Tab Bar Images

The documentation says that the tab bar image is usually 30×30 (See apple guide), but often the best size to setup the images is 48×32 pixels. Same size for iPad – it is not possible to change the size of the tab bar.

The image is a PNG with transparency, only the mask is used. The UI renders the mask gray when unselected or blue/chrome when selected.

Causing Another View To Open

//*********************************************
//***** SHOULD SELECTED VIEW BE PERMITTED *****
//*********************************************
- (BOOL)tabBarController:(UITabBarController *)ptabBarController shouldSelectViewController:(UIViewController *)pviewController
{

    if (pviewController == [viewControllers objectAtIndex:2])		//Make viewControllers a global definition for this
    {
        if (SomeTest)
        {
            [ptabBarController setSelectedIndex:3];
            return NO;
        }
    }
    return YES;
}