Using auto layout you can describe the layout of your views in a relative way that allows the frames to be determined at runtime so they can take into account the screen size of the device.

You need to be using storyboard.

Alignment Rectangle

The auto layout system uses an "alignment rectangle" which the view controller will already have.

Setting Auto Layout Properties


Make sure you are happy with the basic layout before you start – it can be a right pain to move things around and fix constraints afterwards!

As you select options in these menu boxes you need to press the Add Constraints button for them to be actione.  The constraints are then added in the size inspector panel.

You often need to set the width and height to be fixed as well as the other alignment options.

Look at the build errors list in the left panel as you add constraints as you add them to see and deal with warnings as you go.

If you get weird warnings and you don't understand why it may be that objects are overlapping.

The Menus

Select an object in the .xib. Then open the Auto Layout Constraint / pin menu:


The top area of the pin menu describe the objects spacing from its nearest neighbour on the canvas.

Enter pixel values your want or click the link lines to cause the object to be linked.

There is also the Align menu:


The Resolve Auto Layout Issues menu:



UK Electronic Designer