Inset Grouped UITableView with Header Section

Question

I have Used UITableView with Two prototype Cells and Inset Grouped style

Without viewForHeaderInSection Output will be fine

After Add viewForHeaderInSection Output will be Like this

Expected Output

Here is my code

extension DashboardVC:UITableViewDelegate, UITableViewDataSource {
    
    func numberOfSections(in tableView: UITableView) -> Int {
        return 4
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 4
    }
    
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 45
    }
    
    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return UITableView.automaticDimension
    }
    
    func tableView(_ tableView: UITableView, estimatedHeightForHeaderInSection section: Int) -> CGFloat {
        return 70
    }
    
    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let headerCell = tableView.dequeueReusableCell(withIdentifier: "TblHeaderCell") as! TblHeaderCell
        return headerCell
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "TblSectionCell", for: indexPath) as! TblSectionCell
        return cell
    }
}

I am facing the same situation. Header and footer views have left margin like 16px, I want to make 0px margins. Any idea to solve left margins? — Enes F., May 31 '22 at 08:49
did you get solution to this issue? I m using custom headerviews and facing the exact issue of alignment. — Sahil Mahajan, Aug 28 '22 at 05:23

score 4 · Answer 1 · answered Aug 05 '20 at 15:06

First, Inset Grouped tableView's have additional alignment properties...

If you use default cells and simply set the titleForHeaderInSection, you'll see that the text in the section header is aligned with the text in the cell.

In addition, Inset Grouped rounds the corners of the section of rows -- it does NOT include the section header.

Here's how it looks with a plain UIView as the section header view:

Zoomed in a little:

To get the visual output you're going for, I think you'll want to use your "header cell" as the first row in the section, and your "section cell" for the remaining rows:

I'm guessing the "down arrow / chevron" in your section header indicates you want to expand / collapse the sections? If so, you'll need to refactor your code to display only the first row when the section is collapsed.

Another option would be to NOT use Inset Grouped, and instead customize your cells to round the top corners of the section header and bottom corners of only the last cell in the section ... or round all 4 corners of the header when the section is collapsed.

I already know about how to do it manually I just want to know how I can do it directly with **Inset Grouped** property — Nikunj Kumbhani, Aug 18 '20 at 05:57
@NikunjKumbhani - this solution *is* using **Inset Grouped**. My point is that you cannot get your design using section headers, as **Inset Grouped** rounds the corners of the section and leaves the header as a non-rounded rectangle. — DonMag, Aug 18 '20 at 13:16
@DonMag if the header view are custom, then how to solve the alignment issue? — Sahil Mahajan, Aug 28 '22 at 05:25

Inset Grouped UITableView with Header Section

1 Answers1