Adding Auto Layout to our  cell

Let's see how to add Auto Layout to our cell.

Auto Layout will allow our layout to adjust to all devices. Let's get started:

1. Select the image in our cell and then select the Pin icon. Enter the following values under the Add New Constraints section:
   • Top: 9
   • Left: 8
   • Constrain to margins: unchecked
   • Width: 60 (checked)
   • Height: 60 (checked)
2. Click Add 4 Constraints.
3. Next, select the first label in our cell and, then, the Pin icon. Enter the following values under the Add New Constraints section:
   • Top: 10
   • Left: 8
   • Right: 8
   • Constrain to margins: unchecked
   • Height: 21 (checked)
4. Click Add 4 Constraints.
5. Next, select the second label in our cell and, then, the Pin icon. Enter the following values under the Add New Constraints section:
   • Top: 4
   • Left: 8
   • Right: 8
   • Constrain to margins: unchecked
   • Height: 16 (checked)
6. Click Add 4 Constraints.

 

7. Finally, select the last label in our cell and, then, the Pin icon. Enter the following values under the Add New Constraints section:
   • Top: 2
   • Left: 8
   • Right: 8
   • Constrain to margins: unchecked
   • Height: 16 (checked)
8. Click Add 4 Constraints.

We have completed setting up our UI and can now proceed to get data into our app and display it.