Add legend under Custom Cell in Table View with Swift

Question

I'm currently trying to replicate the array you can see below in the picture:

I've created a custom cell class so I can display a label and a switch button. The part I have no idea about is how to display the legend below every cell.

Here is my code at the moment:

 var options = ["Solstice", "Equinox", "Enable Snapshot"]

 public func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return options.count
}

public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let cell = tableView.dequeueReusableCell(withIdentifier: "CustomCell", for: indexPath) as! CustomCell
    let switchView = UISwitch(frame: CGRect.zero)
    cell.addSubview(switchView)
    cell.accessoryView = switchView
    cell.nameLabel.text = options[indexPath.row]
    return cell
}

Could the legend be another custom cell, with a different style? What would be the best way to do it?

use two tableview cell one for label with switch and another cell is your text and show it as odd even or you can do conditional code also as per your display requirement. — Ravi Panchal, Jan 24 '18 at 05:33
`cell.addSubview(switchView)` No. That's a bad idea. Causing issue with reuse and after you set it as the `accessoryView`. — Larme, Jan 24 '18 at 09:18

rmaddy · Accepted Answer · 2018-01-24T05:29:47.620

2

Setup your table view with a grouped style instead of plain. Put each row is in its own section.

Use a section footer title for each of the legends. This is done with the func tableView(_ tableView: UITableView, titleForFooterInSection section: Int) -> String? data source method.

edited Jan 24 '18 at 05:29

answered Jan 24 '18 at 05:27

rmaddy

314,917
42
532
579

1

Further to @rmaddy's answer, I would suggest you look at https://developer.apple.com/documentation/uikit/uitableviewdelegate/1614946-tableview – Samah Jan 24 '18 at 05:28
@Samah Actually the needed methods are part of UITableViewDataSource. – rmaddy Jan 24 '18 at 05:30
I forgot about `titleForFooterInSection`. If you want an entirely custom view though, you will need `UITableViewDelegate`. – Samah Jan 24 '18 at 05:32
Ok I resolved the issue using grouped table, `viewForFooterInSection` and `heightForFooterInSection`. Thanks guys! – Mencls Jan 25 '18 at 03:52
You can use just `titleForFooterInSection` instead of the other two unless you want something more than simple text for your legends. – rmaddy Jan 25 '18 at 04:26

score 2 · Answer 2 · answered Jan 24 '18 at 05:36

There are two options:-

1)

  var options = [ {"title":"Solstice", "description" :"legend" }, {"title":"Equinox", "description" :"legend"} , {"title":"Enable Snapshot", "description" :"legend"}]

Then, You can create the label,switch and legend in same cell itself. For the label in legend should be given number of lines 0, and no constant height so that label increases height based on text similar to AutoLayout to dynamically size UILabel Height and Width

2) Create view with switch as section headers, and legend as row inside each header // this is commonly used when there are more than one row for each section, since your use case has only one row (legend), using single cell will be easier for implementation

3) Use the function that Apple provide for this exact purpose `tableView(_:, titleForFooterInSection)` — Samah, Jan 24 '18 at 09:51

Add legend under Custom Cell in Table View with Swift

2 Answers2