You'll use Interface Builder to create your app's User Interface (or "UI"). It works in conjunction with Xcode; you design the interface in Interface Builder, then make connections to your project in Xcode.

Interface Builder creates a .xib file (formerly .nib), which is an XML document that describes your UI to Xcode.

To launch Interface Builder, click on a .xib file in your Xcode project's Groups & Files frame (they're in the Resources group). The "First" project only has one: MainWindow.xib. Double-click on it.

There are several windows in Interface Builder. The Document Window contains icons that represent different objects in your app. (Sometimes this window gets hidden behind your views and other windows; to bring it to the front, type ⌘0 ).

Interface Builder's Document Window:

MainWindow.xib will always have an icon representing the Window object. If you double-click on the Window icon, your app's window will pop to the front.

The other key parts of Interface Builder are the Inspector (⌘-shift-I, or look under the Tools menu) and the Library (⌘-shift-L). The Library contains standard UI objects (buttons, text fields, views) that you can drag into your window or view. Notice that when you click on a particular item in the library (for example, the Round Rect Button), the bottom frame of the Library window shows you its class name and a short description of what it does:

The class name will be important later because you have to create IBOutlets in your code for each UI item you add to your view.

Let's add some items to your First project. Be sure the Window view is open, then drag a UIButton and a UILabel from the Library to your app's window interface:

You'll notice the default button doesn't have any text on it, and the default label says "Label". You can double-click on the button or label to change the text, or you can use the Inspector.

The Inspector window shows information about the currently selected object. There are four tabs at the top of the Inspector window:

Icon	Shortcut	Description
	⌘1	Attributes - properties you can set on the object. This can often be things like background color, font color, transparency ("Alpha" value), and whether the object responds to touch events.
	⌘2	Connections shows any other objects this object points to, and which objects point to this object.
	⌘3	Size is the size and location (in X,Y coordinates) of the object on screen. (For UIWindow these values are not changeable.)
	⌘4	Identity shows the class the object belongs to.

Click on an item to select it, or use the tab key to switch between objects in your UI.

Inspector Window: Attributes

The Attributes tab allows you to configure different values on the selected object. For example, on the UIWindow object, you can adjust the background color and the color or visibility of the status bar:

Click on the UIButton object and look at the Attributes tab (⌘1). Set the button's text by typing "Hello" in the Title attribute field. Example

Next select the UILabel and drag its bounding box (the blue dots on the edges of the label) out to the left and right sides of the window. Then look at the Attributes tab and set the text to be centered (look for the "Alignment" control). Also try changing the font and text color. Clicking on the font name opens the Fonts window; change the font to Helvetica Bold 18pt. Example

Now you have a basic interface built. You can compile and run the program now (by switching back to Xcode and clicking "Build and Run" in the toolbar). When your app runs, you'll be able to see the button and label you added. However they won't actually do anything yet. In order for your program to respond to UI actions (like button clicks), you'll need to connect the UI elements to variables and method names in your Xcode project. We'll look at making connections next.

• Next:
• Interface Builder: Connecting Objects

Additional References

• Interface Builder User Guide

Top • Home • Contents