Monday, March 11, 2013

How to Add Navigation Controller in iPhone Application


This time we are going to learn How to add Navigation Controller in iPhone application

So stay with me, and do it step by step by .. don't forget to drop me a message or comment.

At the end of this Tutorial you can find Complete Source code zip file.

What is Navigation Controller in iPhone applications?

A Navigation Controller is a special kind of view controller that manages a stack of view controllers and their corresponding views. It's an ideal way to display hierarchical data.
The Navigation Controller is always initialized with a root view controller; this will be the starting view at the bottom of the stack. As the user presses buttons in that view, you can then push a new view controller onto the stack to show a new view. When the user is done with the new view and presses a button to go back, you then pop that controller off the stack to return to the root view.
A Navigation Controller can be used with or without a Navigation Bar, which appears at the top of the screen:

When you push a new view onto the stack, the Navigation Bar will automatically show a "back" button on the left side of the bar that will take the user back to the previous view.

Note : This Application Developed Using : iOS 6 , Xcode 4.6, and MAC OS X Lion 10.8.1

PHASE - I (Create New Project)

So, Let's Fire Xcode!!

Go to File --> New --> Project

Now we can see a Pop up Window for selecting our application templet 

So make sure you Single View Application templet as shown in below picture and Go for Next..



In the Next Window we need to put Our Project Details this way

 -------------------------------------------------------------
| Product Name : NavigationDemo            |
| Organization Name :RDCWorld    |
| Company Identifier : com.rdcworld            |
|                            |
| Class Prefix :  (leave it blank for now)    |
|                            |
| Devices : iPhone                    |
 -------------------------------------------------------------

Note : Don't forget to Make Tick mark on "Use Automatic Reference Counting" option.



Go to Next --> Create.

Now you can see Xcode default dashboard with our newly created project .

PHASE - II (Add more ViewControllers)

we need to Add one more UIViewController for second screen. create and give name as "NextViewController" this way

1. File --> New --> File --> Select Objective -C class templet (in Cocoa Touch option).

2. In the next window give file details

Class : NextViewController
Subclass of : UIViewController

Select "With XIB for user interface" option --> Next -->create. 

So for now our application project structure look like



PHASE - III (Design UI)


Open ViewController.xib file

1. Select Layout --> go to attribute inspector --> change Top Bar value to NavigationBar.




2. drag UIButton from object library and double click on it, update name as "Next" --> save this file

3. change background color to Green

Now open NextViewController.xib

4.Select Layout --> go to attribute inspector --> change Top Bar value to NavigationBar.

5. change background color to Blue

PHASE - IV (Create IBOutlets and IBAction )

We are going to create IBAction methods for UIButton .
So just open ViewController.xib 

Okay, Now select Assistant Editor on Top Right side



You can see our ViewController.xib (Left side) + ViewController.h (Right side) opened together.

Create IBAction

3.  select Scan Button -- > press Ctrl +Click and drag cursor  between @interface and @end  (in Right side Header File). 

4. in the pop up window make sure you change Connection type Outlet to --> Action, and give method name as "goToNextView"



you will find one IBAction method is created in header file and empty body is added in implementation file (.m file ) too

- (IBAction)goToNextView:(id)sender;


Done!! now back to Standard Editor




PHASE - V (Writing Code)

~ ~ ~ ~ ~ ~ ~ ~ ~              Application Delegate Class (AppDelegate)          ~ ~ ~ ~ ~ ~ ~ ~ ~  

To enable Navigation Controller in our application we need to add it in app delegate.

So open AppDelegate.h

1.  create UINavigationController with strong property 

@property (strong, nonatomic) UINavigationController *rootController;

So Finally our AppDelegate.h file look like 

-----------------------------------------------------------------------------------------------------------------------------------------
//
//  AppDelegate.h
//  NavigationDemo
//
//  Created by RDC on 3/12/13.
//  Copyright (c) 2013 RDC World. All rights reserved.
//

#import <UIKit/UIKit.h>

@class ViewController;

@interface AppDelegate : UIResponder <UIApplicationDelegate>

@property (strong, nonatomic) UIWindow *window;
@property (strong, nonatomic) ViewController *viewController;

@property (strong, nonatomic) UINavigationController *rootController;

@end
-----------------------------------------------------------------------------------------------------------------------------------------

Now come to AppDelegate.m file 

2. in didFinishLaunchingWithOptions method initialize Navigation Controller, by adding ViewController as a Root.

self.rootController = [[UINavigationController alloc] initWithRootViewController:self.viewController];

3. add navigation controller to UIWindow

self.window.rootViewController = self.rootController;

Finally our AppDelegate.m file look like 

-----------------------------------------------------------------------------------------------------------------------------------------
//
//  AppDelegate.m
//  NavigationDemo
//
//  Created by RDC on 3/12/13.
//  Copyright (c) 2013 RDC World. All rights reserved.
//

#import "AppDelegate.h"

#import "ViewController.h"

@implementation AppDelegate


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; 
    self.viewController = [[ViewController alloc] initWithNibName:@"ViewController" bundle:nil];    
    self.rootController = [[UINavigationController alloc] initWithRootViewController:self.viewController];
    self.window.rootViewController = self.rootController;
    [self.window makeKeyAndVisible];
    return YES;
}

//for now leave rest all empty methods..

@end
-----------------------------------------------------------------------------------------------------------------------------------------



~ ~ ~ ~ ~ ~ ~ ~ ~              Controller Class (ViewController)           ~ ~ ~ ~ ~ ~ ~ ~ ~   

Open ViewController.h file

1. add @class statement just below to #import 

@class NextViewController;

2. create strong property for NextViewController, We are going to load via Next Button

@property (nonatomic, strong) NextViewController *nextViewController;

So Finally our ViewController.h file look like

-----------------------------------------------------------------------------------------------------------------------------------------
//
//  ViewController.h
//  NavigationDemo
//
//  Created by RDC on 3/12/13.
//  Copyright (c) 2013 RDC World. All rights reserved.
//

#import <UIKit/UIKit.h>

@class NextViewController;

@interface ViewController : UIViewController

@property (nonatomic, strong) NextViewController *nextViewController;

- (IBAction)goToNextView:(id)sender;

@end
-----------------------------------------------------------------------------------------------------------------------------------------

now open ContactObject's implementation class ViewController.m

1.  add synthesize (for all declared variable in header file with @property) just below to @implementation

@synthesize nextViewController;

2. in viewDidLoad method put title for Current view

self.title = @"Main View";

3. update goToNextView method body this way

- (IBAction)goToNextView:(id)sender {    
    nextViewController = [[NextViewController alloc] init];
    
    //we already added navigation controller in app delegate, so using that load new view
    [self.navigationController pushViewController:nextViewController animated:YES];     
}

That's it, Save file.

So Finally our ViewController.m file look like

-----------------------------------------------------------------------------------------------------------------------------------------
//
//  ViewController.m
//  NavigationDemo
//
//  Created by RDC on 3/12/13.
//  Copyright (c) 2013 RDC World. All rights reserved.
//

#import "ViewController.h"
#import "NextViewController.h"

@interface ViewController ()
@end

@implementation ViewController
@synthesize nextViewController;

- (void)viewDidLoad
{
    [super viewDidLoad];    
    self.title = @"Main View";
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];    
}

- (IBAction)goToNextView:(id)sender {    
    nextViewController = [[NextViewController alloc] init];
    
    //we already added navigation controller in app delegate, so using that load new view
    [self.navigationController pushViewController:nextViewController animated:YES];     
}
@end
-----------------------------------------------------------------------------------------------------------------------------------------

~ ~ ~ ~ ~ ~ ~ ~ ~              Controller Class (NextViewController)           ~ ~ ~ ~ ~ ~ ~ ~ ~  

Make sure we don't need to change anything in NextViewController.h file 

So Finally our NextViewController.h file look like

-----------------------------------------------------------------------------------------------------------------------------------------
//
//  NextViewController.h
//  NavigationDemo
//
//  Created by RDC on 3/12/13.
//  Copyright (c) 2013 RDC World. All rights reserved.
//

#import "ViewController.h"

@interface NextViewController : ViewController

@end
-----------------------------------------------------------------------------------------------------------------------------------------

now open its implementation file (NextViewController.m) file 

in viewDidLoad method update its Title 

self.title = @"Second View";

So Finally our NextViewController.m file look like

-----------------------------------------------------------------------------------------------------------------------------------------
//
//  NextViewController.m
//  NavigationDemo
//
//  Created by RDC on 3/12/13.
//  Copyright (c) 2013 RDC World. All rights reserved.
//

#import "NextViewController.h"

@interface NextViewController ()
@end

@implementation NextViewController

- (void)viewDidLoad
{
    [super viewDidLoad];   
    self.title = @"Second View";    
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
}
@end
-----------------------------------------------------------------------------------------------------------------------------------------

Okay wrap it up this application. let's Run it.



press Next button and you can see back button " MainView" is added by Navigation Controller.



Great!! we did it.

You can find complete project source code zip file here : NavigationDemo.zip (75.14 KB)


I Would love to here your thoughts !!

No comments:

Post a Comment