Navigating Between View Controllers

Now that we have our root view controller managed by a navigation controller, we’re ready to start navigating. Where shall we go? Since our root view shows a table of tweets, let’s allow the user to select one of those tweets to inspect in detail. To do this, we’ll add a new view controller scene to the storyboard, indicate how we navigate to it, and write a custom UIViewController subclass to provide the behavior for the new scene.

We can begin in the storyboard. From the Object library, choose the generic View Controller icon, which looks like the rectangular UIView icon inside a yellow circle, as seen in the figure.

Drag the icon (which turns into a view with the usual title bar underneath) into the storyboard, dropping it to the right of the existing root view controller. Once dropped, it appears as a completely empty view, and when not selected, the title bar above the view simply says View Controller. This view controller has no visible contents and cannot be reached from any other view controller, but we can change that easily enough.

From the Root View Controller scene on the left, select CustomTweetCell, which is the one we customized with the styled labels and the icon. Control-drag from there to the new view controller (either its entry in the scene list or its icon, or its view out on the storyboard; any of these will work). This gesture indicates that you want to create a segue from the cell to the new view controller when the cell is tapped. Optionally, instead of Control-dragging, we can bring up the connections pop-up with a Control-click and drag the Triggered Segues: Selection connection over to the new view controller.

Whichever gesture we use, upon ending the drag, a pop-up menu asks us to clarify what we want the connection to do, as seen in the figure. For a selection segue, we have five main choices: Show, Show Detail, Present Modally, Popover Presentation, or Custom. Choose Show.

Once we do this, two interesting things happen to our new view controller. First, it gets a simulated navigation bar, just like when we connected the root view controller to the navigation controller. That’s because Interface Builder knows this view controller is now managed by a navigation controller, so a navigation bar will be provided at runtime. However, we can’t double-click in this one to set its title. The reason is that to customize the appearance of a non-root view controller, the scene needs to have a navigation item, which tells the navigation controller what’s different about this scene, usually meaning a title and a right bar button item.

Drag a Navigation Item icon from the Object library to the new scene. You should now be able to double-click in the navigation bar and change its name to Tweet.

The other thing that changed when we dragged the segue between the two scenes is that there’s now an arrow connecting the root view controller to our new view controller. In the middle of the arrow is a circular icon that represents the segue, which is the object managing the transition between the two view controllers. We’ll have more to say about using segues a little later.

For now, let’s run the app and see what we have. Once the tweets table gets populated, tap one of them. The tweets view will slide out to the left while the new view slides in from the right. Although it’s empty, we can easily get our bearings thanks to the navigation bar, which shows our Tweet title. The navigation controller also provides a back button on the left, which by default uses the title of the previous view controller: Tweets. Not bad, getting navigation for free without having written any code for it!