Getting started with iPhone development: Learning how to use the Interface Builder

Over the past couple of months, I’ve found myself diving into the land of iPhone development. I’m doing it mostly just for fun and for the learning experience, but who knows, maybe I’ll even make a few bucks in the process.

One of the first things that you need to figure out when learning to develop for the iPhone is the Interface Builder. If you already have experience developing applications for the Mac, then you’re probably already pretty familiar with it. But for someone like me, coming from a mostly .NET background (otherwise known as the land of milk and honey), the Interface Builder comes with a somewhat steep learning curve. It’s not quite as intuitive as building an interface in .NET, but once you’ve figured out the basics of how it’s meant to work, it’s not too bad.

The application that I’m going to use to demonstrate the use of the Interface Builder is a free app that I’m putting together for one of my Twitter-friends @jmproffitt, who works for a public radio station here in Anchorage. There are plenty of streaming radio apps out there for the iPhone, but he thought it would be neat if they could have their own dedicated player, and I thought it sounded like a fun project to work on.

Getting started: Defining our interface fields and actions

First thing’s first: create a new project in Xcode. When prompted to select the type of project you want to create, select the View-based application. This will create a new project with a view controller and a nib file that contains the view that we will build in the Interface Builder. One kind of quirky thing about the Interface Builder is that we must first declare in the view controller any fields and event handlers (called actions) that we are going to want to hook the interface up to. This was a pretty big change for me coming from .NET, where the fields are automatically created for you in the code when you add controls to the interface.

This is a pretty simple app in terms of the interface; the only control that we need to hook up to the code is a button that will handle the play/pause functionality. I added the following declarations to my view controller:

@interface KSKARadioViewController : UIViewController {
	IBOutlet UIButton *playButton;
}

- (IBAction) playButtonPressed:(id)sender;

One important thing to notice here is that it’s not enough to simply declare these fields in order for them to be available in the Interface Builder – we must also prefix them with IBOutlet for a control declaration, and IBAction for an event handler (the IB part stands for Interface Builder).

Hooking our control up to the application’s interface

Now we’re ready to hook up our field and action declarations to the application’s interface. In Xcode, double-click on the view controller’s nib file (in my case it’s named KSKARadioViewController.xib). The first thing you have to do is connect the nib file to the correct view controller. To do this, control-click the File’s Owner, and drag it over the the View. A small window will open titled “Outlets” that should contain just one item – view. After selecting view, the interface will be able to see the fields we declared earlier in the view controller.

The next thing I did was add the radio station’s logo to the top of the interface by dragging the image from the media library onto the interface. Since we don’t need to access this image from the code, we don’t need to declare a field for it in the view controller – we can just add it to the interface and be done with it.

Note: before using an image in the Interface Builder, it must first be added to your project from Xcode.

Next, I added a button by clicking and dragging the Round Rectangle Button from the control library onto the interface. In the button’s properties, I changed the type to “Custom”, and then dragged a play button image from the media library onto the button to be used as the button’s image. I also had to change the size of the button to match that of the image – 64px square in this case.

We want to be able to react whenever this button is pressed, so we need to tie the “Touch Up Inside” action to our playButtonPressed event handler declared in the view controller. To do this, simply control-click on the play button in the interface, and drag it over to the File’s Owner. You’ll see a small window popup listing the name of the event handler; click it to connect the “Touch Up Inside” action to the event handler. Now, whenever the user touches the play button, the playButtonPressed event handler will be called.

When the play button is clicked, we want to switch out the image to a pause button to make the interface a bit more intuitive and consistent with what user’s are used to seeing in other apps like iTunes. In order to do this, we need to connect the play button on the interface with the button field we declared back in the view controller. With the play button selected, go to “Button Connections”, and at the bottom under “Referencing Outlets”, click the circle next to “New Referencing Outlet” and drag it over to the File’s Owner. The same little window as before will appear, listing the available fields. Select playButton to connect it to the field we declared in the view controller.

We’re now done hooking the interface up to the fields in our view controller. I’m not going to go into the details of how I actually implemented the streaming radio player, since that’s really not the purpose of this post. For now, I just wanted to demonstrate using the Interface Builder by building a simple interface with only a single button.

Summary

Is it just me, or does it seem like there are a lot of steps involved for such a simple interface? Using the iPhone Interface Builder is definitely more involved than something like the .NET designer. But once you get the hang of what’s going on, and understand the steps involved, it’s really not too difficult.

Hopefully this little tutorial will be able to save at least one other budding iPhone developer from some of the same headaches I encountered when first trying to figure out how to use the Interface Builder.

Tagged as: interface builder, iphone, objective-c