This tutorial will cover the basics of how to customize a Table View Cell in Swift. Table Views can be used to display rows of data from a data set, and they are customizable to display all of the data’s properties.
*If you are new to Table Views and how to create them in Swift check out Creating a Simple Table View in Swift.
We will be creating a feed similar to Instagram’s feed where the user is able to like and view images.
Sizing the Table View Cell
Changing the size of the Table View Cell can be done in the Storyboard.swift. There are two steps to changing the Table View’s cell size.
- Setting the Row Height property in the Table View’s Size Inspector
- Change the size of prototype cell
Setting the Row Height property in the Table View’s Size Inspector
Select the Table View in the View Hierarchy and open up it’s size inspector panel. There is a “Row Height” property. Set the height to 400.
This will properly set all of the rows in the Table View to have a height of 400.
Change the size of prototype cell
When customizing a row in a Table View, typically the prototype cell is designed and used as a template for all the other cells. At the moment the prototype cell is at the default height and not the new height that was set for the Table View’s row. The Table View “Row Height” and the prototype cell’s “Row Height” property should be matching.
Select the Table View Cell in the View Hierarchy of the Storyboard and set it’s “Row Height” property to be the same value as the Table View’s “Row Height” property. (In this case it is 400)
This will guarantee that the cell we are designing for will be the same height as the Table View’s rows.
Adding the View Components
Now we need to drag all of the View Components we want to have inside of each Table View cell. This will include the following:
- The main image view
- A Text View for the title
- A button for liking the image
The Image View
Drag an Image View into the Table View’s prototype cell, centering it along the dotted blue lines.
Then, with the Image View selected, select the Align menu at the bottom of the Storyboard and check “Horizontal in Container” and “Vertically in Container” then click “Add 2 Constraints”.
This will make sure that the Image View is always centered directly inside of the cell. However adding these two Alignment Constraints will cause an AutoLayout issue. To fix this click the “Resolve Auto Layout Issues” menu at the bottom right of the Storyboard and select “Add Missing Constraints”.
Next we need to make sure that the image put into the Image View scales properly with the Image View’s sizing. To do this simply set the “Content Mode” property to “Aspect Fill” in the Attributes Inspector for the Image View.
Lastly add a cell identifier for the prototype cell. Mine is “imageCelldentifier”.
The Title’s Label
We will add a Label for the title of the Image. Drag the Label above the Image View centering it along the dotted blue lines. Then drag the ends of the Label to match the edges of the Image View.
To make sure that the Label will be properly aligned, add the “Horizontally in Container” constraint and then fix the Auto Layout issue the same way as the Image View.
Add the Buttons
Next drag a button at the center bottom of the Image View. This will be the button to like the Image. (My button contains an Image)
Add the same “Horizontally in Container” constraint and fix the Auto Layout issue.
Tagging the View Components
Add a unique tag value for all the view components in the Table View Cell. This will help us reference them in the Code.
To add a tag value select the View in the prototype cell and under the Attribute’s inspector there is a tag field.
I added the following tag values to my Views.
- Image View: 100
- Label: 101
- Like Button: 102
Connecting the Components to the Code
Lastly to finish up our Table View Cell, we need to populate the cells in the tableView(cellForRowAt) method.
This will give us references to the components in each cell for customization!
