Adding Auto Layout constraints to the restaurantCell collection view cell

As you did before for the exploreCell collection view cell, you will now add Auto Layout constraints to all of the elements in restaurantCell. Since you have used the Size inspector to position the elements, their positions relative to one another and the values of the constraints should already be correctly set, making it easy for you to add the constraints.

Since there are many elements in restaurantCell, take your time during this section:

  1. Select the top Label:


  1. Click the Add New Constraints button and enter the following values:
  • Top: 3 (sets a space between the top edge and the top edge of the Content View)
  • Left: 10 (sets a space between the left edge and the left edge of the Content View)
  • Right: 10 (sets a space between the right edge and the right edge of the Content View)
  • Height: 19 (sets a space between the top and bottom edges)

Click Add 4 Constraints when done.

  1. Select the Label under the previous Label:

Click the Add New Constraints button and enter the following values:

  • Top: 0 (sets a space between the top edge and the previous bottom edge of the Label)
  • Left: 10 (sets a space between the left edge and the left edge of the Content View)
  • Right: 10 (sets a space between the right edge and the right edge of the Content View)
  • Height: 16 (sets a space between the top and bottom edges)

Click Add 4 Constraints when done.

  1. Select the View that contains the Image View:


  1. Click the Add New Constraints button and enter the following values:
  • Top: 4 (sets a space between the top edge and the bottom edge of the Label)
  • Width: 353 (sets a space between the left and right edges)
  • Height: 200 (sets a space between the top and bottom edges)

Click Add 3 Constraints when done. Note that the position of the left and right edges are not set yet.

  1. Click the Align button, tick Horizontally in Container and enter the following value: 0. Click Add 1 Constraint when done. This sets the horizontal position of the View to the center of the Content View. Since the width of this View is set, the position of the left and right edges can be determined.
  1. Select the Image View:


  1. Click the Add New Constraints button and enter the following values:
  • Top: 0
  • Left: 0
  • Right: 0
  • Bottom: 0

Click Add 4 Constraints when done. This binds the edges of the Image View to the enclosing View.

  1. Select the View containing the Available Times Label and the Stack View:


  1. Click the Add New Constraints button and enter the following values:
  • Top: 3 (sets a space between the top edge and the View containing the bottom edge of the Image View)
  • Width: 224 (sets a space between the left and right edges)
  • Height: 56 (sets a space between the top and bottom edges)

Click Add 3 Constraints when done. Note that the position of the left and right edges are not set yet.

  1. Click the Align button. tick Horizontally in Container and enter the following value: 0Click Add 1 Constraint when done. This sets the horizontal position of the View to the center of the Content View. Since the width of this View is set, the position of the left and right edges can be determined.
  1. Select the Stack View:

  1. Click the Add New Constraints button and enter the following values:
  • Top: 6 (sets a space between the top edge and the bottom edge of the Available Times Label)
  • Left: 0 (sets a space between the left edge and the left edge of the enclosing View)
  • Right: 0 (sets a space between the right edge and the right edge of the enclosing View)
  • Height: 27 (sets a space between the top and bottom edges)

Click Add 4 Constraints when done.

  1. Select the Available Times Label:

  1. Click the Add New Constraints button and enter the following values:
  • Top: 2 (sets a space between the top edge and the top edge of the enclosing View)
  • Left: 0 (binds the left edge to the left edge of the enclosing View)
  • Right: 0 (binds the right edge to the right edge of the enclosing View)
  • Height: 21 (sets a space between the top and bottom edges)

Click Add 4 Constraints when done.

All of the Auto Layout constraints for restaurantCell have been set up.

Build and run your app and go to the Restaurant List screen. You should now see the following:

As you can see, the Restaurant List screen now more closely matches the design shown in the app tour. The restaurantCell table view cell now looks just like the app tour design, and all of the necessary constraints have been added. Awesome!

Now that you've completed modifying restaurantCell, let's modify the table view cells in the Locations screen in the next section.

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

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