Constraints

You want it to sit in the centre of the screen
1. Double click on Main.storyboard.
2. At the bottom right of the storyboard, you will see a few buttons. One of which is 'aligned'.
3. Check next to 'Horizontally in Container' and 'Vertically in Container'.
4. Click on button 'Add 2 Constraints'.
5. Click on the button in the screen. Click on one of the lines, either referencing the x-axis or y-axis.
6. A screen will pop up. To offset the button's position a few pixels from the centre, add a number to the property 'Constant'.

Notes

- This is helpful for positioning buttons and other GUI items
- Useful when different phone is used or when phone has a landscape orientation

You want to constrain it on the screen.
1. Control click on the object, drag it to the bottom or side of the screen.
2. Select constraints to bottom layer or to right layer.
3. Double click line and key in the constant.
4. Add missing constraints

Send something to the back or front:
1. At the left side of the bar, click on object. To send it to the back, drag it upwards.

Align multiple UI items relative to each other

Main idea: position one item relative to the screen. The rest will be positioned relative to the others.

First UI item
1. Click the align button at the bottom right hand corner of the storyboard screen.
2. Add the vertical and horizontal constraints.
3. Click the 'Add new constraints' button next to the align button.
4. Give it a fixed width
5. Double click on the horizontal line on it.
6. If you want it to be shifted up by 80, key in -80 in constant.

Viewing it in different simulators, orientations
7. To see what it will look like in different devices, look for 'View As' in the bottom left hand corner of the storyboard and click on it. Select the different views.

Adding other UI elements relative to the first
8. For another item that is relative to the first, align it horizontally (give it a constraint).
9. Click on it, click the control button on the keyboard and link it to the first UI item.
10. Select vertical spacing.
11. Click on the 'add new constraints' button.
12. Check 'spacing to its nearest neighbour'.
13. Adjust the figures accordingly.

Making all the items align at the top
1. Select all items. Choose the align button
2. Check against top edges.
3. Add constraints

Making all the items have the same amount of horizontal spacing
1. Select the first item.
2. Press control button. Drag line to second item (you might want to choose an area that is not already constrained, for instance, if you had constrained it along its top edges, connect it at the middle or bottom). Choose horizontal spacing.
3. Double click on a blue line connecting the two items at the bottom. Choose constant = spacing between the two.

You can also click on the triangle button (resolve auto layout issues) and add missing constraints.

Pinning a label relative to the screen
Click on the label and on the add new constraints button.
Key in the margins from the screen at the top.
Make sure it becomes add 2 constraints.

Using stack layout to position multiple UI elements

Before you select the different elements, make sure that you constrain their width and height
Select a row of elements and click on the embed in stack button.
Make it fill equally if all elements are the same size, else fill proportionally.
Select all the rows and embed in stack view.
Select the entire stack and align horizontally and vertically in container so as to lock its position.
Increase spacing if you need to increase spacing between elements.

Make the element 30% of height of screen
1. Control click the element and drag line to screen (vertically).
2. Select 'Equal height'.
3. This will make it the same height as the phone screen.
4. Click on the constraint line and adjust multiplier to 0.3