XCode4: UITabBarController with UINavigationController using Interface Builder

If this helped you, please consider downloading my FREE iPhone app "Hydrate Yourself"and leaving a review.


There are a whole bunch of tutorials to create a Navigation Controller inside a TabBarController with XCode3.  But there are a number of small changes in XCode4 which can trip up someone not familiar with them.  So this guide is essentially an updated version of those other guides, designed to create the same simple demo using the new tool.

1. Create a new Project
We are going to start with a Tab Bar Application, so go ahead and create a new project as usual. I'm calling mine Navigation Tab Bar.

1. Create new project

2. Select the Tab Bar
Click MainWindow.xib and you should see the integrated Interface Builder. On the left is a section called Objects, select the Tab Bar Controller.

2. Select Tab Bar

3. Add the Navigation Controller
On the right side of your screen click the Utilities box. This is new in XCode4 and should look familiar if you've been using XCode3. At the bottom find the Navigation Controller and drag it into the Tab Bar in the middle of your screen.

3. Expand Utility View and Add Navigation Controller


3b. Navigation Controller Added
Here you can see I added it as the middle Tab
4. Configure new tab
Back in the Objects section you can now expand the Navigation Controller and select the View Controller object. Now on the right side you can select the Identity Inspector at the top and put in your UIViewController's class name. For the purpose of this demo I am calling it "YourNewViewController" which we will make at the end.

4. Expand new Navigation Controller select identity inspector and fill in new View Controller name

Once that is done switch to the Attribute Inspector and put in the name of your XIB file in the NIB Name section. Note: do not add the .xib extension, this will cause a runtime crash.

4b. Switch to Attribute Inspector and Fill in the nib name

5. Create the new UI View Controller
This is probably familiar to you already, create file from the File menu and select a UIViewController subclass.

5. Create new UIViewController


5b. With XIB
Be sure to select With XIB for user interface


5c. Use the same file name as before
Use the same file name as you used before.

6. Add an IBAction
We will be adding a button to push a view onto the navigation controller.  Open up the header file and add an action.

8. Add an IBAction for our button
I just added the buttonPushView line

Switch to the implementation file and add another few lines for a simple call to pushViewController.

9. Tell the navigationController to push a new View Controller
This is the simplest pushViewController line I could come up with

7. Add a button
Select YourNewViewController.xib in the file menu. Adding a button is a simple matter of dragging/dropping from the bottom right Objects section.

Next you link the button to the new IBAction by right clicking the button and dragging the arrow to File's Owner, in the Placeholders section. Select buttonPushView.

10. In the new XIB file drag in a button and link to the IBAction

8. You're done!
All thats left now is the build and run (Command-R).  Select the second tab to see your new Navigation Controller and click the button to see it in action.

8. Build and run the simulator. Press the button in the second bar item to try it out      8b. It works