Tab Bars and Navigation Controllers in Interface Builder

I often hear questions about using navigation controllers (UINavigationController) and tab controllers (UITabBarController) in the same app. Xcode has a project template for a “Navigation-based Application” which uses a UITableViewController under a navigation controller and for a “Tab Bar application” that creates a tab bar with two regular UIViewControllers that you can switch between. There is no template that creates a tab bar application with navigation based tabs like the iPod app.

This is a gist of the technique explained in this video or here


It is not too difficult to do in code but if you are using IB there is one little trick you need to know. Starting with a tab bar application. Bring up the MainWindow.xib in Interface Builder. Switch to the tree view mode. Twirl down the triangle next to the tab bar triangle and there is our first view controller.

All we need to do is drag out a navigation controller and put it under the tab bar controller. For a split second we’ll have three tabs.

We can drag the first view controller and place it under the navigation controller. We can drop it right on the UIView controller.

The Tab Bar Item has changed so we can just drag out the old one if we want so that the tab bar still says first instead of item.

Now when we build and run we’ll be able to push new view controllers with the navigation controller we added. The source code is attached below.