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:

 

 

 

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:

 

 

 

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:

 

 

 

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:

 

 

 

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:

 

 

 

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:

 

 

 

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:

 

 

 

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:

 

 

 

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:

 

 

 

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

You can downloaded SourceCode from here NavigationController 2

Leave a Comment:

15 comments
Henry says April 7, 2010

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 ?

Reply
Henry says April 9, 2010

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

Reply
    Andrevinsky says February 21, 2011

    Henry, thanks!

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

    Reply
    Victor says April 3, 2011

    Thank you!

    Reply
Sushant says April 10, 2010

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

Reply
isicom says December 1, 2010

I get evrytime

Application tried to push a nil

by button touch.
This is my work arround

– (IBAction)PressMe:(id)sender
{

if (secondViewController==nil) {
SecondViewController *secView = [[SecondViewController alloc] initWithNibName:@”SecondViewController” bundle:[NSBundle mainBundle]];
self.secondViewController = secView;
[secView release];
}
[[self navigationController] pushViewController:secondViewController animated:YES];
}

But why works yours without instanciation??

Thanks

Reply
Andrevinsky says February 21, 2011

Henry, thanks!

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

Reply
Structurer says May 24, 2011

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.

Reply
James says June 16, 2011

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];
}

Reply
    Sushant says June 16, 2011

    Thanks for your comment.

    Reply
Benoit says October 17, 2011

I cannot “Connect NavigationControllerAppDelegate to the NavigationController”…. it is not possible e.g. I cannot hold the CONTROL key, double-click on the AppDelegate and drag it to the NavigationController as IB does not permit that. I get the blue line with the dotted ends but when dragging FROM the NavigationControllerAppDelegate TO the NavigationController, the NavigationController is not ‘highlighted’… but I can drag the blue line to the “Window” OR I can do the opposite – drag a line FROM the NavigationController TO the NavigationControllerAppDelegate.

Reply
Thomas says December 6, 2011

Great tutorial – I had a quick question as I was trying to adapt your code of the ipad but I can’t seem to change the view size. Is this fixed somewhere in your sourcecode?

Reply
Richard says February 29, 2012

Excellent tutorial. At first I did not connect View to File’s Owner in each view controller and the compiler complained that I was trying to push a null controller.

When I made those connections everything worked great.

This gives me a feel for how to move among views by accessing view controllers, one for each view.

Reply
Anum Amin says April 14, 2012

Although very nice and helpful tutorial, but there are many mistakes, which took me a little time to sort out from your downloaded code as I am newbie. I have tried to learn try this tutorial on xcode 4.0. What should be checked is that all connections are properly done or not.

In mainWindow.xib file, I did following connections :

AppDelegate: navigationController -> NavigationController
Window: rootViewController -> NavigationController

Also in all first,second…ViewController.xib files, file owner must have its viewcontroller outlets connected to the view object you picked from the library, so that error of ‘Navigation controller try to push nil view’ does not occur.

Reply
jcesar says June 11, 2012

It opens a macs project instead a iphone :S

Reply
Add Your Reply