About Cocoa Auto Layout
You use the Cocoa Auto Layout system to define layout constraints for user interface elements. Constraints represent relationships between user interface elements such as “these views line up head to tail,” or “this button should move with this split view subview.” When laying out the user interface, a constraint satisfaction system arranges the elements in a way that most closely meets the constraints.
At a Glance
Cocoa Auto Layout lets you define rules for the layout of elements in your user interface. For example, you might want to specify that a text label should be anchored the appropriate distance (as defined by Aqua guidelines) from the sides of its window and an adjacent text field, and that the label should occupy just as much area as required by the string. Such a scenario is illustrated in the window on the left in the following diagram.
Cocoa Auto Layout allows individual views to declare their own preferred size, which means you don’t have to specify new layout if the label’s text changes—for example, because of localization, as illustrated in the right window. You don’t even have to specify new layout for languages like Hebrew and Arabic in which the left to right ordering of elements themselves should generally be reversed.
Cocoa Auto Layout thus improves the traditional division of responsibility between controllers and views. Rather than you writing a monolithic, omniscient controller that calculates where views need to go for a given geometry, views use constraints to declare where they want to be. Constraints represent relationships between user interface elements such as “these views line up head to tail,” or “this button should move with this split view subview.” Constraints themselves are objects—instances of NSLayoutConstraint—that you install on views.
For more about how you architect your application to use the Auto Layout system, see “Dividing Responsibility Between Controllers and Views.”
Typically, you specify the constraints in Interface Builder. Suppose you drag a text field out of the library, snap it into the bottom left corner of a window, then drag-resize the right edge until it snaps into the bottom right corner. Nothing further is needed to specify that when the window is resized the text field should stretch horizontally. If you need to create constraints programmatically, you typically do so using an ASCII-art inspired format string. For example, you could create a constraint to keep two buttons the standard Aqua spacing apart using a format string like this: [button1]-[button2].
For more about constraints and how to create and use them, see “Constraints Express Relationships Between Views.”
Cocoa Auto Layout offers several features that can help you find problems if your views are not positioned as you expected. In particular, Auto Layout provides a runtime visualization.
For more about diagnosing problems with constraints, see “Debugging.”
To determine the position of views, Auto Layout adds two passes to the process of rendering a window (in addition to the “display” pass Cocoa had previously used). In some situations, you may take advantage of these passes to perform custom layout of your own or to force re-layout of the user interface.
For more about the the Auto Layout engine, see “Core Layout Runtime.”
The design of the Auto Layout architecture makes it fairly straightforward to incrementally move a project that uses the springs and struts model for user interface layout to use the Auto Layout system. By default the Auto Layout system translates old-style autosizing masks into constraints to provide compatibility.
For more about converting an existing project, see “Adopting Auto Layout.”
There are several code examples that illustrate how you can use the Auto Layout system—see Cocoa Autolayout Demos.
The following WWDC videos provide another introduction to auto layout as well as example layouts:
© 2012 Apple Inc. All Rights Reserved. (Last updated: 2012-09-19)