Adding Auto Layout for creating reviews

Let's now add Auto Layout to our form:

1. In the first cell, select the Image View and then select the Pin icon. Enter the following values:

• • Top: 7
  • Width: 108 (checked)
  • Height: 17 (checked)

2. Click Add 3 Constraints.
3. Next, select the Align icon, then check the Horizontally in Container.
4. Now, select the label under the Image View and then select the Pin icon. Enter the following values:

• • Top: 1
  • Width: 181 (checked)
  • Height: 18 (checked)

5. Click Add 3 Constraints.
6. Next, select the Align icon, then check the Horizontally in Container.
7. Click Add 1 Constraint.

 

8. Next, select the Text Field in the second cell and then the Pin icon. Enter the following values:

• • Top: 0
  • Right: 8
  • Left: 16
  • Height: 44 (checked)

9. Click Add 4 Constraints.
10. Now, select the Text Field in the third cell and then the Pin icon. Enter the following values:

• • Top: 0
  • Right: 8
  • Left: 16
  • Height: 44 (checked)

11. Click Add 4 Constraints.
12. Finally, select the Text View in the third cell and then the Pin icon. Enter the following values:

• • Top: 5
  • Right: 5
  • Bottom: 5
  • Left: 5

13. Click Add 4 Constraints.

We are now done with the adding Auto Layout to our form. Our Main.storyboard file has many Controllers inside of it:

When working with a team, you do not want to have one file that controls all of your UI. You want to be able to have different people work on different sections of the app. To be able to have multiple storyboards we need to refactor our storyboard to make it more manageable. Even if you are working alone, it's good practice to have a storyboard for each part of your app. Let's see how we can refactor our storyboard.