The Navigation Controller

Topics covered in this iOS Development tutorial:

Setting up the navigation controller, Setting up the initial view controller, Setting up the root view controller, Adding the detail view controller

Exercise Preview

Exercise Overview

In this exercise, we’re going to start to create a detailed view for the band information. When a user clicks one of the band cells in the table view controller, they will be taken to a view that lists detailed information about the band. To add this functionality to our app, we will use a Navigation Controller, a common element in most iPhone apps.

Getting Started

1. If you completed the previous exercise you can skip the following sidebar. We recommend you finish the previous exercises (1B–1C) before starting this one.

   If you completed the previous exercise, Jive Factory.xcodeproj should still be open. If you closed it, re-open it (from yourname-iOS Dev Level 2 Class > Jive Factory).

   If You Did Not Complete the Previous Exercises (1B–1C)

   1. Close any files you may have open and switch to the Desktop.
   2. Navigate to Class Files > yourname-iOS Dev Level 2 Class.
   3. Duplicate the Jive Factory Ready for Navigation Controller folder.
   4. Rename the folder to Jive Factory.
   5. Open Jive Factory > Jive Factory.xcodeproj.

Learning About the Navigation Controller

Before we add the Navigation Controller to our storyboard, let’s familiarize ourselves with how it works.

1. In Xcode, go to Help > Developer Documentation.
2. Into the search field, type UINavigationController and wait a moment for the results to appear.
3. Click on the first result (which should be for UINavigationController).

4. Scroll down to find Figure 1 A sample navigation interface.

   This is an example of the type of navigation interface we will be building. What the Navigation Controller provides is easy navigation between hierarchical content. With each controller, you get a title bar, which you can name. In this example the first controller is named Settings. When you click on General (within the Settings controller) you are taken to the controller which has the General title at the top as well as an automatic back button with the name of the previous screen, Settings.

5. Now that you have an idea of the functionality we will be adding, close the Documentation window to return to the project.

Adding the Navigation Controller

1. In the Project navigator click on Main.storyboard.
2. We need more room in the Editor area. If you see the Document Outline, click the Hide Document Outline button at the bottom left of the Editor area.
3. Go to the Object library on the top right.
4. Find the Navigation Controller.
5. Drag it anywhere into the storyboard except over the existing Bands Table View Controller. It’s OK if it overlaps some, but try to minimize it as much as possible. We’ll perfect the position shortly.
6. If the Document Outline popped open again, click the Hide Document Outline button again.

7. Notice the Navigation Controller comes with two scenes:

   • Navigation Controller: manages the relationships and transitions between our views
   • Root View Controller: the first controller that is instantiated by the Navigation Controller
8. We actually want our existing Bands Table View Controller to be the first controller, so let’s delete the provided Root View Controller. Click on any blank area of the storyboard so that nothing is selected.
9. Click onto the top bar of the Root View Controller so that it is outlined in blue.
10. Hit Delete.

11. As shown below, rearrange the remaining two controllers so that the Navigation Controller is on the left and they are lined up next to each other.

    

Setting the Initial View Controller

We need to set the Navigation Controller as our Initial View Controller. Currently it’s set to our Bands Table View Controller. The gray arrow pointing to it signifies this. Let’s change it to the Navigation Controller.

1. Click on the top bar of the Navigation Controller to select it (it will become outlined in blue).

   NOTE: If a controller is already selected and you click the top bar again, it will become deselected. Simply click it again to reselect it.

2. In the Utilities area on the right, click on the Attributes inspector tab .
3. In the View Controller section, check on Is Initial View Controller.

4. In the storyboard, notice that the gray arrow is now pointing to the Navigation Controller. Sweet!

Setting the Root View Controller

Now that we have the Navigation Controller as the initial view, we need to set the Bands Table View Controller as the root view controller so it is the first controller that users see. We can set this in the Connections inspector.

1. Make sure the Navigation Controller is still selected in the Editor (it should have a blue outline).
2. In the Utilities area on the right, click on the Connections inspector tab .

3. In the Triggered Segues section, find root view controller.

   NOTE: If you don’t see anything under Triggered Segues, click on its name to expand it.

4. Mouse over the circle to the right of root view controller so it becomes a + sign.

5. Hold Control and drag from the circle to the Bands Table View Controller then release, as shown below:

   

6. Notice in the Connections inspector , root view controller is now connected to Bands Table View Controller.

   This creates a connection between the two so that the Table View Controller is now the Root View Controller for the Navigation Controller.

Adding the Detail View Controller

1. We need to add a View Controller that will list the details about a band. In the Object library , find the View Controller.
2. Drag the View Controller and drop it to the right of Bands Table View Controller in the Editor.

3. Position it so it is lined up nicely with the others.

   Now that we have this new View Controller, we need to create a connection between it and the cell in our Bands Table View Controller, so that when a user taps on the cell they are taken to the new View Controller.

4. Let’s re-open the Document Outline. At the bottom left of the Editor, click the Show Document Outline button .

5. In the Document Outline, hold Control and drag from the bandCell to the View Controller on the right.
6. A Segue menu will open. Under Selection Segue, click Show.
7. Click on Navigation Item to select it.
8. In the Utilities area on the right, click the Attributes inspector tab .
9. Next to Title, type Bands and hit Return.
10. Notice the title bar at the top of the Bands Table View Controller has been updated.
11. Click the Run button.
12. When the app loads in the Simulator, click on any of the band cells. You will be taken to a blank view controller. Great, the connection is working! In the next exercise we’ll add band details to this view.
13. Click the Bands button at the top left of the screen to go back to the list of bands. Pretty cool!
14. Switch back to Xcode.
15. Click the Stop button.
16. Do a File > Save.

17. Leave the project open. We’ll continue to work on it in the next exercise.