iPhone Tab Bar Tutorial

Tab Bars are very common in iPhone apps, and for good reason. They allow the users to quickly go to a different View without navigating through a menu or list. Each tab best serve as a major section of the current View level. We are going to to create a Tab Bar application by using the Tab Bar template in Xcode.

1. Start a new project and select the Tab Bar Application template. Click Choose. On the next dialog enter a name for your application, BasicTabBar. This is already a working program with 2 functional tabs. Run it and see.

2. Now we are going to add a new tab. First we open MainWindow.xib. This is where the Tab Bar is residing and where we can add a new Tab Bar item. From the Library select Tab Bar Item and drag it to the Tab Bar on MainWindow, drop it. You should see a new tab bar appear.

3. We are going to create a View to go along with this Tab Bar item. In Interface Builder under File > New select View. Save the file as ThirdView and make sure it is in the same directory as your project. You will be shown a dialog to include the file as part of the project as well.

4. Going back to your MainWindow.xib click on the newly added Tab Bar item. Go to the attributes inspector and select ThirdView as the NiB.

5. You need to connect up ThirdView's view to file's owner. Do it in Interface Builder.

You can now compile and run your application. Note that at this point all three Views are associated with FirstViewController. You normally would want a ViewController for each View. So next we are going to add a ThirdViewController class and associated ThirdView with it.

6.Right click on Classes and choose Add > New File. You will be presented with a New File dialog.
Select the UIController Class template. Uncheck the Create XIB file (as we already have it!)
Cick Next
On the next page, name the file, ThirdViewController. Ensure the Also Create "ThirdViewController.h" is checked
Click Finish.

7. Open ThirdView.xib in Interface Builder. Select File's Owner and under its identity inspector choose ThirdViewController. You may need to do a search.

8. Close ThirdView.xib and open MainWindow.xib. Under the view on the third tab select ThirdViewController in the identity inspector.

9. Set up a UILabel ivar in ThirdViewController and connect it with a label in ThirdView.xib in Interface Builder. Set the value of the label from the ViewDidLoad method of ThirdViewController to test it.

That's it! you are done.