In the previous articles in this series you saw how to create an iOS app, what it’s lifecycle is, and how to create a basic user interface within a single view.
In this article you’ll see how you can navigate between multiple views using the built-in navigation controller, and how it manages the transitions between the views on your behalf.
Step 1. Create a Single View Application
Start by creating a new single view application. You can do this by selecting ‘New Project’ on the File menu. Then, in the ensuing dialog, select ‘Single View’ application. See Figure 1.
Figure 1. Creating a Single View application
You now have the basis for your application. In the next step(s) you’ll add a couple of views to it, and see how to navigate between them.
Step 2. Add the UINavigationController
Navigation in iOS apps can be managed using a UINavigationController object. This adds the familiar ‘Title’ bar at the top of your views and the navigation buttons that allow you to move between views.
You add this to your AppDelegate in order to allow every view to access it. To do this, open AppDelegate.h, and add a property of type UINavigationController, like this:
Figure 2: Add a property of type UINavigationController
Now that you have it in your app delegate’s header file, you can instantiate it.
First, make sure that you synthesize your navigationController property, and then, update your applicationdidFinishLaunching function to create an instance of it.
Here’s the code:
Figure 3: Update your applicationdidFinishLaunching function
You can see that this creates a new instance of UINavigationController and loads it into the navigationController property. It initializes itself with its ‘root’ view controller being the main view controller for the app. This means that this view controller is at the ‘top’ of the navigation stack, and all navigation is relative to it.
As you’ve seen before, to add the control to the view, you then add it as a subview, and that is done with the navigationController. If you run your application, you’ll now see a blue title at the top of the empty grey view.
Step 3. Add Two More Views
To add new views to your application, right click on the project navigator and select ‘New File’. From the ensuing dialog, select the ‘UIViewController subclass’.
Figure 4: Creating a new file.
Click Next and you’ll be asked to name your file. Call it ‘View2’ and make sure it’s a subclass of UIViewController. See Figure 5.
Figure 5: Adding View2.
When done you’ll see that ‘View2.m’ and ‘View2.h’ have been added to your project.
Repeat this to add a ‘View3′ UIViewController.
Step 3. Create the Navigation.
Now that you have your views, it’s time to create the navigation between them. You do this by creating an instance of the view that you want to navigate to, and then pushing this to the ViewController. If you aren’t familiar with the term ‘push’, it’s a commonly used term in a ‘stack’ in Computer Science where you ‘push’ something onto the top of the stack then ‘pop’ it off. The idea here is that if you are presently on View1 and you push View2, View2 is now on top of the stack. When you go ‘back’, you are ‘popping’ off the stack, and now View1 is back on top. The UI will reflect this as you navigate.
So, let’s add some code to ViewController.m that allows you to navigate to View2.
First, at the top of ViewController.m, you’ll need to import the header for View2. This will allow you to create an instance of the View2 view controller.
Figure 6: create an instance of the View2 view controller
Now, add a button that the user will touch to trigger the navigation:
Figure 7: Add a button
If you need to understand this code, go back to article 2 in this series, where buttons are explained.
The navigationItem is used to define the title of this view as far as navigation is concerned. It’s set to View1.
When the user touches the button, the function goTo2 will be called. This does the navigation:
Figure 8: The function goTo2 will be called
As you can see, it’s very straightforward. You create a new instance of a View2 view, and push this to the navigation controller. When you set ‘animated’ to YES, there’s a sliding transition, which is more visually pleasing.
Figure 9 shows the first View rendering the button. Note that the title reads ‘View1’, and there is no navigation.
Figure 9: Navigation on first View.
If the user now touches the button, you’ll see that the view slides to the left and the navigation changes. You can see this in Figure 10.
Figure 10: Navigating to View2
You can see that the ‘back’ button is automatically given to you, and that it is prepopulated with the title of the view that you just navigated from. You don’t need to write any code to take advantage of the animation.
If you don’t set a title on the view that you navigated from, this button will just read ‘back’.
To navigate from View2 to View3, you just do the same thing – add an import to the View3.h file to View 2, and create a button that calls code when touched. This code will then instantiate View3 and push it to the navigation controller.
Here’s the code to add to View2.
Figure 11: The code to add to View2
Now when you run the application, you’ll see that you can navigate from View 2 to View 3, and move back up the stack to ViewController, which is the root view as defined at the beginning.
And that’s it! You’ve just learned how to move around different views in an iOS application!
