使用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?

Answer 1

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.

Answer 2

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