How to add separators between UITableView sections? - ios

Question

I'm implementing a tableview, which has 3 sections(section count remain static) and each section contain several rows.
Behaviour 1: Add section header to only the third section.
How did I achieve:
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
if section == 2 {
//create and return header view
}
return UIView(frame: CGRect(x: 0, y:0, width: tableView.width, height: UIScreen.main.scale))
}
Behaviour 2: TableViewCells shouldn't have separator. But, Sections should be separated with a thin line. (similar to tableviewcell separator)
What did I try:
Add a one pixel height, tableView width UIView, with all required properties set(color, etc) and add it as a sub-view to the section header view's
Add drop shadow with CGPoint(0,1) to the section header views
None of them worked out.
How did I achieve this:
Find last cell in every section,
Create an UIView with 1px height, tableView's width and add it as a subview to the last cell
Though this seem to work. I feel, there must be a better way of doing this, rather than adding line to bottom of every section's last tableView cell. Does anyone know a better way of implementing such behaviour?

Answer 1

Set the Style of the Table View to Grouped:

Answer 2

Using heightForHeaderInSection method of UITableViewDelegate and return section wise height as per you want
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
if section == 2 {
return 1 // return height as per your requirement
}
return 0 // return height as per your requirement
}

Answer 3

This should work for adding "section separator lines" and a head view only on the 3rd section:
override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
// if it's the 3rd section, return a view with desired content for the section header
if section == 2 {
let v = UIView(frame: CGRect(x: 0, y:0, width: tableView.frame.width, height: 30))
v.backgroundColor = .yellow
let label = UILabel(frame: CGRect(x: 8.0, y: 4.0, width: v.bounds.size.width - 16.0, height: v.bounds.size.height - 8.0))
label.autoresizingMask = [.flexibleWidth, .flexibleHeight]
label.text = "Header for Third Section"
v.addSubview(label)
return v
}
// not the 3rd section, so don't return a view
return nil
}
override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
// if it's the 3rd section
if section == 2 {
return 30
}
return 0
}
override func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
// UIView with darkGray background for section-separators as Section Footer
let v = UIView(frame: CGRect(x: 0, y:0, width: tableView.frame.width, height: 1))
v.backgroundColor = .darkGray
return v
}
override func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
// Section Footer height
return 1.0
}

Answer 4

Simple solution of this Just add the footer view inside the tableview.Set height of the footer view to be a specific height.
Swift:
public func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
let view = UIView()
view.backgroundColor = UIColor.grey
return view
}
public func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
return 10
}