Tutorial for iPhone app with UITabBarController and UINavigationController

I looked around the Apple iPhone developer site and there are absolutely no sample code for an iPhone application that uses Tab Bar (UITabBarController) and Navigation Bar (UINavigationController) combined. There are lots of sample code that uses one or the other and mentions that you should put a Navigation Controller inside a Tab Bar Controller but not the other way around. However, I just cannot find any sample code to do so.  So I set off to create one and share it.  As it turns out, you can do all of these with Interface Builder and not need to write a single line of code!

Step 1: Create a new Xcode Project

Select File > New Project… from the Xcode menu.  Select Tab Bar Application from the New Project dialog and give the new project a name, e.g. TabNav.

Create a new Xcode Project

Step 2: Edit MainWindow.xib

Open the Resources folder under Groups & Files and double click on MainWindow.xib. This launches the Interface Builder.

The default Tab Bar Application template does not specify that you will be using a UINavigationController for either of the tabs.  We are going to make that change here.

From Interface Builder’s Tools menu, bring up the Inspector palette. Select the Tab Bar Controller from the MainWindow.xib window.

Select the first tab (Attributes) from the Inspector palette to view the attributes of the Tab Bar Controller.

Change the First View Controller from View Controller to Navigation Controller using the Class menu.

Step 3: Create FirstView.xib

Now we need to create the NIB file for the view that goes into the First Tab. From Xcode File menu, select New File.  Select User Interfaces under iPhone OS on the left hand side.  On the right, select View XIB and click Next.

Name the new XIB file FirstView.xib and click Finish.

Double click the newly created FirstView.xib to launch into Interface Builder.

From Interface Builder, select File’s Owner from FirstView.xib and use the Inspector to change the Class to FirstViewController.

Change to the Connections tab on the Inspector and connect the view Outlet to point to the View in FirstView.xib.

Drag and Draw line from view bubble to View in FirstView.xib

Then dress up the View by setting up the Simulated Metrics through the Inspector’s Attributes tab and also add a simple control such as a UI Label and a UIButton to the View in FirstView.xib.

Step 4: Finish set up of MainWindow.xib

Bring up MainWindow.xib in Interface Builder again. Change the NIB Name for the first view’s View Controller to use FirstView.

Step 5: Build and Run

Back to Xcode and click on the Build and Go button on the toolbar. Voila!  You now see the First tab with a “For a good time: Click Me!” user interface with a Navigation bar without even writing a single line of code.

Completed iPhone app with UITabBarController and UINavigationController

To complete the FirstView Navigation UI, you have to write real code into FirstViewController.m.  Go have fun!

Advertisements