Navigation Controllers

The most common way to work with multiple view controllers is to use a navigation controller—a view controller that manages a stack of child view controllers. This UINavigationController will become the new point of entry to the storyboard. Our current RootViewController is the the first thing it shows. Then we’ll add more view controllers, and the navigation controller will keep track of which one we’re looking at and how to go back to earlier ones in the stack.

We won’t have to write a new class for this, as the UINavigationController is meant to be used as is and is seldom subclassed.

Actually, we don’t need to write code at all to use a navigation controller; we can do everything in the storyboard. In fact, the best thing about the storyboard is how it visualizes complex navigation schemes. Ours will be pretty simple, but it’s nice to know we can grow.

Switch to the storyboard and then locate the Navigation Controller icon in the Object library; it looks like a yellow circle with a blue back arrow in it.

Drag this into the storyboard. During the drag, it will appear as two views connected by an arrow. Drop it close to the existing view controller, but above it. Once you’ve dropped the icon, the storyboard will have three scenes and three view controllers with their attached views: our original root view controller, a navigation controller, and a table view controller, as shown in the following figure. Note that we’ve zoomed out to get all three scenes on screen at once, although all we can do at this zoom level is move scenes around, not edit their views.

Run the app now and…nothing’s different! That’s because there’s no way in the storyboard to reach the navigation controller or its child view controller. We can change that by selecting the navigation controller—either in the scene list or from the yellow ball in the bar under its view—and bringing up its Attributes Inspector (⌥⌘4). Find the Is Initial View Controller check box and select it. In the storyboard graph, the arrow that went into our root view controller now goes into the navigation controller.

Run again and…now our tweets are gone, replaced by a table with the title Root View Controller. What we’re seeing is that the app now enters via the navigation controller, which in turn shows its first (root) child controller, which is the empty table view controller that Xcode gave us when we dragged in the navigation controller. But we don’t want this controller: all our custom table cell work is back in our old view controller.

What we need to do is to tell the navigation controller to use our old view controller as its root view controller. Notice that in the scene list, the last entry in the Navigation Controller scene is Relationship “Root View Controller.” That needs to change. Control-click on the navigation controller, or bring up its Connections Inspector (⌥⌘6). Under Triggered Segues, there’s a connection called Root View Controller. Starting from the connection’s circle, begin a drag (which will stretch out a blue line) and drop the connection on our old view controller, as shown in the following figure.

Run again and our app is pretty much back to normal, showing all our tweets as before. The only change is that there’s now a big blank space at the top of the screen. Still, progress!