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!
May 2, 2009 at 7:04 pm |
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?
May 2, 2009 at 8:41 pm |
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.
August 1, 2009 at 12:13 pm |
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.
September 9, 2009 at 4:13 pm |
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?
September 9, 2009 at 9:51 pm |
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.
September 10, 2009 at 8:27 am |
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 :-)
September 10, 2009 at 8:58 pm |
I will likely update this tutorial at some point, but not right now. Sorry…
February 3, 2010 at 10:38 pm |
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.
February 3, 2010 at 11:04 pm |
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.
February 4, 2010 at 8:05 am |
just curious, is the article updated now?
February 5, 2010 at 7:08 am |
No, the tutorial is still based on SDK 2.2. I should really update it to SDK 3.2…
February 7, 2010 at 10:26 am |
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.
March 1, 2010 at 9:50 am |
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.
April 23, 2010 at 5:33 am |
Hi Friend,
Thanks for the Tutorial.
June 23, 2010 at 4:22 pm |
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.
July 5, 2010 at 11:32 pm |
great tutorial man.. keep it coming.
September 28, 2010 at 6:46 pm |
Thank you. I’ve been looking for this.
November 8, 2010 at 8:57 am |
Thanks for this. Great tutorial.
November 12, 2010 at 10:36 pm |
hi
i am new to this. i want to add a transition effect between views in uitabbarcontroller. how to do this …
December 24, 2010 at 8:28 pm |
Is a step missing? When I build and go the first tab doesn’t load firstview.
March 19, 2011 at 6:09 am |
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.
March 20, 2011 at 2:32 pm |
Great tutorial. Thanks for the help!
June 12, 2011 at 2:27 pm |
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
July 26, 2011 at 10:50 am |
Someone stole your blog entry and posted it at
http://www.xcode-tutorials.com/uitabbarcontroller-and-uinavigationcontroller/
July 26, 2011 at 11:06 am |
Thanks! I’ll leave a little friendly note with the plagiarizer :)
August 23, 2011 at 12:14 pm |
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
December 24, 2011 at 5:29 am |
Nice tutorial :)