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.

Screen Shot 2016-07-11 at 11.09.50

 

Next we are setting Product Name, Organisation Name, Identifier, Language ( Objective-C or Swift ) and Device.

Screen Shot 2016-08-12 at 15.06.57

 

Your project should look like this after finishing previous step:

Screen Shot 2016-08-12 at 15.07.26

 

Next we are setting the size of the view and we are choosing compact, portrait for all iPhones.

Screen Shot 2016-08-12 at 15.08.12

 

We are selecting Navigation Controller in Object Library.

Screen Shot 2016-08-12 at 15.08.24

 

We are making drag and drop on Navigation Controller from Object Library over our storyboard.

Screen Shot 2016-08-12 at 15.24.49

 

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.

Screen Shot 2016-08-12 at 15.26.06

 

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.

Screen Shot 2016-08-12 at 15.26.47

 

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.

Screen Shot 2016-08-12 at 15.27.04

 

We are selecting this view controller and we are deleting.

Screen Shot 2016-08-12 at 15.27.22

 

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.

Screen Shot 2016-08-12 at 15.27.37

 

Next we must select our Navigation Controller and drag over our View Controller so it become selected.

Screen Shot 2016-08-12 at 15.28.06

 

After releasing the button we will see menu with options where we will select root view controller.

Screen Shot 2016-08-12 at 15.28.16

 

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.

Screen Shot 2016-08-12 at 15.28.36

 

We are dragging two buttons from Object Library over selected View Controller and we are customizing this buttons with changing colors.

Screen Shot 2016-08-12 at 15.34.49

 

We are selecting the navigation bar of the View Controller and we are setting the Title property on Navigation Item.

Screen Shot 2016-08-12 at 15.35.15

 

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.

Screen Shot 2016-08-12 at 15.35.53

 

We are dragging the first one and we are releasing over the storyboard.

Screen Shot 2016-08-12 at 15.36.02

 

We can see that new empty view from the new view controller which is placed in our storyboard.

Screen Shot 2016-08-12 at 15.36.11

 

Also we are dragging second one so our storyboard should look like on the image bellow.

Screen Shot 2016-08-12 at 15.36.55

 

We will change the background color on newly created views to be same like buttons.

Screen Shot 2016-08-12 at 15.37.51

 

For newly placed view controllers in the storyboard we are creating new classes following the images bellow.

Screen Shot 2016-08-12 at 15.38.32

 

For new file we will select Cocoa Touch Class.

Screen Shot 2016-08-12 at 15.38.38

 

Then we are writing the name and we are leaving the checkbox Also create XIB file unchecked.

Screen Shot 2016-08-12 at 15.38.47

 

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.

Screen Shot 2016-08-12 at 15.39.23

 

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.

Screen Shot 2016-08-12 at 15.39.50

 

From the first button, orange button we are dragging over the second view controller.

Screen Shot 2016-08-12 at 15.59.07

 

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.

Screen Shot 2016-08-12 at 15.59.14

 

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.

Screen Shot 2016-08-12 at 16.01.07

 

In Object Library we are selecting Navigation Item and we are dragging over the Navigation Bar of the second view controller.

Screen Shot 2016-08-12 at 16.02.45

 

After releasing we will see how the Navigation Item is placed in the center with default name Title.

Screen Shot 2016-08-12 at 16.02.54

 

We are changing default title name to Second UIViewController.

Screen Shot 2016-08-12 at 16.03.09

 

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.

Screen Shot 2016-08-12 at 16.04.07

 

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.

Screen Shot 2016-08-12 at 16.04.56

 

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.

Screen Shot 2016-08-12 at 16.58.34 Screen Shot 2016-08-12 at 16.58.52 Screen Shot 2016-08-12 at 16.59.11

 

Complete source code can be found on my GitHub ready for testing.

Print Friendly

Leave a Comment

Your email address will not be published. Required fields are marked *