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 get frustrated when 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: 3
    • Right: 10
    • Left: 10
    • Constrain to margins: Unchecked
    • Height: 19 (should be checked)
  1. Click Add 4 Constraints.
  2. Select the Label right under the last label and then the Pin icon. Enter the following values:
    • Top: 0
    • Right: 10
    • Left: 10
    • Constrain to margins: Unchecked
    • Height: 16 (should be checked)
  1. Click Add 4 Constraints.
  2. 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)
  1. Click Add 3 Constraints.
  2. Click on the Align icon and enter the value of Horizontally in Container as 0 (this should be checked).
  1. Click Add 1 Constraint.
  2. 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
  1. Click Add 4 Constraints.
  2. Select the container that is holding the stack view and the available time's label and then select the Pin icon. Enter the following values:
    • Top: 3
    • Constrain to Margins: Unchecked
    • Width: 224
    • Height: 56
  1. Click Add 3 Constraints.
  2. Click on the Align icon and enter the Horizontally in Container value as 0 (this should be checked).
  1. Click Add 1 Constraint.
  2. Select the stack view inside of the container and then the Pin icon. Enter the following values:
    • Top: 6
    • Right: 0
    • Left: 0
    • Constrain to margins: Unchecked
    • Height: 27
  1. Click Add 4 Constraints.
  2. Select the Label that is 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
  1. Click Add 4 Constraints.
  2. Click on the Align icon and enter the value of Horizontally in Container as 0 (this should be checked).
  1. Click Add 1 Constraint.

Now, all of the Auto Layout for the Restaurant cell is set up. Before you run the project, select the collection view in the outline. Then, go to the Size inspector and update Cell Size Width to 375 and Height to 312. These numbers are used for design purposes, and we will make these values dynamic depending on the device size later.

Let's build and run our project and go to the restaurant cell. You should now see the following:

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.191.202.45