Ungrouping UITableView Section Header when Header is top of view

Question

I am currently working on a UITableViewController. My current implementation includes a header view (white view), a UITableView section header (red view) and tableview (grey). Currently the TableView style is grouped so the Section Header scrolls with the TableView when scrolling up to shrink the header view.

I am trying to keep the Section Header at the top of the view when the header view goes offscreen, and allow the UITableViewCells to scroll under the Section Header. Currently the tableview cannot scroll up once the Section Header reaches the top of the view. Any suggestions would be super helpful

Current Code:

    override func tableView(_ tableView: UITableView, heightForHeaderInSection     section: Int) -> CGFloat {
    return 106.0
}

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let view1 = UIView(frame: CGRect(x: 0, y: 0, width: tableView.frame.width, height: 106.0))
    view1.backgroundColor = UIColor.red
    return view1
}

override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    return  80.0
}

override func scrollViewDidScroll(_ scrollView: UIScrollView) {
    let maxOffset = (scrollView.contentSize.height - scrollView.frame.size.height)
    if scrollView.contentOffset.y >=  maxOffset {
        scrollView.contentOffset = CGPoint(x: scrollView.contentOffset.x, y: maxOffset)
    }

    if scrollView.contentOffset.y >= 35.0 {
        scrollView.contentOffset = CGPoint(x: scrollView.contentOffset.x, y: 35.0)
    }
}
}

Answer 1

I was able to replicate your desired behaviour without using the scrollViewDidScroll method, however the headerView will no longer scroll with the tableView . You could use the scrollViewDidScroll method to change the height/origin of the headerView when the content offset is less than zero.

class TableViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    @IBOutlet weak var headerView: UIView?
    @IBOutlet weak var tableView: UITableView? {
        didSet {
            tableView?.dataSource = self
            tableView?.delegate = self
        }
    }

    func numberOfSections(in tableView: UITableView) -> Int { return 1 }
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return 10 }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        let cell = UITableViewCell(style: .default, reuseIdentifier: "Cell")

        cell.backgroundColor = UIColor.gray;

        return cell
    }

    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {

        let header = UIView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: 50))

        header.backgroundColor = UIColor.red

        return header
    }

    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat { return 100 }
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat { return 60 }
}

Answer 2

I am not completely sure I follow what you are trying to accomplish, but please allow me to attempt to infer and feel free to provide clarifications. I like the table view practice :)

As I understand it:

1) You want the white view, the red view, and the table cells beneath the red view to scroll upward from the default position

2) You want the white view to scroll out of visibility

3) You want the red view to float at the top while the cells scroll beneath it

4) You currently have the white view as a table header, the red view as a section header, and the gray area are table cells

Sounds like a cool app!

Why not use 2 table sections:

1) Drop the table header

2) Set the white view in cell 0 section 0 of the table view.

3) Set table delegate methods so section 0 will have a nil header with 0 height

3.5) Also set the table delegate methods so section 1 will be your main table

4) Use UITableViewStylePlain so section 1 header will float at the top

Is this the desired functionality?