Navigate with UINavigationController

A UINavigationController is responsible for managing the navigation of hierarchical content. The navigation controller manages the current displayed screens using the navigation stack. At the bottom of this stack is the root view controller and at the top is the view controller currently displayed. You use methods to push and pop view controllers on and of the stack. In this tutorial we will see an example.

Update: June 16, 2014. This tutorial is made with Xcode 4 and targeted for iOS 6. The fully updated version for iOS7 and Xcode 5 is available here.

Create a new Project.  Use the Empty Application template. Name the  project NavigationControllerDemo and add a Class Prefix of iOS. Build for the iPhone device with ARC enabled.

Create a new File. Choose Objective-C Class. Name this class iOSRootViewController which is a subclass of UIViewController. Deselect the "With Xib for user interface" checkbox.

The newly created class will be the RootViewController, let's hook this up in AppDelegate. Insert the class directive in iOSAppDelegate.h and declare a property.

@class iOSRootViewController

@property (nonatomic, strong) iOSViewController *rootViewController;

In iOSAppDelegate.m import the header file.

#import "iOSRootViewController.h"

in didFinishLaunchingwithOptions, initialize the RootViewController and add it to the window. insert the following lines before the return YES line.

self.rootViewController = [[iOSRootViewController alloc] initWithNibName:nil bundle:NULL]; 
[self.window addSubView: self.rootViewController.view];

Give the RootViewController a blue background. In iOSRootViewController.m in ViewDidLoad, insert the following line.

self.view.backgroundColor = [UIColor blueColor];

Build and Run.

In iOSAppDelegate.h create a UINavigationController property

@property (nonatomic, strong) UINavigationController *navigationController;

In IOSAppDelegate.m in the didFinishLaunchingWithOptions, hook the navigationcontroller up in the window. Remove the line.

[self.window addSubview: self.rootViewController.view];

Add the following lines

self.navigationController = [[UINavigationController alloc] initWithRootViewController:self.rootViewController];
[self.window addSubview:self.navigationController.view];

Build and Run , you can see the navigation bar at the top of the screen.

Give the RootViewController a title. In iOSRootViewController.m in ViewDidLoad, insert the following line.

self.title = @"First Controller";

Build and Run, you now see the viewcontroller's title in the navigation bar.

Now it's time to create the second ViewController. Create a new File. Choose Objective-C Class. Name this class iOSSecondViewController which is a subclass of UIViewController. Deselect the "With Xib for user interface" checkbox.

Change the background color and give the viewcontroller a title. In iOSSecondViewController.m in ViewDidLoad, insert the following lines

self.view.backgroundColor = [UIColor redColor]; 
self.title = @"Second Controller";

In iOSRootViewController.m import the secondViewController header file


#import "iOSSecondviewcontroller.h"

We create a button on the right side of the navigationbar. When we press this button the secondViewController will be pushed on the stack. In iOSRootViewController in the ViewDidLoad method insert the following line.

self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"Push" style:UIBarButtonItemStylePlain target:self action:@selector(pushSecondController)];

The pushSecondController method initializes the secondviewController. the pushViewController:animated method pushed the viewController on the stack.

- (void)pushSecondController 
iOSSecondViewController *secondController = [[iOSSecondViewController alloc] initWithNibName:nil bundle:NULL];
[self.navigationController pushViewController:secondController animated:YES];

Build and Run, you can see you can switch between viewControllers.

You can download the source code of the NavigationControllerDemo at the ioscreator repository on github.