Version 2 (modified by mikel, 13 years ago) (diff)


Tighten Up the Window Layout

InterfaceBuilder provides layout tools with which you can easily clean up the layout of a UI window and ensure it conforms to Apple's user interface guidelines.

  1. Select the "Exchange Rate" text label. Then Shift-click the other two labels to include them in the selection (actually, it doesn't matter which label you select first).
  1. Choose "Layout" > "Size to Fit" to shrink the labels to the smallest sizes that still show all the text.
  1. Choose "Layout" > "Alignment" > "Align Right Edges" to line up the right sides of the labels.
  1. With all three labels still selected, drag them up and to the left. Release them when the blue guide lines show at the top and left side of the window.
  1. Now select all three text fields. You can click one of them, then Shift-click to add the others to the selection. Drag them up and left, toward the labels. Again, release them when the blue guide line appears to show you the proper distance from the labels. A guide line also appears to show you when the fields are vertically aligned with the center label.
  1. Next, grab the separator line and move it up and to the left. Release it when its left edge is aligned with the left edge of the bottom label, and its top is the recommended distance from the bottom label and its text field. Then drag the right end of the separator line to resize it until its right edge is aligned with the right edge of the bottom text field. Again, guide lines show when you have found the proper distances.
  1. Grab the button and move it up and left, again using the guide lines to help you find a good position.
  1. Finally, resize the window. When the blue guide lines appear on the right and bottom of the window, it's the right size for its contents.

Now your application window should look something like the one in the illustration:

Start Previous

Attachments (1)

Download all attachments as: .zip