NavigationController Application in iPhone

cnsatm01

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

Comments 15

  1. 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 ?

  2. 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

  3. 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.

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

  5. 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.

  6. 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?

  7. 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.

  8. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">