This is the simple application of NavigationController. We will see how to build UINavigationController using Interface Builder. So let see how it will be worked.

Step 1: Crate a Window base application using template. Give the application name “NavigationController”.

Step 2: Xcode automatically creates the directory structure and adds essential frameworks to it. You can explore the directory structure to check out the content of the directory.

Step 3: We need to add four UIViewController class to the project. Choose New file -> Select cocoa touch classes group and then select UIViewController and corresponding .xib file . Give the project name “FirstViewController”, “SecondViewController”,”ThirdViewController” and “ForthViewController”. In our project, each view have a UIViewController and UINavigationController will be responsible for the pop up the next screen or previous screen.

Step 4: Open the AppDelegate.h file, we have added here NavigationController. So make the following changes in the file:

@interface NavigationControllerAppDelegate : NSObject <UIApplicationDelegate>  {
  IBOutlet UIWindow *window;
  IBOutlet UINavigationController *navigationController;
}

  @property (nonatomic, retain) IBOutlet UIWindow *window;
  @property (nonatomic, retain) IBOutlet UINavigationController *navigationController;

Step 5: Double click the MainWindow.xib file and open it to the Interface Builder. First drag NavigationController from the library and place it to the Main Window. Select the ViewController and bring up Identity Inspector, change the class name into the FirstViewController. Next bring Attributes Inspector and change the NIB Name into the FirstViewController(See the figure below). That means when you lunch the application the MainWindow.xib file containing the Navigation Controller and loaded the FirstViewController.xib file automatically. Connect NavigationControllerAppDelegate to the NavigationController. Now save it, close it and go back to the Xcode.

Step 6: In the AppDelegate.m file make the following changes:

- (void)applicationDidFinishLaunching:(UIApplication *)application {
  [window addSubview:navigationController.view];
  [window makeKeyAndVisible];
}

Step 7: Open the FirstViewController.h file. we have added here, the SecondViewController class and a IBAction: method this is basically push button for going to current view to next view. So make the following changes in the file:

#import <UIKit/UIKit.h>
  @class SecondViewController;
  @interface FirstViewController : UIViewController {
  IBOutlet SecondViewController *secondViewController;
}
  @property(nonatomic, retain) SecondViewController *secondViewController;

  - (IBAction)PressMe:(id)sender;

Step 8: Now double click the FirstViewController.xib file and open it to the Interface Builder. Open the View window, select it and bring up Attribute Inspector, change the background color. Drag Round Rect the from the library and place it to the view window. Double click it and change the name into the “PressMe”. Select the Round Rect and bring up Connection Inspector and drag TouchUpInside to the File’s Owner icon, select PressMe: action. Drag ViewController from the library and place it to the MainWindow. Select the ViewController and bring up Identity Inspector, change the class name into the SecondViewController and bring up Attribute Inspector, change the NIB Name into the SecondViewController(See the figure below).

Step 9: In the FirstViewController.m file make the following changes in the file:

#import "FirstViewController.h"
  #import "SecondViewController.h"
  @implementation FirstViewController
  @synthesize secondViewController;

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

  - (IBAction)PressMe:(id)sender
{
 [[self navigationController] pushViewController:secondViewController   animated:YES];
}

Step 10: Open the SecondViewController.h file. we have added here, the ThirdViewController class and a IBAction: method this is basically push button for going to current view to next view. So make the following changes in the file:

#import <UIKit/UIKit.h>
 @class ThirdViewController;
 @interface SecondViewController : UIViewController {
 IBOutlet ThirdViewController *thirdViewController;
}
 @property(nonatomic, retain) ThirdViewController*thirdViewController;

  - (IBAction)PressMe:(id)sender;

Step 11: Now double click the SecondViewController.xib file and open it to the Interface Builder. Open the View window, select it and bring up Attribute Inspector, change the background color. Drag Round Rect the from the library and place it to the view window. Double click it and change the name into the “PressMe”. Select the Round Rect and bring up Connection Inspector and drag TouchUpInside to the File’s Owner icon, select PressMe: action. Drag ViewController from the library and place it to the MainWindow. Select the ViewController and bring up Identity Inspector, change the class name into the ThirdViewController and bring up Attribute Inspector, change the NIB Name into the ThirdViewController(See the figure below).

Step 12: In the SecondViewController.m file make the following changes in the file:

#import "SecondViewController.h"
  #import "ThirdViewController.h"

  @implementation SecondViewController
  @synthesize thirdViewController;

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

 - (IBAction)PressMe:(id)sender
 {
  [[self navigationController] pushViewController:thirdViewController  animated:YES];
}

Step 13: Now open the ThirdViewController.h file. we have added here, the ForthViewController class and a IBAction: method this is basically push button for going to current view to next view. So make the following changes in the file:

#import <UIKit/UIKit.h>
 @class ForthViewController;

  @interface ThirdViewController : UIViewController {
  IBOutlet ForthViewController*forthViewController;
}
@property(nonatomic, retain) ForthViewController*forthViewController;

 - (IBAction)PressMe:(id)sender;

Step 14: Double click the ThirdViewController.xib file and open it to the Interface Builder. Open the View window, select it and bring up Attribute Inspector, change the background color. Drag Round Rect the from the library and place it to the view window. Double click it and change the name into the “PressMe”. Select the Round Rect and bring up Connection Inspector and drag TouchUpInside to the File’s Owner icon, select PressMe: action. Drag ViewController from the library and place it to the MainWindow. Select the ViewController and bring up Identity Inspector, change the class name into the ForthViewController and bring up Attribute Inspector, change the NIB Name into the ForthViewController(See the figure below).

Step 15: In the ThirdViewController.m file make the following changes in the file:

#import "ThirdViewController.h"
  #import "ForthViewController.h"

  @implementation ThirdViewController
  @synthesize forthViewController;

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

  - (IBAction)PressMe:(id)sender
{
 [[self navigationController] pushViewController:forthViewController  animated:YES];
}

Step 16: Double click the ForthViewController.xib file in the Interface Builder. Open the View window, select the view and bring up Attribute Inspector change the background color. Connect the File’sOwner icon to the View icon and select the view(See the figure below). Now save it,close it and go back to the Xcode.

Step 17: open the ForthViewController.m file and make the following changes in the file:

#import "ForthViewController.h"
 @implementation ForthViewController

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

Step 18: Now compile and run the application in the Simulator.

You can downloaded SourceCode from here NavigationController 2

Did you enjoy this article?
Share
the
Love
Get Free Updates