iOS AutoLayout Notes

To transition the application to support iOS 7, Apple recommends to use Auto Layout extensively in their iOS 7 Transition Guide.

Also at the recent time after about one year of creating intefaces completely programmatically, I again returned to using xibs to create TableViewCell layouts and other layouts rapidly. And now I definetely need to learn AutoLayout.

So I decided to learn the features of AutoLayout from Auto Layout Guide and here I’m going to post some notes, that I took for myself to remember what to do and remember features of AutoLayout.

Auto Layout is a system that lets you lay out your app’s user interface by creating a mathematical description of the relationships between the elements.

The fundamental building block in Auto Layout is the constraint. Constraints express rules for the layout of elements in your interface; for example, you can create a constraint that specifies an element’s width, or its horizontal distance from another element.

Constraints are cumulative, and do not override each other.

Rather than writing an omniscient controller that calculates where views need to go for a given geometry, views become more self-organizing. This approach reduces the complexity of controller logic, and makes it easier to redesign views without requiring corresponding changes to the layout code.

Leaf-level views such as buttons typically know more about what size they should be than does the code that is positioning them. This is communicated through the intrinsic content size, which tells the layout system that a view contains some content that it doesn’t natively understand, and indicates how large that content is, intrinsically.

The easiest way to add, edit, or remove constraints is to use the visual layout tools in Interface Builder. Creating a constraint is as simple as Control-dragging between two views, or to add multiple constraints at once, you simply use the various pop-up windows.

You can also add constraints using the Auto Layout menu, which resides on the Interface Builder canvas.

Align. Create alignment constraints, such as centering a view in its container, or aligning the left edges of two views.

Pin. Create spacing constraints, such as defining the height of a view, or specifying its horizontal distance from another view.

Issues. Resolve layout issues by adding or resetting constraints based on suggestions.

Resizing. Specify how resizing affects constraints.

If you need to add a large set of constraints to describe your interface layout and you don’t want to add constraints one at a time, choose Issues > Add Missing Constraints to add a nonambiguous set of constraints.

If you need to revert to a set of constraints without errors, or you just want to start over, choose Issues > Reset to Suggested Constraints to remove erroneous constraints and add a nonambiguous set of constraints.

Here is a link on how to work with AutoLayout programmatically. I don’t need it yet, but it seems to be as easy, as using Interface Builder for this task.

Leave a Reply

Your email address will not be published. Required fields are marked *