Reservation header

Our first row is our reservation header; it will contain four elements, an image, and three labels. You can delete the button we added in the previous chapter:

1. Select the first row, and, in the Size inspector, update Row Height to 240.
2. In the object library of the Utilities panel, type uiview into the filter area.
3. Using the Outline view, drag a UIView into the first Table View Cell Content View.
4. Select the View and, in the Size inspector, update the following values:

• • X: 0
  • Y: 0
  • Width: 375
  • Height: 240

5. Select the Attributes inspector, click on the Background, and set the Hex Color # to 393939 under RGB Slider in the drop-down menu. You can also add this color to your Color Assets.
6. Next, in the Utilities panel, select the object library and type label in the filter field.
7. Drag three labels into the View we just created.
8. Next, select the Media Library icon in the Utilities panel, and in the filter, type detail-logo.
9. Drag a detail-logo into the same View.
10. Select the detail-logo in the Outline view, select the Size inspector, and update the following values:

• • X: 77.5
  • Y: 10

11. Select the first label in the Outline view and, in the Size inspector, update the following values:

• • X: 8
  • Y: 132
  • Width: 359
  • Height: 44

12. Select the Attributes inspector and change the Alignment to Center, the Color to White Color, and the Font to System Heavy size 30.
13. Next, select the second label in the Outline view and update the following values in the Size inspector:

• • X: 8
  • Y: 176
  • Width: 359
  • Height: 21

14. Open the Attributes inspector and change the Alignment to Center, the Color to White Color, and the Font to System Thin size 14.
15. Now, select the third label in the Outline view and, in the Size inspector, update the following values:

• • X: 8
  • Y: 197
  • Width: 359
  • Height: 21

16. In the Attributes inspector, change the Alignment to Center, the Color to White Color, and the Font to System Thin size 14.

Our reservation header is complete. Let's build and run the project by hitting the Play button (or use cmd + R) and see what our restaurant detail looks like.

Our restaurant detail is very close to what we want, but there are a couple of remaining issues. Currently, our Table View separators have an inset, which we want, but we need an inset on both sides. By default, the inset is currently set to the left, but we need to add an inset to the right. In addition, if you select a cell in the restaurant detail view, the cell becomes highlighted, which we do not want. To correct these items, follow these steps:

1. In Main.storyboard, select the Table View in the Outline view of the restaurant detail.
2. In the Attributes inspector of the Utilities panel, change Separator Inset from Automatic to Custom:

3. Then, change the Right inset to 15:

4. Then, change Selection from Single Selection to No Selection.

Let's build and run the project again by hitting the Play button (or use cmd + R); you should see those items are now corrected. We have now completed the restaurant details.