Tab Bar Controller Tutorial

In this tutorial, you will learn how to create applications with a Tab Bar Controller. Tab Bar Controllers can be seen in iPhone/iPod Touch applications like the Clock.In this tutorial, you will learn how to create applications with a Tab Bar Controller. Tab Bar Controllers can be seen in iPhone/iPod Touch applications like the Clock.

In this tutorial, you will learn to

1. Create a Tab Bar Controller
2. Adding a view
   
3. Adding the Tab Bar Controller to the Window
   

Create a Tab Bar Controller
Create a new project by selecting Window-Based Application. Open the Interface Builder by double clicking the MainWindow.xib file and add a Tab Bar Controller from the Library. What you see is a Tab Bar Controller with two Bar Items created for us.

A Tab Bar Item acts as a button by which we switch among different views. As we can see a Tab Bar Item can have a title and a image associated to it. Double click Item 1 and in the attributes builder we can set the title and image for the tab bar item.

To add a image to the project is very simple, select Xcode and click on Project -> Add to Project and select a image. You will see that the image is seen in Xcode.

Organizing Files
It is however not a good practice to store files anywhere. To overcome this problem we can either add a folder to the project or simple create a group to store our images. Create a group does not create a folder in the file system but creates a logical view in Xcode.

Note: This tutorial will not be setting any images to the Tab Bar Items.

Adding View to the Tab Bar Controller.
Adding a view is very simple, drag and drop the view from the library to the place holder where it says View (above the tab bar items). You can add another view by clicking View Two Tab Bar Item.

Select View One and add a text field and a label. Select the text field and set its placeholder to say "Enter Name", Type is Name Phone Pad and Return Key as Done. Make sure that "Clear Context Before Drawing" is checked for the text field and the label.

Select View Two and add a label and change its text to View Two.

Adding the Tab Bar Controller to the Window.
Now all we have to do is add the tab bar controller to the window. To do this, we need to create a connection from the tab bar controller to the Tab Bar Controller App Delegate. Create an instance variable of type UITabBarController and mark it with IBOutlet so it shows up in the Interface Builder.

In the applicationDidFinishLaunching method, we need to add the tab bar controller as a sub view to the existing window. Your method should look like the following below.

Now open Interface Builder and Select Tab Bar Controller App Delegate and open the connections inspector. Create a connection from the tabBarController variable to the Tab Bar Controller. In Xcode click on Build and Go to see the application running. Clicking on View One and View Two will change the view, notice that we did not have to write this functionality but the Tab Bar Controller makes it possible.

In most iPhone application there is no done/save button and we still need to close the text editor when the user is done typing.

To do this we need to create a connection between the controls defined on view one and the objects created in our application delegate.

To learn how to create connections between the controls and the objects, read about it in my First iPhone Tutorial.

Since we declared our instance variables/properties in the delegate file, the objects in the Interface Builder will be present in the TabBarController App Delegate file and not in the File's Owner proxy object. Create appropriate connections and also make a connection from the text field delegate to the TabBarControllerTutorial App Delegate. Implement the textFieldShouldReturn method and one line in there to update the label.

Now you know how to create an application with a TabBarController. Click here to download the source code. Please don't forget to leave a comment.

My next tutorial will show you how to use the Navigation Controller.