Learn Objective-C on the Mac - Mark Dalrymple [38]
Repeat those steps for the mugshot, once again deleting the existing label first, then creating the box via the menu, and finishing up by setting the box’s label to “Appearance.”
Now move on to the powers and abilities. Select the popup button and its label, along with the matrix of checkboxes. Once again, the easiest way to do this is probably to “draw a box” by clicking in the background near the window’s top-right corner, and dragging down and to the left until all the relevant items are selected. Use the menu to put these views in a box, and title the box “Powers and Abilities.”
Finally, select the text view created for the villain’s notes property, and put that into a box of its own, entitled “Notes.”
Now you’ve got a bunch of boxes created, but they’re probably overlapping and generally not very well laid out relative to each other, like you see in Figure 4-12.
Figure 4-12. Not the prettiest box layout you’ve ever seen
Don’t worry, Interface Builder’s blue guidelines will help us get this straightened out in no time. Start with the first box, in the upper left-hand corner. Click anywhere in the dark background of the box (but not on a control or label) and you will be able to start dragging the entire box. As you move it around a bit, you’ll see the blue guidelines appear. The guidelines can help you position views relative to one another, or relative to the window itself. You can always tell what a guideline is lining up with by following it to its end, and seeing what it connects with. When it runs all the way to the edge of the window, then you know it’s setting you up for the recommended distance from the window’s edge.
Now move on to the Primary Motivation box, lining it up with the left edge of the box above it, and a few pixels below it, again using the guidelines to help get it just right. Then take the Appearance box and line it up with the vertically with the Primary Motivation box, and horizontally with the right edge of the Basic Information box.
Continue with the other boxes, lining up the Powers and Abilities box to the right of the ones you’ve already done, then the Notes box below everything else. If you run out of space during all this movement, or if your window is much larger than the combined size of all your other views, resize your window a bit in order to fit everything.
Finish this step by resizing the width of the Notes box to match the combined widths of the elements above it, and resizing the NSTextView inside of it to fit its new boundaries and margins, and perhaps tweaking the sizes of some of the other boxes to make them all fit together in a uniform way. Figure 4-13 shows the kind of result you should be aiming for.
Figure 4-13. Finally, a window layout to be proud of!
Resizing
We’ve got a nice-looking window now, but there’s a bit more work to be done here to make everything behave properly when the user resizes a window. Interface Builder lets you specify each view’s resizing behavior relative to its enclosing view, which means that if the size of a view’s parent view changes, you can specify that the inner view should resize proportionately (or not), have fixed distances to one or more edges (or not), and so on.
To understand why that’s even necessary, test your interface in Interface Builder by pressing ⌘R. Now resize the window and see what happens. Oops! No matter how you resize the window, all the views seem to be “stuck” to the bottom left-hand corner.
In order to fix things, we need to make a few changes. We’ll specify a minimum window size, we’ll configure most of our boxes to stick to the top edge of the window instead of the bottom, and we’ll configure the text view to resize itself along with the window, because it’s the only view we have here that can actually benefit from additional screen real estate.
First, let’s constrain the size of the window