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.

Ben's articles

  1. Manage iOS App Layouts with Autolayout

    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.

    The Concept

    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:

    myView is at position (x: 20, y: 40) with dimensions (w: 400, h: 100)

    In Auto Layout something this would be said as:

    myView’s leading edge matches its superview’s offset by 20pt

    myView’s top space matches its superview’s offset by 40pt

    myView’s width is equal to 400

    myView’s height is equal to 100

    That sounds a lot wordier, but this way of thinking allows for more possibilities. For example, we could change the first line to say:

    myView’s leading edge matches the trailing edge of myOtherView

    To put two views next to each other. Likewise we could change the third line to say:

    myView’s width matches the width of myOtherView

    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.