In Figures 2 and 3,
you’ve seen an empty view and a fully fleshed-out iPhone interface—but
how do we get from one to the other? In this section, we explore how
interfaces are created with Interface Builder. In other words, it’s
time for the fun stuff!
If you haven’t already,
open the EmptyView.xib file included in this hour’s Projects folder.
Use the Document window to open the empty view and prepare for adding
content.
The Objects Library
Everything that you add to a view comes from the IB Objects Library, shown in Figure 1.
You can open the Library from the menu bar by choosing Tools, Library
(Command+Shift+L). After the Library palette opens, click the Objects
button at the top of the window to focus on interface objects. When you
click an element in the Library, the bottom of the window refreshes to
show a description of how it can be used in the interface.
Did You Know?
Using the action (gear) menu
at the bottom of the Library, you can change the Library to show just
the icons, icons and names, or icons and full descriptions for each
object. You can even group items based on their purpose. If you know
the name of an object but can’t locate it in the list, use the Search
field to quickly find it.
The button bar and drop-down
menu at the top of the Library can be used to focus on specific parts
of the Library, or change how the information is organized. When
starting out, however, using the default settings should give you
everything you need for most application and interface design.
To add a object to the view, just click and drag from the Library to the view. For example, find the label object (UILabel) in the Library and drag it into the center of the view window. The label should appear in your view and read Label. Double-click the label and type Hello. The text will update, as shown in Figure 2, just as you would expect.
With that simple
action, you’ve almost entirely replicated the functionality implemented
by the code fragment earlier in the lesson. Try dragging other objects
from the Library into the view (buttons, text fields, and so on). With
few exceptions, the objects should appear and behave just the way you’d
expect.
To remove an object from the
view, click to select it, and then press the Delete key. You may also
use the options under the edit menu to copy and paste between views, or
duplicate an element several times within a view.
Layout Tools
Instead of relying on your
visual acuity to position objects in a view, Apple has included some
useful tools for fine-tuning your layout. If you’ve ever used a drawing
program like OmniGraffle or Adobe Illustrator, you’ll find many of
these familiar.
Guides
As you drag objects in a view, you’ll notice guides (shown in Figure 3)
appearing to help with the layout. These blue dotted lines will be
displayed to align objects along the margins of the view, to the
centers of other objects in the view, and to the baseline of the fonts
used in the labels and object titles.
As an added bonus, guides will
automatically appear to indicate the approximate spacing requirements
of Apple’s interface guidelines. If you’re not sure why it’s showing
you a particular margin guide, it’s likely that your object is in a
position that Interface Builder considers “appropriate” for something
of that type and size.
Did You Know?
You can manually add your own guides by choosing Layout, Add Horizontal Guide or by choosing Layout, Add Vertical Guide.
Selection Handles
In addition to the layout
guides, most objects include selection handles to stretch an object
either horizontally, vertically, or both. Using the small boxes that
appear alongside an object when it is selected, just click and drag to
change its size, as demonstrated using a button in Figure 4.
Note that some objects
will constrain how you can resize them; this preserves a level of
consistency within iPhone application interfaces.
Alignment
To quickly align several
objects within a view, select them by clicking and dragging a selection
rectangle around them or by holding down the Shift key, and then choose
Layout, Alignment and an appropriate alignment type from the menu.
For example, try dragging
several buttons into your view, placing them in a variety of different
positions. To align them based on their horizontal center (a line that
runs vertically through each button’s center), select the buttons, and
then choose Layout, Alignment, Align Horizontal Centers. Figure 5 shows the before and after results.
Did You Know?
To fine-tune an object’s
position within a view, select it, and then use the arrow keys to
position it left, right, up, or down, 1 pixel at a time.
The Size Inspector
Another tool that you may
want to use for controlling your layout is the Size Inspector.
Interface Builder has a number of “inspectors” for examining the
attributes of an object. As the name implies, the Size Inspector
provides information about sizes, but also position and alignment. To
open the Size Inspector, first select the object (or objects) that you
want to work with, and then press Command+3 or choose Tools, Size
Inspector (see Figure 6).
Using the fields at the top of
the inspector, you can view or change the size and position of the
object by changing the coordinates in the H/W and X/Y fields. You can
also view the coordinates of a specific portion of an object by
clicking one of the black dots in the size and grid to indicate where
the reading should come from.
By the Way
Within the Size and
Position settings, you’ll notice a drop-down menu where you can choose
between Frame and Layout. These two settings will usually be very
similar, but there is a slight difference. The frame values represent
the exact area an object occupies onscreen, whereas the layout values
take into account spacing around the object.
The Autosizing settings of
the Size Inspector determine how controls resize/reposition themselves
when the iPhone changes orientation.
Finally, the same controls
found under Layout, Alignment can be accessed as clickable icons at the
bottom of the inspector. Choose your objects, and then click one of the
icons to align according to the red line.
