Table views – customizing cells (Swift)

In this tutorial we cover the following topics

• General information
• Customizing table view cells with nib files
  1. Step 1: create a new project
  2. Step 2: create a new class
  3. Step 3: add a new code and a table view
  4. Step 4: design our table view cell in Interface Builder
  5. Step 5: run the application
• Customizing table view cells with storyboard
  1. Step 1: create a new project
  2. Step 2: create a new class
  3. Step 3: add a new code
  4. Step 4: add a table view and design our table view cell in the storyboard
  5. Step 5: run the application
• Customizing table view programmatically
  1. Todo (id=ios:tab-view-custom-program): Prepare "Customizing table view programmatically"

There are three basic approaches to create our own table view cells

• one that involves loading a cell from a nib file,
• a second that is similar, but loads the cell from a storyboard,
• and a third that involves adding subviews to UITableViewCell programmatically when creating the cell.

1. Step 1: create a new project
   Create a new project
   1. Select File | New | Project...
   2. Select Single View Application on the template selection sheet.
   3. As the product name enter Swift iOS Table View Custom Cell Nib
   4. Set the Language to Swift. Because we will not use tests in this tutorial, you can leave both test check boxes unchecked as well as make sure the check box labeled Use Core Data is also unchecked
2. Step 2: create a new class
   1. In the Project Navigator, right-click the iOS Table View Custom Cell Nib group and select New File....
   2. Choose Cocoa Touch Class from the iOS Source section in the template dialog and then press Next
   3. Name the new class PeakInfoCell, make it a subclass of UITableViewCell.
   4. Make sure that the Also create XIB file check box is checked this time
      
   5. Press Next and then press Create to save the files
      
3. Step 3: add a new code and a table view
   1. Single-click PeakInfoCell.swift and add/modify the following code
      
      Swift

      import UIKit class PeakInfoCell: UITableViewCell { var name = "" var height = "" @IBOutlet weak var labelName: UILabel! @IBOutlet weak var labelHeight: UILabel! override func awakeFromNib() { super.awakeFromNib() // Initialization code } override func setSelected(_ selected: Bool, animated: Bool) { super.setSelected(selected, animated: animated) // Configure the view for the selected state } func setName(name: String) { if !self.name.elementsEqual(name) { self.name = name self.labelName.text = self.name } } func setHeight(height: String) { if !self.height.elementsEqual(height) { self.height = height self.labelHeight.text = self.height } } }

      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

      import UIKit   class PeakInfoCell: UITableViewCell {          var name = ""     var height = ""     @IBOutlet weak var labelName: UILabel!     @IBOutlet weak var labelHeight: UILabel!          override func awakeFromNib() {         super.awakeFromNib()         // Initialization code     }       override func setSelected(_ selected: Bool, animated: Bool) {         super.setSelected(selected, animated: animated)           // Configure the view for the selected state     }     func setName(name: String) {         if !self.name.elementsEqual(name) {             self.name = name             self.labelName.text = self.name         }     }          func setHeight(height: String) {         if !self.height.elementsEqual(height) {             self.height = height             self.labelHeight.text = self.height         }     } }

   2. Single-click ViewController.swift and add/modify the following code
      
      Swift

      import UIKit // Trick to get static variable in Swift struct staticVariable { static let PeakInfoCellIdentifier = "PeakInfoCellIdentifier" } class ViewController: UIViewController, UITableViewDataSource { var eightThousandersPeaks = [String]() var eightThousandersPeaksHeight = [String]() @IBOutlet weak var tableView: UITableView! override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. eightThousandersPeaks += ["Mount Everest", "K2", "Kangchenjunga", "Lhotse","Makalu", "Cho Oyu", "Dhaulagiri","Manaslu", "Nanga Parbat", "Annapurna I", "Gasherbrum I", "Broad Peak", "Gasherbrum II", "Shishapangma"] eightThousandersPeaksHeight += ["8850", "8611", "8586", "8516", "8463", "8201", "8167", "8156", "8126", "8091", "8068", "8047", "8035", "8013"] let nib = UINib(nibName: "PeakInfoCell", bundle: nil) tableView.register(nib, forCellReuseIdentifier: staticVariable.PeakInfoCellIdentifier) } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return eightThousandersPeaks.count; } func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { var cell:PeakInfoCell? = (tableView.dequeueReusableCell( withIdentifier: staticVariable.PeakInfoCellIdentifier) as? PeakInfoCell) if cell == nil { cell = (UITableViewCell(style: .subtitle, reuseIdentifier: staticVariable.PeakInfoCellIdentifier) as? PeakInfoCell) } cell?.setName(name: eightThousandersPeaks[indexPath.row]) cell?.setHeight(height: eightThousandersPeaksHeight[indexPath.row]) return cell! } }

      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

      import UIKit   // Trick to get static variable in Swift struct staticVariable { static let PeakInfoCellIdentifier = "PeakInfoCellIdentifier" }   class ViewController: UIViewController, UITableViewDataSource {     var eightThousandersPeaks = [String]()     var eightThousandersPeaksHeight = [String]()          @IBOutlet weak var tableView: UITableView!          override func viewDidLoad() {         super.viewDidLoad()         // Do any additional setup after loading the view, typically from a nib.                  eightThousandersPeaks += ["Mount Everest", "K2", "Kangchenjunga",                                   "Lhotse","Makalu", "Cho Oyu",                                   "Dhaulagiri","Manaslu", "Nanga Parbat",                                   "Annapurna I", "Gasherbrum I", "Broad Peak",                                   "Gasherbrum II", "Shishapangma"]                  eightThousandersPeaksHeight += ["8850", "8611", "8586",                                         "8516", "8463", "8201",                                         "8167", "8156", "8126",                                         "8091", "8068", "8047",                                         "8035", "8013"]                  let nib = UINib(nibName: "PeakInfoCell", bundle: nil)         tableView.register(nib, forCellReuseIdentifier: staticVariable.PeakInfoCellIdentifier)     }       override func didReceiveMemoryWarning() {         super.didReceiveMemoryWarning()         // Dispose of any resources that can be recreated.     }       func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {         return eightThousandersPeaks.count;     }          func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {         var cell:PeakInfoCell? = (tableView.dequeueReusableCell(             withIdentifier: staticVariable.PeakInfoCellIdentifier) as? PeakInfoCell)                  if cell == nil {             cell = (UITableViewCell(style: .subtitle, reuseIdentifier: staticVariable.PeakInfoCellIdentifier) as? PeakInfoCell)         }                  cell?.setName(name: eightThousandersPeaks[indexPath.row])         cell?.setHeight(height: eightThousandersPeaksHeight[indexPath.row])         return cell!     } }

   3. Select Main.storyboard to edit the storyboard.
   4. Find in the object library a Table View and drag it over to the View window.
   5. Add all necessary constraints to make sure that the table view is positioned and sized correctly.
   6. Now we have to link the table view to the outlet. Select the Main.storyboard file and in the Document Outline, Control-drag from the View Controller icon to the Table View icon. Release the mouse and select tableView in the pop-up.
      
   7. Set our controller class the data source for the table as we did it in Table views basics (Swift): Step 2: add Table view and set connections: substep 5
      1. Select the table view in the Document Inspector and bring up the Connections Inspector (use shortcut: Alt + Command + 6).
      2. Drag from the circle next to dataSource in Outlets section to the View Controller icon in the Document Outline or above the view controller in the storyboard editor. This makes our controller class the data source for this table.
         
4. Step 4: design table view cell in Interface Builder
   1. Select PeakInfoCell.xib in the Project Navigator to open the file for editing.
   2. Look in the library for a Table View Cell and drag it to the GUI layout area. In my case this cell was already created, so there was no need for manual addition.
      
   3. In the the Attributes Inspector set the Identifier value to PeakInfoCellIdentifier
      
   4. Select the table cell in the editing area to edit our table cell’s content view. Go to the library, drag out two Label controls, and place them in the content view where you want. Next set some font attributes. In my case left label (name label) was set to System Bold 20 and right label (height) to System Italic 17. Remember also to set correct constraints. Doing that, have in mind that working with Auto Layout we have to set Top and Leading constraints as we do in most cases, but dynamic row height also requires bottom constraints (see Woodster's explanation in Detected a case where constraints ambiguously suggest a height of zero).
      
   5. Select the table view cell by clicking PeakInfoCellIdentifier in the Document Outline,
      
      
      bring up the Identity Inspector, and choose PeakInfoCell as the Class in Custom Class section.
      
   6. Switch to the Connections Inspector, where we will see the nameLabel and heightLabel outlets. Drag from the labelName outlet to the name label (left in my case) and from the labelHeight outlet to the height label (right).
      
5. Step 5: run the application
   

We can also design table cells directly in the storyboard, which means that we don’t need to create an extra nib file. This is fine as long as we don’t want to share cell designs between different tables.

In this part we will do the same thing as we did in previous Customizing Table View Cells with nib files part but without nib files.

1. Step 1: create a new project
   Create a new project
   1. Select File | New | Project...
   2. Select Single View Application on the template selection sheet.
   3. As the product name enter iOS Table View Custom Cell Storyboard
   4. Set the Language to Swift. Because we will not use tests in this tutorial, you can leave both test check boxes unchecked as well as make sure the check box labeled Use Core Data is also unchecked
2. Step 2: create a new class
   1. In the Project Navigator, right-click the iOS Table View Custom Cell Storyboard group and select New File....
   2. Choose Cocoa Touch Class from the iOS Source section in the template dialog and then press Next
   3. Name the new class PeakInfoCell, make it a subclass of UITableViewCell.
   4. Make sure that the Also create XIB file check box is NOT checked this time.
      
      
      Press Next and then press Create to save the files.
3. Step 3: add a new code and a table view
   1. Single-click PeakInfoCell.swift and add/modify the following code
      
      Swift

      import UIKit class PeakInfoCell: UITableViewCell { var name = "" var height = "" @IBOutlet weak var labelName: UILabel! @IBOutlet weak var labelHeight: UILabel! override func awakeFromNib() { super.awakeFromNib() // Initialization code } override func setSelected(_ selected: Bool, animated: Bool) { super.setSelected(selected, animated: animated) // Configure the view for the selected state } func setName(name: String) { if !self.name.elementsEqual(name) { self.name = name self.labelName.text = self.name } } func setHeight(height: String) { if !self.height.elementsEqual(height) { self.height = height self.labelHeight.text = self.height } } }

      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

      import UIKit   class PeakInfoCell: UITableViewCell {          var name = ""     var height = ""     @IBOutlet weak var labelName: UILabel!     @IBOutlet weak var labelHeight: UILabel!          override func awakeFromNib() {         super.awakeFromNib()         // Initialization code     }       override func setSelected(_ selected: Bool, animated: Bool) {         super.setSelected(selected, animated: animated)           // Configure the view for the selected state     }     func setName(name: String) {         if !self.name.elementsEqual(name) {             self.name = name             self.labelName.text = self.name         }     }          func setHeight(height: String) {         if !self.height.elementsEqual(height) {             self.height = height             self.labelHeight.text = self.height         }     } }

   2. Single-click ViewController.swift and add/modify the following code
      
      Swift

      import UIKit // Trick to get static variable in Swift struct staticVariable { static let PeakInfoCellIdentifier = "PeakInfoCellIdentifier" } class ViewController: UIViewController, UITableViewDataSource { var eightThousandersPeaks = [String]() var eightThousandersPeaksHeight = [String]() @IBOutlet weak var tableView: UITableView! override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. eightThousandersPeaks += ["Mount Everest", "K2", "Kangchenjunga", "Lhotse","Makalu", "Cho Oyu", "Dhaulagiri","Manaslu", "Nanga Parbat", "Annapurna I", "Gasherbrum I", "Broad Peak", "Gasherbrum II", "Shishapangma"] eightThousandersPeaksHeight += ["8850", "8611", "8586", "8516", "8463", "8201", "8167", "8156", "8126", "8091", "8068", "8047", "8035", "8013"] } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return eightThousandersPeaks.count; } func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { var cell:PeakInfoCell? = (tableView.dequeueReusableCell( withIdentifier: staticVariable.PeakInfoCellIdentifier) as? PeakInfoCell) if cell == nil { cell = (UITableViewCell(style: .subtitle, reuseIdentifier: staticVariable.PeakInfoCellIdentifier) as? PeakInfoCell) } cell?.setName(name: eightThousandersPeaks[indexPath.row]) cell?.setHeight(height: eightThousandersPeaksHeight[indexPath.row]) return cell! } }

      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

      import UIKit   // Trick to get static variable in Swift struct staticVariable { static let PeakInfoCellIdentifier = "PeakInfoCellIdentifier" }   class ViewController: UIViewController, UITableViewDataSource {     var eightThousandersPeaks = [String]()     var eightThousandersPeaksHeight = [String]()          @IBOutlet weak var tableView: UITableView!          override func viewDidLoad() {         super.viewDidLoad()         // Do any additional setup after loading the view, typically from a nib.                  eightThousandersPeaks += ["Mount Everest", "K2", "Kangchenjunga",                                   "Lhotse","Makalu", "Cho Oyu",                                   "Dhaulagiri","Manaslu", "Nanga Parbat",                                   "Annapurna I", "Gasherbrum I", "Broad Peak",                                   "Gasherbrum II", "Shishapangma"]                  eightThousandersPeaksHeight += ["8850", "8611", "8586",                                         "8516", "8463", "8201",                                         "8167", "8156", "8126",                                         "8091", "8068", "8047",                                         "8035", "8013"]     }          override func didReceiveMemoryWarning() {         super.didReceiveMemoryWarning()         // Dispose of any resources that can be recreated.     }          func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {         return eightThousandersPeaks.count;     }          func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {         var cell:PeakInfoCell? = (tableView.dequeueReusableCell(             withIdentifier: staticVariable.PeakInfoCellIdentifier) as? PeakInfoCell)                  if cell == nil {             cell = (UITableViewCell(style: .subtitle, reuseIdentifier: staticVariable.PeakInfoCellIdentifier) as? PeakInfoCell)         }                  cell?.setName(name: eightThousandersPeaks[indexPath.row])         cell?.setHeight(height: eightThousandersPeaksHeight[indexPath.row])         return cell!     } }

   3. Select Main.storyboard to edit the storyboard.
   4. Find in the object library a Table View and drag it over to the View window.
   5. Add all necessary constraints to make sure that the table view is positioned and sized correctly
      
4. Step 4: design table view cell in the storyboard
   1. Find in the object library a Table View Cell and drag it over to the Table View window.
      
   2. In the Table View Cell section of Attributes inspector set
      1. Style as Custom,
      2. Identifier as PeakInfoCellIdentifier.
   3. Select the table cell in the editing area to edit our table cell’s content view. Go to the library, drag out two Label controls, and place them in the content view where you want. Next set some font attributes. In my case left label (name label) was set to System Bold 20 and right label (height) to System Italic 17. Remember also to set correct constraints.
      
   4. Select Main.storyboard, then the table view cell by clicking PeakInfoCellIdentifier in the Document Outline, bring up the Identity Inspector, and choose PeakInfoCell as the Class in Custom Class section.
      
   5. Switch to the Connections Inspector, where we will see the nameLabel and heightLabel outlets. Drag from the nameLabel outlet to the name label (left in my case) and from the heightLabel outlet to the height label (right).
      
   6. Now we have to link the table view to the outlet. Select the Main.storyboard file and in the Document Outline, Control-drag from the View Controller icon to the Table View icon. Release the mouse and select tableView in the pop-up.
      
   7. Set our controller class the data source for the table
      1. Select the table view in the Document Inspector and bring up the Connections Inspector (use shortcut: Alt + Command + 6).
      2. Drag from the circle next to dataSource in Outlets section to the View Controller icon in the Document Outline or above the view controller in the storyboard editor. This makes our controller class the data source for this table.
5. Step 5: run the application