Moving onto the Interface Builder

My student has been sick all week, so I haven't had an opportunity to continue on with lessons, which is great, since I didn't finish writing up all that he and I had talked about last time.

This time we'll talk about the Interface Builder (IB). The IB is an entirely separate application from Xcode and is used to visually create the user interface (whereas you would normally have to do it through code). The IB creates the .nib/.xib files mentioned last time and though IB is a separate app, you typically end up launching it by clicking on the .xib files that are in your Xcode project. In the case of a simple project, it's typically called MainWindow.xib.

Once in IB, you have four primary windows to worry about (sometimes more).

1) The nib list window -- this contains a summary of all the components of your UI.
2) Inspector window -- this contains the details of the particular component you're looking at. It has four tabs on it.
3) Library window -- this is were all the UI components come from.
4) The user interface window -- this is where you drag items from the library onto.

For the moment, I'm not going to go into intimate details. Each item will take a bit to get into. Try this, however. Drag some Library items (like buttons, labels, etc.) to the UI window. In particular, add a UIImageView item. Initially, it's a blank rectangle. But if you highlight the view and go into the Inspector window -> Attributes, you should see a drop down box called: Image.


You may not have anything listed in the drop down. In that case, return to Xcode and add a png or jpg file to your project (the Resources group is a nice place to put it), then relaunch IB. It should show up then. Select it from the list and you should then see the image in the UI window. You may need to play around with other attributes and the sizing of the window to get the image to look right.

If you go back to Xcode and run the app (assuming you created a basic Windows-based app), then image should show up. Fantastic!

Getting an image to display is trivial, as you can see. Adding buttons and labels is also quick and easy. However, getting them to respond to a user's touch is a different beast altogether. We will need to talk about IBOutlets and IBActions at that point, and those topics are for another day.