About Auto Layout and Layout Constraints

Use Auto Layout to define relationship constraints for your app’s user interface so that when one item changes its size or position, that item and its neighboring items adjust their sizes and positions appropriately. For example, you can center an image horizontally in a storyboard scene. As the user rotates the iOS device, the image remains horizontally centered in both landscape and portrait orientations of the device.

With Auto Layout constraints governing the layout, the items in your user interface automatically resize and reposition themselves whenever:

  • The user changes the screen orientation of an iOS device

  • The user resizes a window in a Mac app

  • Content dimensions change (for example, when the length of a text string changes in a label or button)

To add layout constraints, you commonly Control-drag between two items on the Interface Builder canvas or in the outline view, or you Control-drag within a single item. Interface Builder presents you with a list of appropriate constraints. Choose constraints from this list, as shown in the following screenshot. (Alternative methods for adding layout constraints are described in the related articles listed below.)

../art/AddingConstraint_2x.png../art/AddingConstraint_2x.png

Constraints are represented on the canvas by solid blue lines. If you select a constraint, such as by clicking it on the canvas or selecting it from the outline view, you can edit its definition in the Attributes inspector.

../art/select_constraint_outline_2x.png../art/select_constraint_outline_2x.png

The inspector presents the definition of a constraint as a mathematical relationship. In the screenshot above, for example, the Attributes inspector indicates that the button height (Button.Height) is equal to 38 points.

A constraint usually applies a relationship to two items. The relation can be equal, greater than or equal, or less than or equal. For example, a constraint might specify that the bottom of a superview (Superview.Bottom) should be at least 44 points away from the bottom of a button (Button.Bottom), as shown in the next screenshot.

../art/vertical_space_constraint_2x.png

Constraint attributes. Every constraint for an item includes an attribute that relates to the size or position of the item’s alignment rectangle. (Because the alignment rectangle is based on the presentation of the item’s content, Auto Layout uses the alignment rectangle instead of the item’s frame rectangle.) The attributes fall into three categories:

  • Horizontal positioning: Leading, Trailing, Left, Right and Center

  • Vertical positioning: Top, Bottom, Center, and Baseline

  • Size: Width, Height, and Aspect Ratio

Left refers to the left edge of an item’s alignment rectangle, Bottom refers to the bottom edge of an item’s alignment rectangle, Width refers to the width of an item’s alignment rectangle, and so forth. With constraints, you align these rectangles, define the space between them, and size them.

Leading refers to the edge of the alignment rectangle where words and sentences begin; Trailing refers to the edge where words and sentences end. For left-to-right languages such as English, Leading is the same as Left, whereas in a right-to-left environment such as Hebrew or Arabic, Leading is the same as Right. Similarly, Trailing is the same as Right for English, but Trailing is the same as Left for Hebrew and Arabic. You should use Leading and Trailing to make sure your interface is laid out appropriately in all languages, unless the horizontal position should remain fixed at left or right regardless of the language.

The Baseline attribute is available only for items that have baselines. Baseline refers to an invisible line, offset from the bottom of the alignment rectangle, along which glyphs of characters are laid out.

For a size attribute, you can specify a fixed number of points (such as a width of 80), a proportional relationship (for example, defining the width of one item to be twice the width of another), or an aspect ratio (for example, defining the width of an item to be twice its height).

Priorities. You can specify the degree of precedence Auto Layout uses to satisfy the constraint compared with other constraints in the superview. New constraints are created with a default priority of 1000, which makes them required. Generally, you won’t need to change the default priority. However, if you find constraints interacting in some unintended way, giving a lower priority to a less critical constraint may resolve the problem. Perhaps, for example, horizontally spaced controls become clipped when their container view becomes too narrow. By reducing the priority for the width of the controls or the priority for their horizontal spacing in this example, the container view can become narrow without clipping the controls.

When you create a project, Auto Layout is enabled by default. If you need to disable Auto Layout, choose View > Utilities > Show File Inspector and deselect the checkbox for Use Auto Layout.

Definitive Discussion