CODEWITHSUNDEEP
iosswiftuitableviewcocoa-touchuikit
sarawanak
sarawanak

Reputation: 439

How to add separators between UITableView sections?

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:

None of them worked out.

How did I achieve this:

  1. Find last cell in every section,
  2. 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?

Upvotes: 3

Views: 15338

Answers (4)

Anil Kumar
Anil Kumar

Reputation: 1984

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
}

Upvotes: 2

iParesh
iParesh

Reputation: 2368

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
    }

Upvotes: 4

Chandresh Kachariya
Chandresh Kachariya

Reputation: 677

Set the Style of the Table View to Grouped: enter image description here

Upvotes: 4

DonMag
DonMag

Reputation: 77433

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
}

Upvotes: 3

Related Questions