Beginning Auto Layout in iOS 6: Part 1/2

It takes two to tango

Guides do not appear only between a view and its superview, but also between views on the same level of the view hierarchy. To demonstrate this, drag a new round rectangular button onto the canvas.

If you put it far enough away from the other button, then this new button gets its own constraints. However, if you drag them close to each other, then their constraints start to interact.

Put the new button next to the existing one so that it snaps into place:

There are quite a few dotted guidelines here, but Interface Builder doesn’t turn them all into constraints; that would be a bit much. It basically recognizes that these two buttons can align in different ways – at their tops, centers and baselines.

After dropping the button in place, the constraints look like this:

The new button has a Vertical Space to the bottom of the screen, but also a Horizontal Space that links it with the other button. Because this space is small (only 8 points), the T-bar may be a bit hard to see, but it is definitely there.

Click on the Horizontal Space constraint in the Document Outline to select it:

When you select a constraint, it lights up the controls it belongs to. This particular constraint sits between the two buttons. What you’ve done here is say:

“The second button always appears on the right of the first one, no matter where the first button is positioned or how big it is.”

Select the button on the left and type something long into its label like “A longer label”. When you’re done, the button resizes to make room for the new text, and the other button shifts out of the way. After all, it is attached to the first button’s right edge, so that is exactly what you intended to happen:

Notice that Interface Builder replaced the Center X Alignment on the first button with a Horizontal Space again. Every time you make a change to the size (or position) of your controls, Interface Builder will recalculate a set of constraints that it thinks are optimal. Often it does the right thing, but sometimes it completely misses the boat. Obviously you just wanted to change the text in the button but keep it centered here.

Drag the button back so that it is centered again. Take a look at the constraints now:

That is probably not what you wanted to happen. The two buttons are no longer connected to each other. Instead, the rightmost button now has a Horizontal Space to the right edge of the screen. There is no longer a Horizontal Space constraint between them.

Of course, you can reconnect these two buttons by snapping them together again, but this problem could have been avoided by not dragging views around.

First, press Cmd-Z to undo, so that the first button is no longer center-aligned. Now select that button and from the Editor menu select Align\Horizontal Center in Container. This time not only the first button moves to the center – the other button moves along with it. That is more like it!

Just to get a better feel for how this works, play with this some more. Select the smaller button and put it above the other one, so that they snap into place vertically (but don’t try to align the left edges of the two buttons):

Because you snapped the two buttons together, there is now a Vertical Space between them. Again it has the standard spacing of 8 points that is recommended by the HIG.

Note: The “HIG”, which is short for iOS Human Interface Guidelines, contains Apple’s recommendations for designing good user interfaces. It is mandatory reading for any iOS developer. The HIG explains which UI elements are appropriate to use under which circumstances, and best practices for using them. You can find this document here.

You are not limited to standard spacing between controls, though. Constraints are full-fledged objects, just like views, and therefore have attributes that you can change.

Select the Vertical Space constraint between the two buttons. You can do this in the canvas by clicking the T-bar, although that tends to be a bit finicky. By far the easiest method is to click on the constraint in the Document Outline. Once you have it selected, switch to the Attributes inspector:

By default the Standard attribute is checked. For a space constraint between two objects this is 8 points; for a margin around the edges of the superview it is 20 points. Type 40 into the Constant field to change how big the constraint is. Now the two buttons will be further apart, but they are still connected:

Run the app and flip to landscape to see the effect:

The buttons certainly keep their vertical arrangement, but not their horizontal one!

If you look at the nib, you’ll see a Horizontal Space between the top button and the left edge of the canvas (at least if you placed the button roughly in the same spot that I did):

The bottom label is horizontally centered in the screen, but the top button isn’t – it always keeps the same distance from the left edge.

That doesn’t look very nice, so instead you are going to express the following intention:

“The bottom button will always be horizontally centered, and the top button will align its left edge with the left edge of the bottom button.”

You already have a constraint for the first condition, but not for the second.
Interface Builder shows guides for alignment, so you can drag the top button until its left edge snaps with the left edge of the bottom button:

Unfortunately, this also removes the Vertical Space between the two buttons (at least sometimes, depending on how things are dragged/placed). Interface Builder simply “forgets” it was there and replaces it with a Vertical Space to the bottom of the view:

That is not quite what you want. Instead, there should be a Vertical Space between these two buttons, not one that extends all the way to the window edge. Here’s a comic that shows how that might feel when this happens:

As I mentioned before, dragging around views is not a good idea if you want to keep your constraints intact. There is a better way to align these two buttons.

First, undo the change so that the top button moves back to its previous, unaligned position. Then hold down Cmd and click both buttons to select them. Now from the Editor menu, pick Align\Left Edges. This tells Interface Builder that you want to left-align these two controls, leaving the existing constraints intact:

As you can see, your previous constraints are still there – the Center X Alignment on the bottom button and the Vertical Space between the two buttons – while a new “Leading Alignment” constraint was added to keep the top button left-aligned with the bottom one.

Tip: You don’t always need to go to the Editor menu to pick an alignment option. Interface Builder has a shortcut menu in the bottom-right corner:

The left-most button opens the Align menu:

Because you’ll be using these options a lot, using the shortcut menu will save you some time.

Run the app and rotate to landscape to verify that it works: