For developing multi view mobile application one of the most important things is navigation between views and view controllers. Navigation between views and view controllers is important for better UX which makes the application unique and popular. There are different ways for how we can handle navigation, manual navigation, using UINavigationController or by using UITabBar.
In this tutorial we will cover navigation between views and view controllers using UINavigationController. The benefit of using this controller for handling navigation is that we don’t need to care about which was the first or which one is the next view controller. UINavigationController keep local instances of the view controllers in local stack for easy navigation. This tutorial is split on two parts, part one where we will see how fast with few clicks we can develop application navigation using InterfaceBuilder and Storyboard and in the second part of this tutorial we will see how can we develop application with UINavigationController but by setting manually in AppDelegate and navigating between view controllers with xib files.
Ok, Let’s start with part one.
We are starting with creating the Single View Application in our Xcode IDE.
Next we are setting Product Name, Organisation Name, Identifier, Language ( Objective-C or Swift ) and Device.
Your project should look like this after finishing previous step:
Next we are setting the size of the view and we are choosing compact, portrait for all iPhones.
We are selecting Navigation Controller in Object Library.
We are making drag and drop on Navigation Controller from Object Library over our storyboard.
If we made everything right our storyboard should look like in the image below. Its good to mention that after drag and drop operation on Navigation Controller from Object Library over our storybaord on our storyboard we can see also view with UITableView. In this tutorial we will not use UITableView, for navigation with using UITableView first we will cover UITableView component in some of the next tutorials.
As we can see in previous image the arrow which point from the left side to right is pointing to our View Controller which mean this controller i set as initial and after starting the application this will be the first View Controller what we will see. For using UINavigationController we must set our Navigation Controller as initial for that reason we are selecting Navigation Controller in our storyboard and in Attributes Inspector we are checking checkbox saying is Initial View Controller.
Automatically we will see that arrow will now point in Navigation Controller this mean that after starting the application first view controller what we will see is the first one which Navigation Controller is pointing into which is called also root view controller, in this case view controller with UITableView which we will select and delete from the storyboard.
We are selecting this view controller and we are deleting.
If we have deleted previously selected view controller our storyboard should look like on image bellow where we see the Navigation Controller and our View Controller.
Next we must select our Navigation Controller and drag over our View Controller so it become selected.
After releasing the button we will see menu with options where we will select root view controller.
After selecting root view controller option in the menu we can see how the will connect and automatically our View Controller will become root view controller and the first view controller which we will see after starting the application.
We are dragging two buttons from Object Library over selected View Controller and we are customizing this buttons with changing colors.
We are selecting the navigation bar of the View Controller and we are setting the Title property on Navigation Item.
Next we are selecting View Controller from the Object Library for creating the views for the new View Controllers which will be displayed after pressing the buttons.
We are dragging the first one and we are releasing over the storyboard.
We can see that new empty view from the new view controller which is placed in our storyboard.
Also we are dragging second one so our storyboard should look like on the image bellow.
We will change the background color on newly created views to be same like buttons.
For newly placed view controllers in the storyboard we are creating new classes following the images bellow.
For new file we will select Cocoa Touch Class.
Then we are writing the name and we are leaving the checkbox Also create XIB file unchecked.
After creating new classes our project should look like on the image bellow with two more files which are view controllers for the view controllers in storyboard.
We are selecting the second view controller in our storyboard to become first in focus and in Identity Inspector we are selecting the class name of the file which we have created on steps before, this mean that we are connecting both, View Controller from the storyboard with class file where the logic and methods will be implemented in case we have some UI components.
From the first button, orange button we are dragging over the second view controller.
After releasing we will see menu with options for how we want this view controller to be displayed and we are choosing the first option for the segue in Action Segue, Show.
If we done previous operation correctly our storyboard should look like this, with the arrow pointing from the first view controller to second view controller.
In Object Library we are selecting Navigation Item and we are dragging over the Navigation Bar of the second view controller.
After releasing we will see how the Navigation Item is placed in the center with default name Title.
We are changing default title name to Second UIViewController.
After connecting the button with the second view controller with segue, putting Navigation Item on the second view controller Navigation Bar and changing the title we are repeating the same steps with the third view controller but we are connecting red button.
After finishing this steps our storyboard should look like on the image bellow with Navigation Controller as initial view controller, as first view controller as root view controller and with segue from first button, orange button to second view controller, orange view controller and with segue from second button, red button to third view controller, red view controller.
When we compile and run the application in the simulator we can press buttons so we can see if everything we have implemented correctly how its working.
After pressing on one of the buttons to show the view controller which is connected with segue we will notice in the new view controller at the navigation bar on the left side button Back with arrow which point to left. This button is automatically displayed and if we press it navigation controller will go back to previous view controller, the view controller from where we came, which in this case is first view controller.
Complete source code can be found on my GitHub ready for testing.