Navigation

 Modified: 

Disclosure

ColorViewController example adapted from The iPhone Developers Cookbook by Erica Sadun, ISBN-10: 0-321-55545-7

Downloads

ColorViewController iPhone example

Video

Overview

Navigating multiple linearly-organized ViewControllers can be managed by the UINavigationController class.

The first example will navigate between three different color UIViewController objects.

The basic approach of UINavigationController is to link UIViewControllers, pushing UIViewControllers to move down the linkage and popping to return to the previous.

Lime <--> Orange <--> Pink

ViewNavigation

As an example, create an iPhone Windows-based application named ViewNavigation.

Three files are created:

  1. main.m
  2. ViewNavigationAppDelegate.h
  3. ViewNavigationAppDelegate.m

To create a UINavigationController and add to the window, edit ViewNavigationAppDelegate.m adding:

UINavigationController *nav =
        [[UINavigationController alloc]
            initWithRootViewController:[[LimeController alloc] init]];
[window addSubview:nav.view];
ViewNavigationAppDelegate 
#import "ViewNavigationAppDelegate.h"
#import "ColorViewController.h"

@implementation ViewNavigationAppDelegate

@synthesize window;

- (void)applicationDidFinishLaunching:(UIApplication *)application {
UINavigationController *nav =
        [[UINavigationController alloc]
            initWithRootViewController:[[LimeController alloc] init]];
[window addSubview: nav.view];		 
        [window makeKeyAndVisible];
}

- (void)dealloc {
    [window release];
    [super dealloc];
}
@end
 

ColorViewController

Three UIViewController are defined in the following files.

ColorViewController.h defines the background color of each UIViewController.

Note the subclassing of LimeController.

ColorViewController.h
#define PINK [UIColor colorWithRed:0.925f green:0.0f blue:0.549f alpha:1.0f]
#define LIME [UIColor colorWithRed:0.82f green:1.0f blue:0.286f alpha:1.0f]
#define ORANGE [UIColor colorWithRed:1.0f green:0.522f blue:0.03f alpha:1.0f]

@interface LimeController: UIViewController
@end

@interface PinkController: LimeController
@end

@interface OrangeController: LimeController
@end


LimeController

Note that UIViewControllers display a view, such as an UIView.

Also, that for the sake of clarity, several objects are allocated but not released.

  1. loadView is called when the UIViewController is displayed
    1. creating and initializing a UIView that becomes the view displayed for the UIViewController,
    2. creating and initializing a UIBarButtonItem for display on the navigation bar of the UIView.
       
  2. switch is called when the UIBarButtonItem is pressed
    1. creating and initializing the next UIViewController
    2. pushing the UIViewController to the UINavigationController
    3. [self navigationController] returns the UINavigationController of the window.
ColorViewController.m 
#import "ColorViewController.h"

@implementation LimeController
- (id) init {
	if (self = [super init]) self.title = @"Lime";
	return self;
}

- (void)loadView {
   UIView *contentView = [[UIView alloc] init];
   contentView.backgroundColor = LIME;
   self.view = contentView;
   [contentView release];
   self.navigationItem.rightBarButtonItem =
       [[UIBarButtonItem alloc]
	initWithTitle:@"Orange" 
	style:UIBarButtonItemStylePlain 
	target:self 
	action:@selector(switch:)];
}

- (void) switch: (id) sender {
   [[self navigationController] pushViewController:
	[[OrangeController alloc] init] animated:YES];
}
@end





@implementation OrangeController
- (id) init{
	if (self = [super init]) self.title = @"Orange";
	return self;
}

- (void) loadView {
   UIView *contentView = [[UIView alloc] init];
   contentView.backgroundColor = ORANGE;
   self.view = contentView;
   [contentView release];

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

- (void) switch: (id) sender {
   [[self navigationController] pushViewController:
	[[PinkController alloc] init] animated:YES];
}
@end

@implementation PinkController
- (id) init
{
	if (self = [super init]) self.title = @"Pink";
	return self;
}

- (void) loadView
{
   UIView *contentView = [[UIView alloc] init];
   contentView.backgroundColor = PINK;
   self.view = contentView;
   [contentView release];
}
@end

Creating UIViewController Using IB

The hand-coded UIViewControllers above don't do much, using IB to create more UI functionality may be preferable.

We will create another UIViewController and add at the head of the UINavigationController links, in front of the LimeController:

  1. In Xcode, select Classes
  2. Add | New File
  3. Cocoa Touch Class | UIViewController | Check With XIB
  4. Name the new class MyUI

Adding the UI in IB

  1. Double-click MyUI.xib to open IB
  2. Add a label and change to MyUI
  3. Save

Edit MyUI.m to link to the LimeController. Note -viewDidLoad used to initialize the navigation bar.

Edit ViewNavigationAppDelegate.m to use MyUI as the root view controller.

#import "MyUI.h"
#import "ColorViewController.h"

@implementation MyUI

- (id) init {
	if (self = [super init]) self.title = @"MyUI";
	return self;
}

- (void)viewDidLoad  {
   self.navigationItem.rightBarButtonItem = 
       	[[UIBarButtonItem alloc] initWithTitle:@"Lime" 
	style:UIBarButtonItemStylePlain 
	target:self 
	action:@selector(switch:)];
}

- (void) switch: (id) sender  {
	[[self navigationController] pushViewController:
                [[LimeController alloc] init] animated:YES];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
}

- (void)viewDidUnload {}

- (void)dealloc {
    [super dealloc];
}
@end

#import "ViewNavigationAppDelegate.h"
#import "MyUI.h"

@implementation ViewNavigationAppDelegate

@synthesize window;

- (void)applicationDidFinishLaunching:(UIApplication *)app {    
     UINavigationController *nav = 
             [[UINavigationController alloc] 
                   initWithRootViewController:[[MyUI alloc] init]];
    [window addSubview: nav.view];
    [window makeKeyAndVisible];
}

- (void)dealloc {
    [window release];
    [super dealloc];
}
@end