3.
In the Help menu, change NewApplication Help to Currency Converter Help.
Aligning Objects in a Window
In order to make an attractive user interface, you must be able to visually align interface objects in rows and
columns. "Eyeballing" the alignments can be very difficult; and typing in x/y coordinates by hand is tedious
and time consuming. Aligning user interface elements is made even more difficult because the elements
have shadows and user interface guideline metrics do not typically take the shadows into account. Interface
Builder uses visual guides and layout rectangles to help you with object alignment.
In Cocoa, all drawing is done within the bounds of an object's frame. Because interface objects have shadows,
they do not visually align correctly if you align the edges of the frames. For example, Apple Human Interface
Guidelines says that a push button should be 20 pixels tall, but you actually need a frame of 32 pixels for both
the button and its shadow. The layout rectangle is what you must align. You can view the layout rectangles
of objects in Interface Builder using the Show Layout Rectangles command in the Layout menu.
Interface Builder gives you several ways to align objects in a window:
Dragging objects with the mouse in conjunction with the layout guides
Pressing the arrow keys (with the grid off, the selected objects move one pixel)
Using a reference object to put selected objects in rows and columns
Using the built-in alignment functions
Specifying origin points in the Size pane in the inspector
The Alignment submenu in the Layout menu provides various alignment commands and tools, including
the Alignment window, which contains controls you can use to perform common alignment operations.
Finalize the Window Size
The Currency Converter interface is almost complete. The finishing touch is to resize the window so that all
the user interface elements are centered and properly aligned to each edge. Currently, the objects are aligned
only to the top and right edges.
To finalize the Currency Converter window:
1.
Select the Amount in Other Currency text label and extend the selection (Shift-click) to include the other
two labels.
2.
Choose Layout > Size to Fit to resize all the labels to their minimum width.
3.
Choose Layout > Alignment > Align Right Edges.
4.
Drag the labels towards the left edge of the window, and release them when the layout guide appears.
5.
Select the three text fields and drag them to the left, again using the guides to help you find the proper
position.
6.
Shorten the horizontal separator and move the button into position again under the text fields.
36
Refining the Layout and View Functionality
2007-10-31 | © 2007 Apple Inc. All Rights Reserved.
CHAPTER 4
Defining the View: Building the User Interface