NavigationController Application in iPhone

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

  • Rick
  • March 31, 2010
  • iOS

About the Author

Leave a Reply 9 comments

Henry - April 7, 2010 Reply

IT does not work for me. I load the first screen, press button, nothinh happens and simulator says : [Session started at 2010-04-07 16:54:20 +0200.]
2010-04-07 16:54:23.886 EssaiNavCont[4787:207] Application tried to push a nil view controller on target .

Is there a wxay to download the tutorial project files ?

Henry - April 9, 2010 Reply

I fixed it. What’s missing in the tutorial is the following: in IB, connect the nView Outlet to the nViewController

    Andrevinsky - February 21, 2011 Reply

    Henry, thanks!

    That’s the first nav. sample off the web that worked for me! I’m bursting with gratitude. ((bow))

    Victor - April 3, 2011 Reply

    Thank you!

Sushant - April 10, 2010 Reply

If you have still any problem then you can download the sourceCode..!!

Structurer - May 24, 2011 Reply

After some troubleshooting it worked. Good tutorial and very nice that you have the source code for downloading, that helped me through the troubleshooting of IB connections. Maybe you can clarify that a bit to make it a very good tutorial.

James - June 16, 2011 Reply

Wouldn’t it be faster to manually allocate and push controllers instead of adding them to xibs, like this

#import "SecondViewController.h"
.....
-(IBAction)pressMe: (id)sender
{
SecondViewController *secondViewController =
[[SecondViewController alloc] init];
[[self navigationController] pushViewController: secondViewController
animated: YES];
[secondViewController release];
}

    Sushant - June 16, 2011 Reply

    Thanks for your comment.

jcesar - June 11, 2012 Reply

It opens a macs project instead a iphone :S

Leave a Reply: