How to Add Buttons to Your iOS App Navigation Bar

&c=” border=”0″ alt=”” />

Advertise here via BSA

It’s an obvious design pattern amongst iOS apps to include buttons within a navigation bar at the bottom of the screen. This is done because it is unobtrusive and makes good use of space that would otherwise be wasted. The beauty of including a button within the navigation bar means that you’re able to perform essentially anything you want without using up space from the main interface of your application. Another good use is that if you need a button to remain present throughout your application and you don’t want to have to implement it within each and every view you push, you can simply stick the button within the navigation bar and let the app do whatever.

For this tutorial, we’ll be adding a UIBarButtonItem to a UINavigationController. Don’t worry if you’re not sure how to set these up — I’ll go through them in this tutorial and to conclude I’ll also give you a heads up on how to include your own custom buttons within the navigation bar.

Setting Up the Project

1. First, we need to sort out the project and get everything ready and set up so we can add our button to the navigation bar. As mentioned above, we’ll be using a UINavigationController as this is the most common way to load new views; you can of course simply drag a UIButton to a UINavigationBar, but this isn’t the best practice, especially if you plan on loading numerous views.

2. To begin, open up Xcode, create a New Project (File – New – Project) and for this article, I’ll just use Xcode’s ‘Tabbed Application’ project template. Select it and press Next. Give your app an appropriate name, keep the bundle identifier the same, leave Class Prefix blank, choose iPhone as the device family and make sure all the check boxes are not checked and press Next and save in your desired location.

Screen Shot 2012-06-21 at 23.31.30

3. Once you’ve set up your project, you can launch your application by pressing Run (Cmd + R) and Xcode has conveniently set up a tab bar application that relies on two UIViewControllers.

Screen Shot 2012-06-21 at 23.32.56

4. Quit the iPhone Simulator and go back to Xcode and open up AppDelegate.m. You’ll see the following line of default code:

UIViewController *viewController1 = [[[FirstViewController alloc] initWithNibName:@"FirstViewController" bundle:nil] autorelease];

5. This is Xcode initializing a UIViewController instance (an instance of FirstViewController). We do want to load this view controller but once we’ve loaded it, we want to put it inside a navigation controller so immediately underneath the above line of code. Add the following:

UINavigationController *navigationController1 = [[UINavigationController alloc] initWithRootViewController:viewController1];

Here, we’re initializing a UINavigationController and adding viewController1 that we created earlier to it.

6. Once we’ve got both the navigation controller and the view controller all tied together, we need to actually make the application load navigationController1 instead of viewController1 (remember, viewController1 is contained within navigationController1) so change the line:

self.tabBarController.viewControllers = [NSArray arrayWithObjects:viewController1, viewController2, nil];

To the following:

self.tabBarController.viewControllers = [NSArray arrayWithObjects:navigationController1, viewController2, nil];

7. Now, if you were to run your application, you’ll notice that you now have a wonderful navigation bar at the top of the interface, this is the navigation controller we just created.

Screen Shot 2012-06-21 at 23.38.39

Screen Shot 2012-06-21 at 23.38.46

8. Now, in the Project Navigator (the sidebar on the left of Xcode), open up FirstViewController.xib — this is the graphical representation of the our interface and we can add objects and whatnot to it without having to code a single thing. However, we’re going to add a ‘fake’ navigation bar to the interface so we know the constraints we now have similar to the tab bar at the bottom. To do this, in the right-hand side bar with the view selected, change top bar to from ’None’ to ‘Navigation Bar’ and you’ll see that the bar is added to your interface — again, this isn’t the actual navigation bar, just something that shows you where the navigation bar will be for convenience when you’re laying out your interface.

Screen Shot 2012-06-21 at 23.47.39

Adding a UIBarButton

So far, we’ve made a tab bar application, created a UINavigationController and placed a UIViewController within it. Now we’re going to add the button to the navigation bar and make the button perform a method of some sort. For this tutorial, we’ll just display some text within the Console but feel free to use any method you can think of and play around with it.

1. Select FirstViewController.m from the Project Navigator and within the -(void)viewDidLoad, add the following code:

self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemBookmarks target:self action:@selector(print_Message)];

Add this code below [super viewDidLoad]; Here what we’re doing is adding a UIBarButton to the UINavigationBar within the UINavigationController we created earlier and we’re also saying that we’re going call the print_Message method when the button is tapped.

2. Now that we’ve added that, we need to actually write what print_Message does. To do this, underneath the closing curly brace of -(void)viewDidLoad, add the following:

-(void)print_Message {
NSLog(@"Eh up, someone just pressed the button!");

3. Here, we’re creating a new method and this will be run each time the user presses the button in the navigation bar and then we use NSLog to display a message within the console. In this case the message is “Eh up, someone just pressed the button!”, feel free to add your own functions and whatnot here.

4. Now, if you were to run your application, you’ll see that not only does the button appear in the navigation but the text is printed within the Console when you tap the button.

Screen Shot 2012-06-22 at 00.03.21

Customizing the Button

Having a button run a method is great but wouldn’t it be better to change the colour of the button depending on the colour of the navigation bar or better yet, change the actual icon of the button?

1. First, we’ll change the button’s icon — to change the icon, we’re going to have to edit the declaration code within viewDidLoad and change UIBarButtonSystemItemBookmarks to something else, for example: UIBarButtonSystemItemAdd. This changes the icon from a bookmark icon to a ‘+’ sign — you can play around with the different buttons and also mess around with autocomplete in Xcode and see what you can find.

2. Next, we’ll change the colour of the button in relation to the navigation bar. For this we’re going to change the bar’s background colour. To do this open AppDelegate.h and just under the declaration we wrote earlier creating the navigation controller, add the following code:

navigationController1.navigationBar.tintColor = [[UIColor alloc] initWithRed:24.0 / 255 green:40.0 / 255 blue:71.0 / 255 alpha:1.0];

3. Again, feel free to toy around with the values, but now if you run the app, you’ll see you have your new icon along with the change of background. Nice!

Click here to download the source files.

Screen Shot 2012-06-22 at 00.09.03

Fuel Your Coding

Leave a Comment