Introduction

In this tutorial we will learn how to create Navigation controller based app in iPhone.

So before we start, let get some basic info about UINavigationController

As per the Apple Documentation

• “A navigation controller manages a stack of view controllers to provide a drill-down interface for hierarchical content.“

• In Other words :- “It’s a tool which is used to presenting multiple screens.”

In this tutorial you will learn to configure and use the navigation controller in application.

So here is the list of basic objects of navigation Interface and its job.

• Navigation Bar : It is custom view, which is presented by a navigation controller. it Contains a back button and more other buttons which you can customize.

See the below image which is provided in Apple documentation. It will give you more clear view of navigation interface.

Below is the image in which objects which are managed by navigation controller are displayed.

 

• For navigation bar and toolbar you can customize some of its behavior and appearance.

• Navigation stack is following LIFO (last in first out) rule. it contains collection of custom view controllers.

• Normally navigation controller assign itself the delegate of UINavigationBar. but if you want to modify it you can.

before we start coding, first we create a new project

Go to Xcode -> Create a new Xcode project

AS per below screen shot select iOS -> Application -> Empty Application , Click Next button

Set following fields :

• Product name => “NavigationDemo”

• Device => “iPhone”

• “Check” => Use Automatic Reference Counting

 

And click Next and Create the project in your desired directory.

As we choose “Empty Application” there is no ViewController file, so create a new one.

Go to File -> New-> File

Select iOS -> Cocoa Touch -> Objective-C Class , Click Next button

Set following fields

• Class => “ViewController”

• Subclass of => “UIViewController”

• “Check” => With XIB for user interface

 

And click next and create the files in project.

This how your added file looks.

You can create navigation controller either programmatically or directly in xib.

Normally i prefer programmatically approach.

The main thing you have to clear in your mind is below :

• “if you want to create navigation controller programmatically, first you need to find appropriate point. (appropriate point over here – means At which point of program you want to set the navigation controller)”

lets take an example : navigation controller provides rootViewController for your app window, then you can create the NavigationController in “didFinishLaunchingWithOptions” method.

So Go to AppDelegate.h file and import header file of ViewController (Which will be the Top-Level object for navigation stack)

 #import "ViewController.h"

In AppDelegate.h file’s @interface section

Create object of UINavigationController and ViewController.

@interface AppDelegate : UIResponder 
{
UINavigationController *navigationController;
ViewController *TopviewController;
}

Now Move to AppDelegate.m File

In “didFinishLaunchingWithOptions” method initialize the objects which we create in .h file

Initialize the “TopviewController” using initWithNibName method.

TopviewController = [[ViewController alloc] initWithNibName:@"ViewController" bundle:[NSBundle mainBundle]];

and set the “navigationController” to initWithRootViewController object.

 navigationController = [[UINavigationController alloc] initWithRootViewController:TopviewController];

And set the root view controller of window to “navigationController”.

 self.window.rootViewController = navigationController;

After adding above lines of code, this is how your “didFinishLaunchingWithOptions” method looks.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
TopviewController = [[ViewController alloc] initWithNibName:@"ViewController" bundle:[NSBundle mainBundle]];
navigationController = [[UINavigationController alloc] initWithRootViewController:TopviewController];
self.window.rootViewController = navigationController;
self.window.backgroundColor = [UIColor whiteColor];
[self.window makeKeyAndVisible];
return YES;
}

Save and run the program. you will get white view with navigation bar.

Now suppose you want to set a navigation bar title. for that

Go to ViewController.m file and in “viewDidLoad” method add following line.

self.title = @”Root View Controller”;

This is how your method look a like

- (void)viewDidLoad

{

[super viewDidLoad];

self.title = @”Root View Controller”;

// Do any additional setup after loading the view from its nib.

}

Now run your program it will look like below.

Great !!! now we will create another view and use UINavigationController to open it.

So

Go to File -> New-> File

Select iOS -> Cocoa Touch -> Objective-C Class , Click Next button

Set following fields

• Class => “DetailViewController”

• Subclass of => “UIViewController”

• “Check” => With XIB for user interface

And click next and create the files in project.

Now just to identify in which view controller in we currently are

we add labels to xib as per file names.

So

Go to DetailViewController.xib

Add a label and set the text to “This is DetailViewController”

And

Go to ViewController.xib

Add a label and set the text to “This is ViewController”

Add a button and set text to “Open Detail View”

Now Make a method for button “Open Detail View”.

So Go to ViewController.m file and import header file of DetailViewController

#import "DetailViewController.h"

And add the following method in .m file

-(IBAction)btnclick:(id)sender

{

DetailViewController *objDetail = [[DetailViewController alloc] initWithNibName:@”DetailViewController” bundle:[NSBundle mainBundle]];

// as per above line we create object of DetailViewController.

[self.navigationController pushViewController:objDetail animated:YES];

// This is how we can open a view controller using NavigatioController.

// In this method we have to pass an object of a UIViewcontroller. it Uses a horizontal slide transition.

}

Now we assign this method to button “Open Detail View”.

So go to ViewController.xib

File’s owner -> Go to Connections Inspector -> drag an method to button and Set Received Action on “Touch Up Inside”

Set the method to button as we see in below screen shot.

Now save and run your program

It will look like following

Thats it. In Next tutorial we will learn how to customize the Navigation bar.

Before going to next tutorial if you have any questions or remarks about what we have finished so far, then delight let us know.

To Download the source code click here : Download source code