Navigation Controller Application.
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.
![Navigation Interface](https://codeplug.freefeast.info/wp-content/uploads//sites/10/2013/08/NavigationViews.png)
Below is the image in which objects which are managed by navigation controller are displayed.
![Objects Managed By Navigation Controller](https://codeplug.freefeast.info/wp-content/uploads//sites/10/2013/08/nav_controllers_objects.jpg)
- 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
![Choose Template For Your New Project](https://codeplug.freefeast.info/wp-content/uploads//sites/10/2013/08/CreateProj1.png)
Set following fields :
- Product name => “NavigationDemo”
- Device => “iPhone”
- “Check” => Use Automatic Reference Counting
![Choose Option For New Project](https://codeplug.freefeast.info/wp-content/uploads//sites/10/2013/08/CreateProject2.png)
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
![Create New File](https://codeplug.freefeast.info/wp-content/uploads//sites/10/2013/08/CreateFile1.png)
Select iOS -> Cocoa Touch -> Objective-C Class , Click Next button
![Choose A Template For New File](https://codeplug.freefeast.info/wp-content/uploads//sites/10/2013/08/CreateFile2.png)
Set following fields
- Class => “ViewController”
- Subclass of => “UIViewController”
- “Check” => With XIB for user interface
![Choose Option For New File](https://codeplug.freefeast.info/wp-content/uploads//sites/10/2013/08/CreateFile3.png)
And click next and create the files in project.
This how your added file looks.
![Project Navigator Preview](https://codeplug.freefeast.info/wp-content/uploads//sites/10/2013/08/CreateFile4.png)
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.
![Output For First Time Run](https://codeplug.freefeast.info/wp-content/uploads//sites/10/2013/08/Applaunch.png)
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.
![Navigationbar With Title.](https://codeplug.freefeast.info/wp-content/uploads//sites/10/2013/08/BarWithTitle.png)
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
![Choose Template For Second File](https://codeplug.freefeast.info/wp-content/uploads//sites/10/2013/08/Secondfile1.png)
Set following fields
- Class => “DetailViewController”
- Subclass of => “UIViewController”
- “Check” => With XIB for user interface
![Choose Option For New File](https://codeplug.freefeast.info/wp-content/uploads//sites/10/2013/08/Secondfile2.png)
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”
![Add Label to Detail View Controller](https://codeplug.freefeast.info/wp-content/uploads//sites/10/2013/08/Detailviewcontrollerlbl.png)
And
Go to ViewController.xib
Add a label and set the text to “This is ViewController”
![Add A Label To ViewController](https://codeplug.freefeast.info/wp-content/uploads//sites/10/2013/08/ViewControllerlbl.png)
Add a button and set text to “Open Detail View”
![Add Button To ViewController](https://codeplug.freefeast.info/wp-content/uploads//sites/10/2013/08/Add-Button.png)
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.
![Set Action To Button](https://codeplug.freefeast.info/wp-content/uploads//sites/10/2013/08/Assign-Method-to-button.png)
Now save and run your program
It will look like following
![Output](https://codeplug.freefeast.info/wp-content/uploads//sites/10/2013/08/Simulater1.png)
![Output](https://codeplug.freefeast.info/wp-content/uploads//sites/10/2013/08/Simulater1.1.png)
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