UITabBar iPhone Tutorial

[ Javascript required to view QuickTime movie, please turn it on and refresh this page ]

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.

Be sure when you save this view, you name it ThirdView.xib (this corrisponds the name that we put in the “Nib Name” box in step 2).  Also, be sure to save this view in your projects folder (sometimes Interface Builder does not navigate here by default).

6. Connecting ThirdView to the ViewController

In this step we connect the ThirdView to our FirstViewController.  Notice that all of the views get connected to this view controller.  This will handle all of the UI components put on to each view. *Note: this step can’t be done until ThirdView is saved and added to the project.

So to connect this view to FirstViewController, simply click on the File’s Owner object and select FirstViewController from the drop-down in the Identity Inspector.

The last thing we need to do is connect the view.  So control-click from File’s Owner and drag the line to the View object. The word “View” should pop up.  Click on it and the views are now connected.

That should be it! Click Build and Go and you are done.

Well, I hope you guys have enjoyed the video tutorial.  I know that the audio is kind of low.  This is because I used my computer’s built in microphone and it’s not the greatest.  I have since purchased a new microphone (thanks again to all who have donated thus far) and future tutorials will have much better audio quality.  I would LOVE to hear your feedback on the videos.  I’m a total noob when it comes to screencasts and would love your constructive criticism.  Thank you all and Happy iCoding!

Download  the source code for this tutorial here