A table view is a list of objects. Each object is displayed through the cells of the table view. Here, we are going to learn the basics regarding the customisation of a table view cell. 

  • For starters let's create a table view cell!
  • By pressing the top view of the cell, you can change the cell's size. The default height of a table view cell is set to 44,  yet you can set it to any value you wish. The table view cell's width is set to the table view's width and cannot be altered. The usage of the dynamic size switch will be explained thoroughly to the Advanced Customisation: Table View Cell.

Let's play around and change our cell's height to 100.

  • The Editor Design screen works as explained in the Introducing: Editor Design article. That means you can add to your table view cell any of our providing views, and modify them any way you wish.

For our example, we will add an image view with the picture of a beach and a label that says "My very own table view cell".

  • As in Editor Design, Editor Code's functionality can be found in Introduction: Editor Code article. Let's talk about the table view cell's Recommended functions! You can access them at Code > Protocols > Recommended functions.
  1.  awakeFromNib: it is called as soon as you create the cell. 
  2.  prepareForReuse: table view cell's are "recycled" when the user is scrolling through the table view. To avoid any wrong data displaying, you can "reset" all your subviews to their initial state at prepareForReuse.
  3.  setSelected: is triggered every time the cell is selected or deselected. Can be used for customisation of the design in a specific selected state.

As a matter of fact, let's implement the setSelected function so that it changes the background colour to grey when the cell is selected.

  • All done!

Let's see what we have created!

How about we press some cells, to test our implementation of the setSelected function?

Works perfectly! 

Did this answer your question?