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

Create a new Xcode Project

002 - New TabNav project created

Step 2: Edit MainWindow.xib

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

003 - Groups & Files > Resources > MainWindow.xib

004a

004b - Preview of MainWindow.xib

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.

005a - Open up the Tab Bar Controller

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

005b - Inspector, select leftmost tab (Attributes)

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

005c - Change to Navigation Controller

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.

006 - Create FirstView.xib

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

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

007 - Double click on the newly created FirstView.xib

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

008 - Set File's Owner to Class 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

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.

010 - Dress up with Simulated Metrics...

011 - Then add a label and a button

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.

012 - Set up the Left Tab to use FirstView.xib

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

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!

About these ads

27 Responses to “Tutorial for iPhone app with UITabBarController and UINavigationController”

  1. sieversjr Says:

    Your tutorial is very good but I have a question.

    Since the tab bar controller has a series of Navigation Controllers defined, say if I wish to add a Navigation Bar button and when pressed, it needs to push an allocated viewcontroller onto the Navigation Controller for one of the tab bar buttons.

    I am able to add the button, define an (IBAction) func:(id)sender function in the application delegate, hookup up the button and get it to call the handler function however, how do you reference the navigation controller so I can push the view controller from there?

  2. peter_k_lee Says:

    How about sending a message to your AppDelegate? The AppDelegate has access to the TabBarController. It can set the current tab on the TabBarController and also tell the NavigationController of the newly selected tab to push the new ViewController.

    I have not done something like what you described, but that’s how I would approach the problem.

  3. Simon Gray Says:

    how do you add more tab buttons?
    i have the 2 tabs working fine as per the tutorial.

    but i created another 2 tabs along with the new NIB files and added the buttons on the main view, but when i can’t click on them in the simulator and it causes a “terminating due to an uncaught exception” error.

  4. Mario Says:

    thx for the excellent tutoria. I have tested it today with sdk 3.0 on SnowLeo

    the end result doesn’ match you last picture. I have an extra bar on top on he black toolbar. I checked every single settings and they’re all ok. The only thing that I see different is the connection list – you have two items that I don’t have and you haven’t called them out. Any idea if you tutorial works for OS 3.0?

  5. peter_k_lee Says:

    This blog entry was written pre-3.0. I should probably update / refresh it for 3.0. There are some changes in the 3.0 UINavigationController API that may affect the correctness of this tutorial.

  6. Mario Says:

    do you have an idea of where I should look for that?
    I’m assuming you’re not going to update this article anytime soon :-)

  7. peter_k_lee Says:

    I will likely update this tutorial at some point, but not right now. Sorry…

  8. Mujtaba Says:

    Hi very nice article but how do i add a tableview in the navigation controller? i tried doing it but didnt find a way to connect its dataSource and delegate.

    • peter_k_lee Says:

      The UIViewController needs to implement the following two protocols: UITableViewDataSource and UITableViewDelegate. Or if you make your View Controller a subclass of UITableViewController, then these two protocols are already declared. I would advise that you derive your View Controller class from UITableViewController.

      Interface Builder does rather strict type checking, so if your View Controller class does not implement a protocol, you cannot make the connection.

  9. Mario Says:

    just curious, is the article updated now?

  10. Matt Says:

    Hey there

    Great tutorial, got it working fine. Just a quick question. How would I go about using that button for navigation within the application? So you have the tab which switches between views and also the button?

    Would greatly appreciate any feedback on this.

  11. Bobby Says:

    Great tutorial!

    I like to request a continued tutorial that discuss how to code the button so when pressed, it would change to another view (NIB file).

    Any suggestions would be appreciated.

  12. Krishnan Says:

    Hi Friend,

    Thanks for the Tutorial.

  13. Melisa Says:

    Hi Peter, thanks for the tutorial!

    Right now, I’ve having problems integrating a UITabBarController and a UITableView. Hope you’ll post a new tutorial illustrating this combination, preferably using Interface Builder and it’s connections, thanks, greatly appreciate.

  14. dpigera Says:

    great tutorial man.. keep it coming.

  15. Dimiter Says:

    Thank you. I’ve been looking for this.

  16. John Says:

    Thanks for this. Great tutorial.

  17. sri Says:

    hi
    i am new to this. i want to add a transition effect between views in uitabbarcontroller. how to do this …

  18. johmn Says:

    Is a step missing? When I build and go the first tab doesn’t load firstview.

  19. Yagnesh Chawda Says:

    Hi,
    I have just started to learn iPhone based App. I have a doubt about creating a app with following requirements:
    1. First page is say Login page.
    2. Once logged in there will be a page with 5 Tab button on the bottom.
    3. When clicked on any Tab button, I want to show 2-3 screen, which are kind of flow, like navigation, but I dont want to show Navigation bar there.
    4. I also wanna make sure there, there will be no Tab bar visible during some of those flows. Use has to come out of it by completing the flow, out by clicking cancel button in that flow.
    5. What I am confused about is how should I put the Views together to make sure that this can function as I want it to.

  20. Philip Dudley Says:

    Great tutorial. Thanks for the help!

  21. Steve Says:

    Thanks for this. It was very helpful.

    Apple now has an excellent iOS sample code illustrating how to put navigation controllers inside a tab bar interface app:

    http://developer.apple.com/library/ios/samplecode/iPhoneCoreDataRecipes/Introduction/Intro.html#//apple_ref/doc/uid/DTS40008913

    I found that link *after* I finished this tutorial. :-P

  22. Dave Says:

    Someone stole your blog entry and posted it at
    http://www.xcode-tutorials.com/uitabbarcontroller-and-uinavigationcontroller/

  23. keshav Says:

    can we add some more tab bar buttons to the the tab bar??? and can you please let me explain how to hook up the connections in IB in a app having more outlets actions or else give me suggestions , which tutorial i have to follow??//???///
    as i ‘m new in building iphone Apps….

    thanks in advance…..
    from bck.naidu@gmail.com

  24. krazzytech751 Says:

    Nice tutorial :)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Follow

Get every new post delivered to your Inbox.

%d bloggers like this: