AutoLayout Basics L2.2.1

Constraints are what allow an element to be positioned in a certain place regardless of device or landscape/portrait mode

auto layout 1

You need a minimum of 2 constraints in each dimension or axises (x and y) for a total of 4 to properly size and layout a UIElement. Unless that element has an intrinsic size like the case of a UIBottom which is will derive its size from the font and font size, or if the height and width (size) of an element is manually set then only 2 constraints are needed to place the element in a particular place on screen.

If for instance we want to center an element on screen and set the height, width and constraints for how far the element should be from the top and from the left. iOS will calculate the constraints for how far from the bottom and right the element should be based on those values.

auto layout 2

Elements and constraint are always set relative to their parent containers, in this case the blue screen is the view which is full screen.

Two ways to add constraints

From the bottom right hand side constraints button

add constraints 1

Ctrl-click and drag from the element in the document outline to it’s parent view. From there you can select the options for setting constraints. Shift clicking will allow you to and multiple constrains at the same time

add constraints 2

add constrains 3

For layout problems suggestions can be found in the storyboard document outline.
Update frames will adjust the size and position of the element to match constraints set on it

update frames