Search code examples
iosswiftstoryboardios13

Why are separator insets not being respected for the first and last cell in a grouped section?

I want to be able to have all of my separators in a table view to be inset by a certain amount. This table view needs a custom header for each section. See the following image for the desired insets:

enter image description here

My storyboard is set up so that I have a UIViewController which contains a container UIView, which in turn has an embed segue for a UITableView. My table view specifies a prototype cell, and I have set in the storyboard a Grouped style, Default separator, with Automatic inset.

On my Table View Cell in the storyboard, I have a Custom separator inset of 26 on the left.

In my table view controller, I have implemented the following two methods:

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let header = tableView.dequeueReusableHeaderFooterView(withIdentifier: "ItemHeader") as! TableSectionHeaderViewCell
    header.title.text = "My Custom Date Header"
    return header
}

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

In a separate file I have subclassed UITableViewHeaderFooterView to just set a font, text color, and some constraints.

Now if I set a custom separator inset on the storyboard at the table view level with 26 inset from the left, either From Cell Edges or From Automatic Insets, nothing changes with the separators that appear below each of my headers. Similarly, if I set these values programmatically in the viewDidLoad method of my table view controller, like so:

override func viewDidLoad() {
    super.viewDidLoad()

    tableView.rowHeight = UITableView.automaticDimension
    tableView.register(TableSectionHeaderViewCell.self, forHeaderFooterViewReuseIdentifier: "ItemHeader")

    tableView.separatorInset = UIEdgeInsets(top: 0, left: 26, bottom: 0, right: 0)
    tableView.separatorStyle = .singleLine
    tableView.separatorInsetReference = .fromCellEdges
}

Nothing changes with the separator insets, even using the .fromAutomaticInsets option for the separator inset reference. Here is what I am actually seeing:

enter image description here

It seems that the first and last cells in a section are actually not respecting the separator insets. I thought originally that this was an issue related to having a header for each grouped section, but the separator on the final cell with no header below it seems to indicate otherwise. How can I make it so that these separators all are inset by 26pts? Thank you for any insight you can provide.

Solution

  • Check this thread then, I think it will help:

    Grouped UITableview remove outer separator line

    I can see that they removed the default separator (Using Clear Color) and put a custom view for the separator themselves.

    The other option I can suggest is don’t use a group style Table view, use the plain one and handle it yourself.