This tutorial will show you the basics of using the UITabBar and UITabBarItem controls when programming for the iPhone.

I will be showing you step by step in the video how to create a project from a UITabBar template and add additional UITabBarItems as well as additonal views to be displayed with these items.  Here is a brief explanation of each step:

1. Create a new project from a UITabBar template

This is pretty straight forward.  We will be using Apple’s default UITabBar template to start our project.  This is a fully functioning app.  You can click Build and Go to see it run.

2. Open Interface Builder (click on mainWindow.xib) and Add addtional UITabBar items

To add additonal UITabBarItems, you simply drag them from the library on to the UITabBar.  For each new item, you must specify the name of the view that will be shown when the item is clicked.  This is done by clicking on the tab bar item and clicking Tools -> attributes inspector.  There should be a box titled “Nib Name”.  Whatever you enter here will be the name of the view that will be loaded when this tab is clicked.

So for this tutorial, we entered ThirdView.  So, naturally when we created our view to be loaded here, we saved it as “ThirdView.xib”.  This is one Gotcha when working with these components.

3. Changing the text of the UITabBarItems

This is took me a while to figure out.  To change the text, image, or style of the UITabBarItem, double click on it.  You should now be able to access these settings in the Attributes Inspector.

4. Set the Background Color For Views 1 and 2

This was pretty easy.  For the first view, we simply clicked on it and clicked the box next to “Background” in the Attributes Inspector.  Next, we did the same to the secondView by opening up SecondView.xib in Interface Builder.

5. Create ThirdView

We need to create the third view to be loaded when the user clicks on the UITabBarItem that we inserted.  This was done inside of Interface Builder by clicking File -> new and selecting View. The next thing we did was drag a label from the library and add it to the view.  Finally, we set the background color like we did in the other views.