Let's take a look at what the exploreCell collection view cell looks like in the app tour:

In the previous chapter, you set the background color for the exploreCell collection view cell and configured the collection view to display a grid of 20 exploreCell collection view cells. You'll now add some more graphic elements to the exploreCell collection view cell to match the design shown in the app tour. Perform the following steps:

1. Select exploreCell in the document outline of the Explore View Controller Scene. Click the Attributes inspector. Confirm Identifier is set to exploreCell. Change Background to White Color:

2. Click the Object library button. Type uiview into the filter field. A View object will appear in the results. Drag it into the prototype cell:

3. Make sure the View you just added is selected and is a subview of the exploreCell Content View: 

4. Click the Add New Constraints button and enter the following values.

• Top: 0
• Left: 0
• Right: 0
• Height: 156

When done, click Add 4 Constraints. This binds the view top, left, and right edges to corresponding edges of the exploreCell collection view cell. The position of the bottom edge is determined by the height constraint, which sets the distance between the top and bottom edges of the view.

5. Click the Object library button. Type image into the filter field. An Image View object will appear in the results. Drag it on top of the View you added earlier:

6. Make sure the Image View is selected and is a subview of the View you added earlier:

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

• Top: 0
• Left: 0
• Right: 0
• Bottom: 0

When done, click Add 4 Constraints. This binds the edges of the image view to the edges of the view you added earlier.

8. Click the Object library button. Type label into the filter field. A Label object will appear in the results. Drag it to the space between the View you just added and the bottom of the cell:

9. Make sure the Label is selected and is a subview of the exploreCell collection view cell's Content View, not the View you added earlier:

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

• Top: 9
• Left: 8
• Right: 8
• Height: 21

When done, click Add 4 Constraints. The space between the top edge of the label and the bottom edge of the view you added earlier is set to 9 points. The space between the left and right edges of the label and the corresponding edges of the exploreCell content view are both set to 8 points. The height constraint determines the position of the bottom edge of the Label by setting the space between the top and bottom edges of the label.

Build and run the app:

As you can see, the Explore screen now more closely matches the design shown in the app tour. Each cell now has an image view and a label just under it, and all of the necessary constraints have been added. Fantastic!

Note that unlike the previous section, you did not set the position of the UI elements using the Size inspector before adding constraints. You can do this as you are only adding a few elements in this section, and the relative positions of each element to one another is not ambiguous.

Now that you've completed modifying the exploreCell collection view cell, let's modify the restaurantCell collection view cell next by adding some UI elements to it in the next section.