If you are a new visitor to our site, please read the Getting Started guide.
Say you wanted to display a navigation bar on your app’s user interfaces. Well, you’d have to create and initialize a navigationController property in the AppDelegate then configure each user interface’s navigation bar.
Navigation Controller
A Navigation Controller is a special kind of container that maintains a stack of view controllers and their corresponding views. You use methods of the navigation controller object to modify the stack at runtime. The most common operation is to push a new view controller onto the stack by using the pushViewController:animated: method. Pushing a new view controller object onto the stack causes the view of that view controller to be displayed and the navigation controls to be updated to reflect the change. You typically push a view controller on the stack in response to the user tapping a button on the navigation bar.
In addition to pushing a view controller onto the navigation stack, you can also pop it using the popViewControllerAnimated: method. Although you can pop a view controller yourself, the navigation controller provides a back button (when appropriate) that pop the top view controller in response to user interactions. The movement of the rootViewController is indicated by green arrows in the diagram below.
|
What is a Stack?In order to learn how to use the navigation controller, you’ll have to first download this Xcode project. After unzipping it, drop the folder in the iOS Apps folder on your computer.
Now, launch the NavigationBarDemo project, then click the AppDelegate.h file to open it in the code editor. Next, add this statement above the @end keyword.
@property (strong, nonatomic) UINavigationController *navigationController;
Switch to the AppDelegate.m file and add highlighted code in the didFinishLaunchingWithOptions method.
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
// Override point for customization after application launch.
self.viewController = [[ViewController alloc] initWithNibName:@"ViewController" bundle:nil];
self.navigationController = [[UINavigationController alloc] initWithRootViewController:self.viewController];
self.window.rootViewController = self.navigationController;
[self.window makeKeyAndVisible];
return YES
}
When you run the application, you’ll see a blank navigation bar below the status bar. If you were to add more class and nib files in the project, the blank navigation bar will automatically show up below their status bars as well.
Set The Navigation Bar Title Attribute
Ok, you need to add this code in the ViewController.m file’s viewDidLoad method to set the navigation bar’s title attribute to display text you see in the image below.
| Code | Output |
|---|---|
- (void)viewDidLoad
{
[super viewDidLoad];
self.title = @"Master";
}
|
 |
Add a Button on The Navigation Bar
There are two ways you can add a button on the navigation bar; further more, you can add the button on the left side of the navigation bar or the right side of the navigation bar. In code, these buttons are called, LeftBarButtonItem and RightBarButtonItem.
Method 1: Add a Bar Button Item on the navigation bar via Interface Builder
You add a Bar Button Item on the navigation bar via Interface Builder by executing these steps.
1. Click the ViewController.xib file to open it in Interface Builder. Next, enter UIBar in the Utilities panel’s box. Your screen should look like this:
2. Drag and drop the Bar Button Item control on the view’s Dock, then change the button’s Identifier attribute to Add. Your screen should now look like this:
3. Switch to the ViewController.h file and add these comments and statements.
#import <UIKit/UIKit.h> @interface ViewController : UIViewController // Declares a property for connecting the Bar Button Item you placed on the view's Dock @property (strong, nonatomic) IBOutlet UIBarButtonItem *addButton; // This method is fired when the user tap the Navigation Bar's + button - (IBAction)addButtonClicked; @end
4. Switch to the ViewController.m file and add this statement in the viewDidLoad method. This statement is responsible for making the + button appear on the right side of the navigation bar.
self.navigationItem.rightBarButtonItem = self.addButton;
5. Scroll to the end of the file and add this code which implements the navigation bar’s (+) button method. Add code shown below just above the @end keyword. The single statement in the method a function that display a text message: Add button tapped, in the Debugger window.
- (IBAction)addButtonClicked {
NSLog(@"Add button tapped");
}
6. After entering above code, connect the IBOutlet property, addButton and the IBAction method, addButtonClicked in Interface Builder.
Run The Application
Run the application and the root view controller’s view (MasterViewController.xib) is shown in the iPhone Simulator window. Tap the navigation bar’s + button to see the NSLog’s message in the Debugger window.
Method 2: Add a Bar Button Item on the navigation bar via code
In this section I will walk you through the process of adding a button on left side of the navigation bar and connecting using only code.
1. Start by entering highlighted code shown below in the ViewController.m file.
#import "ViewController.h"
#import "SecondViewController.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
self.title = @"Master View";
// This statement display the Add button on the right side of the navigation bar
self.navigationItem.rightBarButtonItem = self.addButton;
// This statement create, connect, and display an Edit button on the left side of the navigation bar
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc]
initWithTitle:@"Edit"
style:UIBarButtonItemStyleBordered
target:self action:@selector(editButtonTapped)];
}
2. Next, add this code in the file. It is the Edit button’s method, which is fired when you click the navigation bar’s Edit button.
- (IBAction)editButtonTapped {
NSLog(@"The Edit button tapped");
}
Run The Application
When you are done entering above code, run the application. As you can see, the Edit button is displayed in the left side of the navigation bar. When you click it, the NSLog() message you entered in the button’s editButtonTapped method is displayed in the Debugger window.
Push a View Controller on The Stack
In order to see how a second view is pushed on the navigation controller stack, replace the addButtonClicked method’s code with this one:
- (IBAction)addButtonClicked {
// Create and initialize a viewController object
SecondViewController *controller = [[SecondViewController alloc] initWithNibName:@"SecondViewController" bundle:nil];
// Push the second view controller on the navigation controller stack
[self.navigationController pushViewController:controller animated:YES];
}
You need to add a second view controller and view in the project. Just follow instruction shown in these images.
 |
 |
 |
 |
 |
|
After adding the SecondViewController and view in the project, add this statement in the SecondViewController.m file’s viewDidLoad method.
self.title = @"Second View";
Run the application, then click the Edit button. The SecondViewController’s view is shown in the iPhone Simulator window.
This concludes the workshop on displaying a navigation bar on your app’s user interfaces.