Beginner’s guide to add a toolbar to an iOS iPhone app with a Storyboard

I’ve been playing around with iPhone apps a little bit. I’m certainly no expert though, I’m still a beginner myself.

A basic task is to add a toolbar with buttons to your application using XCode.

Lots of samples online are using old versions of XCode. Allow me to demonstrate how to add a toolbar to an app, using XCode 4.2 with Storyboards.

Create a new Project

In Xcode, File -> New Project. Choose Single View Application. I named my application com.mattfrear.toolbars.

Add a toolbar

If you can’t see it, choose View -> Navigators -> Show Project Navigator.

If you can’t see it, choose View -> Utilities -> Show Object Library.

Open the MainStoryboard_iPhone.storyboard. Click on the View.

In the Object Library (which should be in a window at the bottom right of your screen), scroll to the bottom and choose Toolbar. Drag it onto the View. Your screen should look like this:

Screen Shot 2013-08-29 at 16.05.42

Wire up the button

Now we need to add some code which will be fired when the button is clicked.

Open ViewController.m. At the end of the file, before the last @end, paste the following:

-(IBAction) buttonClicked
{
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Hello world"
                                                    message:@"You clicked the button"
                                                   delegate:nil
                                          cancelButtonTitle:@"OK"
                                          otherButtonTitles:nil];
    [alert show];
}

This is the code which will execute when the button is clicked, and it will display a simple Hello World popup.

Our final step is to wire up the button to this method. To make this easier we can use the Assistant Editor.

In Xcode, go View -> Assistant Editors on Right. Then View -> Show Assistant Editor.

If your screen is small, you might want to go View -> Utilities -> Hide Utilities.

The Assistant Editor should have ViewController.h open. In the Assistant Editor toolbar at the top, it should say Automatic > ViewController.h > No Selection. In that toolbar, click on ViewController.h and choose ViewController.m from the dropdown.

Screen Shot 2013-08-29 at 16.30.55

In the main window, click on the toolbar we added to our View, then on our “Item” toolbar button. Now right click it to bring up the “Bar Button Item – Item” menu.
Under Sent Actions, next to selector there is a + button. Click that and then drag it to the buttonClicked method in ViewController.m.

Screen Shot 2013-08-29 at 16.34.40 (2)

Hooray! Now our toolbar button is wired up to the method. Let’s run our app to test it.

In XCode’s toolbar, next to the big Run and Stop button you should see a drop down. Choose iPhone Simulator, then click the Run button.

Screen Shot 2013-08-29 at 16.40.16

Woop!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s