Join Scott Gardner for an in-depth discussion in this video Auto Layout, part of iOS UI Development with Visual Tools.
- View Offline
- Auto layout was first introduced for Mac in 2011 and then it was brought over to iOS the following year. It was a complete replacement to the springs and struts approach, providing a more dynamic way to layout more complex user interfaces. Instead of laying out views solely by individually defining their frames and positions on screen, auto layout looks at the relationships between attributes of views, such as their edges or widths and heights and defines equations, which are called constraints, that determine how they should be laid out. That's not to say that you can't explicitly set a view size.
It's just that you don't have to. The result is a highly flexible user interface design that looks great on a wide variety of screen sizes and orientations, and unlike springs and struts, which primarily only dealt with how views should be sized based on external changes, such as rotation, auto layout provides a way to handle internal changes too, such as the text of a label changing, and one of the greatest things about auto layout is you can use it to design and layout most user interfaces almost, if not completely, in a visual manner.
You can also implement auto layout partially, or even entirely in code, although once again, you don't have to. I mentioned a moment ago that auto layout constraints define the relationships for attributes of one or more views. For a view within its superview, constraints define distances from the views leading, trailing, top, and bottom edges to its superview, width and height, horizontal and vertical centers within its superview, and a baseline, such as for aligning text-based views. In auto layout, all views must have enough constraints so that the rendering engine can calculate one and only one solution to layout each view.
When this is the case, the layout is said to be nonambiguous and satisfiable. In this example, the views leading and top edge's distance to the superview's top edge and its width and height are set, and that's enough for the rendering engine to lay things out, but if you take away the top edge constraint, for example, the rendering engine does not know where to layout the view vertically. There are lots of possibilities and this is called an ambiguous layout. On the other hand, and I'll put back that top edge constraint, if two or more constraints contradict each other, for example, if I add two left edge constraints that set the distance to its superview's left edge to different values, I have an unsatisfiable layout.
It's impossible to satisfy both the left edge distance constraints of 60 and 100 at the same time in this example. One last point to make, constraints can be created between any two views that share a common ancestor. In other words, within a single storyboard scene, where I might have several views nested inside one another, like the lower green one here, I can, for example, create a constraint between it and the above green view, such as to set equal widths. This works because they both share the main view, the white view, however, if you have more than one storyboard scene, it is not possible to create constraints between views in separate scenes because they do not share a common ancestor.
Auto layout provides a way to layout dynamic and flexible user interfaces. With this introduction, I can now go over how to create and work with auto layout constraints in Interface Builder.
Here iOS app architect Scott Gardner explains how to create designable views and dynamic and adaptive user interfaces for any screen size or orientation. He shows how to work with stack views, images, custom fonts, and Interface Builder's Auto Layout tools, which speed up your design process and help adhere to Apple's interface guidelines. Along the way, he provides best practices for designing interfaces that are clean, efficient, and enjoyable for users.
- Creating and customizing views
- Laying out a user interface
- Working with dynamic Auto Layout designs
- Stacking views
- Creating an adaptive layout
- Handling orientation changes
- Working with images
- Customizing fonts