Creating a Custom Tab Bar Controller

iOS 5 Tutorial: Creating a Custom Tab Bar Controller

I'm currently revamping an iPhone app that I made for the New Student Orientation Program at Columbia University. The app has this beautiful custom tab bar that my friend designed and so I am re-implementing it for iOS 5.

I literally just spent the last three hours figuring out how to do this so hopefully I can save you all time.

Finished Product:

1. Create a New Tabbed Application.

2. Go to the MainStoryboard file and drag and drop three view controllers and connect them to the tab bar controller.

When You're Finished You Should Have Five Views Connected Like This:

Note: Go to the right sidebar and delete the title for each of the toolbar buttons as well. Like this:

3. Because this is a tutorial about creating a custom tab bar, it's not necessary to create custom view controllers so I'm just going to use the auto generated FirstViewController.m file to do all of the work.

Download These Images: here.

My friend made these and so you can just download them and add them to your project. All of the images are 64px x 49px since 320px width / 5 = 64 px, and 49 px high because we thought that looked good.

The dark blue is for when the view is selected and the light blue is for when the view is unselected.

Note: The images were hard to format in Blogger hence the mess.

4. Drag and drop the downloaded images into your project.

 5. Go to the FirstViewController.m file and add the following code below in the viewDidLoad method. The code essentially says that for each tab bar item at the index, when selected set the image to the dark blue image and when the tab bar item is unselected set it to the light blue image.

Data provided by Pastebin.com - Download Raw - See Original

1. - (void)viewDidLoad
2. {
3.     UIImage *selectedImage0 = [UIImage imageNamed:@"HomeDB.png"];
4.     UIImage *unselectedImage0 = [UIImage imageNamed:@"HomeLB.png"];
5.    
6.     UIImage *selectedImage1 = [UIImage imageNamed:@"ScheduleDB.png"];
7.     UIImage *unselectedImage1 = [UIImage imageNamed:@"ScheduleLB.png"];
8.    
9.     UIImage *selectedImage2 = [UIImage imageNamed:@"BuildingsDB.png"];
10.     UIImage *unselectedImage2 = [UIImage imageNamed:@"BuildingsLB.png"];
11.    
12.     UIImage *selectedImage3 = [UIImage imageNamed:@"InformationDB.png"];
13.     UIImage *unselectedImage3 = [UIImage imageNamed:@"InformationLB.png"];
14.    
15.     UIImage *selectedImage4 = [UIImage imageNamed:@"MoreDB.png"];
16.     UIImage *unselectedImage4 = [UIImage imageNamed:@"MoreLB.png"];
17.    
18.     UITabBar *tabBar = self.tabBarController.tabBar;
19.     UITabBarItem *item0 = [tabBar.items objectAtIndex:0];
20.     UITabBarItem *item1 = [tabBar.items objectAtIndex:1];
21.     UITabBarItem *item2 = [tabBar.items objectAtIndex:2];
22.     UITabBarItem *item3 = [tabBar.items objectAtIndex:3];
23.     UITabBarItem *item4 = [tabBar.items objectAtIndex:4];
24.    
25.     [item0 setFinishedSelectedImage:selectedImage0 withFinishedUnselectedImage:unselectedImage0];
26.     [item1 setFinishedSelectedImage:selectedImage1 withFinishedUnselectedImage:unselectedImage1];
27.     [item2 setFinishedSelectedImage:selectedImage2 withFinishedUnselectedImage:unselectedImage2];
28.     [item3 setFinishedSelectedImage:selectedImage3 withFinishedUnselectedImage:unselectedImage3];
29.     [item4 setFinishedSelectedImage:selectedImage4 withFinishedUnselectedImage:unselectedImage4];
30.     [super viewDidLoad];
31.         // Do any additional setup after loading the view, typically from a nib.
32. }
33.  

 6. Build and run and you should be good to go.

Download Project Here: here.