Adding Auto Layout to the Restaurant cell  

Since we have many elements in the Restaurant cell, it means that there are more chances for errors with Auto Layout. Although you may be frustrated at times using Auto Layout, if you are a visual person like me, hopefully you will eventually appreciate using it:

1. Select the top label and then enter the following values:

• • Top: 8
  • Right: 10
  • Left: 10
  • Constrain to margins: Unchecked
  • Height: 19 (should be checked)

2. Click Add 4 Constraints.
3. Now, select the Label right below the last label, then, the Pin icon. Enter the following values:

• • Top: 5
  • Right: 10
  • Left: 10
  • Constrain to margins: Unchecked
  • Height: 16 (should be checked)

4. Click Add 4 Constraints.
5. Next, select the Image container and, then, the Pin icon. Enter the following values:

• • Top: 4
  • Constrain to margins: Unchecked
  • Width: 353 (should be checked)
  • Height: 200 (should be checked)

6. Click Add 3 Constraints.
7. Next, click on the Align icon and enter the value of Horizontally in Container as 0 (this should be checked).

8. Click Add 1 Constraint.
9. Now, select the Image inside of the container and, then, the Pin icon. Enter the following values:

• • Top: 0
  • Right: 0
  • Bottom: 0
  • Left: 0
  • Constrain to margins: Unchecked

10. Click Add 4 Constraints.

 

11. Now, select the container that is holding the stack view and the available time's label and, then, the Pin icon. Enter the following values:

• • Top: 3
  • Constrain to Margins: Unchecked
  • Width: 224
  • Height: 56

12. Click Add 3 Constraints.
13. Next, click on the Align icon and enter the value Horizontally in Container as 0 (this should be checked).

14. Click Add 1 Constraint.
15. Now, select the stack view inside of the container and, then, the Pin icon. Enter the following values:

• • Top: 4
  • Right: 0
  • Left: 0
  • Constrain to margins: Unchecked
  • Height: 27

16. Click Add 4 Constraints.
17. Next, select the Label above the three buttons and, then, the Pin icon. Enter the following values:

• • Top: 2
  • Left: 0
  • Right: 0
  • Constrain to margins: Unchecked
  • Height: 21

18. Click Add 4 Constraints.
19. Finally, click on the Align icon and enter the value of Horizontally in Container as 0 (this should be checked).

20. Click Add 1 Constraint.

Now, all of the Auto Layout for the Restaurant cell is set up. Let's build and run our project and go to the restaurant cell. Everything should look like the design we reviewed earlier in the book.