Matt Galloway

My home on the 'net.

View Controller Hierarchy in IB

I have seen in many places that people have tried to create a tab bar based application where each tab has a navigation controller on it. This is quite hard to see how to do in Interface Builder (IB), but hopefully this quick guide will shed some light on how I overcame the problem. I will also try to explain a key concept which helped me understand how building a controller hierarchy in IB relates to doing it the programatic way.

First, if you start from a “Tab Bar Application” template from XCode and open the MainWindow.xib file which is created then you will see 5 items – “File’s Owner” and “First Responder” are the usual objects in any XIB, “App Delegate” is the application delegate, “Window” is the generic window object and “Tab Bar Controller” is the view controller which is going to do all of our work. At this point it is worth changing the view mode of IB to the list view which is the second in the block of 3 (see below).

View Mode

Setting this view mode helps with seeing exactly what is going on behind each view controller. For instance, if you click the arrow next to the tab bar controller then you will see that 3 items appear – 1 tab bar and 2 view controllers. If you now select the tab bar controller itself and go to the Attributes Inspector (Apple-1) then under “View Controllers” you can change the class of the two view controllers. In this case, change them to navigation controllers.

Now go back to the main IB window and click the arrow next to the first “Navigation Controller” then you will see 3 items appear – 1 navigation bar, 1 view controller and 1 tab bar item. We are interested in the view controller. If you click on this then you can change the NIB which this loads from. Then you can do the same for the second navigation controller.

You should end up with something like the following:

View Hierarchy Demonstration

Notice that the hierarchy defined in IB is the hierarchy which you would devise programatically, but using IB you can quickly and easily see what things look like such as icons on the tab bar buttons.

I hope this helps people! Feel free to post comments and I will try to answer any questions.