Getting started with reviews

Our review form UI is set up, but we need to make a slight change to it. Right now, we have an image displayed for ratings. We are going to build a custom rating component that we will use in both restaurant details and our Review form.

We add it to our restaurant details first, then once we are finished, we add it to the Review form. We want our ratings view to be able to show ratings from zero stars to five stars. We also want the user to be able to select half stars when rating, so it will also need to show half stars.

The first thing we do is start creating our custom UIControl. UIButtons and UISwitches are sub-classes of UIControls, and without getting super technical, we are going to create our control:

1. Right click the Reviews Form folder and select New File.
2. Inside of the Choose a template for your new file screen, select iOS at the top, and then Cocoa Touch Class. Then, hit Next.
3. In the options screen that appears, add the following:

New file:

• • Class: RatingsView
  • Subclass: UIControl
  • Language: Swift

4. Click Next, and then Create.

Now that we have created our file, we want to be able to hook it up to a UIView in storyboard. Let's do the following:

1. Open up RestaurantDetail.storyboard.
2. In the object library of the Utilities panel, type view in the filter field.
3. Delete the image with the five empty stars.
4. Then, drag out a View into the cell with the empty stars.
5. Select the View and, in the Size inspector, update the following values:

• • X: 151
  • Y: 43
  • Width: 205
  • Height: 34

6. Select the View, and then the Pin icon. Enter the following values:

• • Top: 13
  • Left: 0
  • Width: 205 (checked)
  • Height: 34 (checked)
  • Constrain to margins: Unchecked

7. Click Add 4 Constraints.
8. Next, select the Restaurant View Controller, then in the Identity inspector, update the Custom Class to RatingsView and hit Enter.

Now, we are set up to get started. Open up the RatingsView.swift file and let's get started.