Set custom separator insets on UITableViewCell

Question

In my UITableView I want a 'centered' separator effect in which the separator is shrunk by 30pt from left and 30 from right. I've managed to accomplish that from Interface Builder setting the 'Custom Insets' property of the TableView itself, but I cannot reproduce this behaviour by code (and I have to do that this way).

In particular, with this piece of code:

self.tableView.separatorColor = .green
self.tableView.separatorStyle = .singleLine
self.tableView.separatorInset = UIEdgeInsets(top: 0, left: 30, bottom: 0, right: 30)

And also this one:

@objc(tableView:cellForRowAtIndexPath:) func tableView(_ tableView:  UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "recent_cell") as! TPExpandableTableViewCell
    //setting cell insets
    cell.separatorInset = separatorInset
    cell.item = items[indexPath.row]
    return cell
}

I obtained the following output on the iPhone 6S Simulator:

Seems like that the separator content view get shrunk, but the separator background view gets not. I also tried to remove the line that sets the separatorInset of the cell, and the result was an inset equal to UIEdgeInset.zero

I can confirm that the white line under the green on is a separator-related view, because if I change the separatorStyle to .none, it disappears

Any helps?

Darreldarrell

you need one superview which will be base view, color of this view will be green as per your requirement, and constraint for leading, trailling top, and bottom will be 0. Now add subview to this base view which will have constraints like leading, trailling 0 and top, bottom to 1. – Godbey

Answer 1

The best approach to make custom separator is to disable UITableView separator and create a view inside the cell with the height you want such as 1px and then add the constraints to the view to be at center bottom of the cell.

Combine

Thank you for the answer, but I would prefer a more standard way using the default separators, if there is one. – Darreldarrell

Actually i didn't find good approach like this, i search about it a lot but if you really want custom separator as you want, for me i didn't find another solution actually. – Combine

Answer 2

Basically, that first piece of code is correct for setting the separator inset, color and style which is:

self.tableView.separatorColor = .green
self.tableView.separatorStyle = .singleLine
self.tableView.separatorInset = UIEdgeInsets(top: 0, left: 30, bottom: 0, right: 30)

And the one at cell's separatorInset is for the cell's content. So I'm confused of what you actually want to achieve here. From your last phrase, your content was shrunk and that was caused by 'cell.separatorInset = separatorInset' and you somehow don't want that.

So I suggest that you remove this line of code:

cell.separatorInset = separatorInset

Derivation

The problem is the white line below the green separator inset! – Darreldarrell

Set your tableView's background color to 'red' that should fix it. – Derivation

Answer 3

Problem:

The whitespace behind the separator actually belongs to the cell's backgroundColor, not the cell's contentView.

Solution

So when creating a custom cell setting the contentView.backgroundColor will not change that whitespace, but setting the cell.backgroundColor will.

Example:

Add this in your custom cell's initialisers.

cell.backgroundColor = UIColor.red

Gwin

This is the correct answer, thanks a ton, made the exact same mistake of setting the contentView.backgroundColor. – Hospitium