Ben is a Software Developer and Interaction Designer with a passion for making highly interactive, well designed and useful pieces of software. He works with the team at Shiny Things making educational apps for kids.
This tutorial assumes that you’ve used Xcode before and are familiar with Interface Builder, but not with Auto Layout tools in Xcode.
At WWDC 2012 Apple introduced a new system for laying out interfaces. Auto Layout is an incredibly capable layout engine perfect for applications. While a little strange to understand at first, once mastered it allows for much more fluid layouts with significantly less (or perhaps no) layout logic in code.
Since 2012, Auto Layout has featured again and again, with considerable tool improvements. Suggesting that Auto Layout (and now Size Classes) is Apple’s solution for multi-resolution support.
In Auto Layout, rather than setting the position and size of a view you create constraints between views. These are used to calculate each view’s position and dimensions. For example you may think about positioning an element by using:
myViewis at position
(x: 20, y: 40)with dimensions
(w: 400, h: 100)
In Auto Layout something this would be said as:
leading edgematches its
superview’s offset by 20pt
top spacematches its
superview’s offset by 40pt
widthis equal to
heightis equal to
That sounds a lot wordier, but this way of thinking allows for more possibilities. For example, we could change the first line to say:
leading edgematches the
To put two views next to each other. Likewise we could change the third line to say:
To make them the same size.
Without Auto Layout you could do something equivalent by manipulating frame values within a layout method but I’m sure you can see how expressive Auto Layout is through this example.