Let's take a look at what the restaurantCell collection view cell looks like in the app tour:
As you can see, restaurantCell has many elements. You will now modify restaurantCell to match the design shown in the app tour. A summary of the changes required is as follows:
- Change the size of restaurantCell to make it larger and change the background color to white.
- Add a view, then add a label and a stack view containing three buttons to show the available reservation times.
- Add a view, then add an image view to it in order to show a picture of the restaurant.
- Add a label at the top-left corner to show the restaurant's name.
- Add a label just under the name label to show the restaurant's address.
You'll be using the Size inspector to position all of the elements, and this will make it easier to add the necessary Auto Layout constraints later. Take your time doing this to reduce the chances of making a mistake:
- In Main.storyboard, click the Collection View for the Restaurant List View Controller scene in the document outline. Click the Size inspector. Under Cell Size, set Width to 375 and Height to 312. Set Estimate Size to None:
- Click restaurantCell in the document outline. Click the Attributes inspector. Confirm the Identifier is set to restaurantCell. Set Background to White Color:
- Click the Object library button. Type uiview in the filter field. A View object will appear in the results. Drag it into the prototype cell:
- With the View selected, click the Size inspector. Update the following values for the View section:
- X: 75.5
- Y: 245
- Width: 224
- Height: 56
- Click the Object library button. Type label in the filter field. A Label object will appear in the results. Drag it into the View you just added:
- With the Label selected, click the Size inspector. Update the following values in the View section:
- X: 0
- Y: 2
- Width: 224
- Height: 21
- Click the Attributes inspector. Update the following values:
- Text: Plain and then add Available Times in the empty text field below it
- Alignment: Center
- Font: System Bold 17.0
- Click the Object library button. Type button in the filter field. A Button object will appear in the results. Drag it into the same View where the Label was:
- With the Button selected, click the Attributes inspector. Update the following values:
- Type: System
- Title: Plain and then add 7:30pm in the empty text field below it
- Font: System Bold 15.0
- Text Color: White Color
- Background: time-bg
- Click the Size inspector. Update the following values in the View section if necessary:
- Width: 68
- Height: 27
- Select the Button and hit command + C to copy. Hit command + V twice to paste. You should now have three Buttons. Arrange them as follows:
- Click one Button, then press Shift and click the other two. All three Buttons should now be selected:
- Choose Embed | Stack View from the Editor menu. This will put all three Buttons into a Stack View that has a grid of cells with 1 row and 3 columns.
- All of the Buttons are now subviews in the Stack View:
- Select the Stack View in the document outline. Click the Attributes inspector. Update the following values:
- Axis: Horizontal
- Alignment: Fill
- Distribution: Equal Spacing
- Spacing: 10
- Click the Size inspector. Update the following values in the View section:
- X: 0
- Y: 29
- Click the Object library button. Type uivie in the filter field. A View object will appear in the results. Drag it into the prototype cell:
- With the View selected, click the Size inspector. Update the following values in the View section:
- X: 11
- Y: 42
- Width: 353
- Height: 200
- Click the Object library button. Type image into the filter field. Image View will appear in the results. Drag it into the View you just added:
- With the Image View selected, click the Attributes inspector. Set Image to american. This is just a placeholder; later, you will load images using code:
- With the Image View selected, click the Size inspector. Update the following values in the View section:
- X: 0
- Y: 0
- Width: 353
- Height: 200
- Click the Object library button. Type label into the filter field. A Label object will appear in the results. Drag two Labels into the prototype cell:
- Select a Label and click the Attributes inspector. Set the Font to System Bold 17.0:
- With the Label selected, click the Size inspector. Update the following values in the View section:
- X: 10
- Y: 3
- Width: 355
- Height: 19
- Select the other Label and click the Attributes inspector. Update the following values:
- Color: LetsEat Dark Grey
- Font: System 14.0
- With the Label selected, click the Size inspector. Update the following values in the View section:
- X: 10
- Y: 22
- Width: 355
- Height: 16
You have added all of the elements for restaurantCell and set their positions using the Size inspector. Now, you need to add Auto Layout constraints to them to ensure the user interface adapts to device screen size and orientation. You'll do this in the next section.