How to increase the UITableView separator height?

Question

I want more space(10px) between each cell. How can I do this?

And I have added this code

tableView.separatorStyle = UITableViewCellSepar         


        

Answer 1

I have seen many clunky solutions like subclassing UITableView with hidden cells, and other less optimal ones incl. in this thread.

When initializing the UITableView, Set the rowHeight property of UITableView to a height that equals = cell height + desired separator/space height.

Do not use standard UITableViewCell class though, instead, subclass the UITableViewCell class and override its layoutSubviews method. There, after calling super (don't forget that), set the height of the cell itself to desired height.

BONUS UPDATE 18/OCT/2015:

You can be a bit smart about this. The solution above basically puts the "separator" at the bottom of the cell. What really happens is, the row height is managed by the TableViewController but the cell is resized to be a bit lower. This results in the separator/empty space being at the bottom. But you can also centre all the subviews vertically so that you leave the same space at the top and the bottom. For example 1pt and 1pt.

You can also create isFirst, isLast convenience properties on your cell subclass. You would set these to yes in the cellForRowAtIndexPath. This way you can handle the edge cases for top and bottom separators inside the layoutSubviews method as this would have access to these properties. This way you can handle the edge cases for top or bottom - because sometimes the design department wants N+1 separators while the number of cells is only N. So you have to either deal with the top one or the boot one in a special way. But it's best do this inside cells instead tableViewHeader or TableViewFooter.

Answer 2

For a table cell with height of 50 and a space of 5 pix between the rows. Width is 320.

Define the background of the cells to be clear:

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
    cell.backgroundColor = [UIColor clearColor];
}

Set the height of the cells, this is the size of the row PLUS the delimiter:

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return 55;
}

And define in cellForRowAtIndexPath a box, with the size of the row (MINUS delimiter) to draw in the background color:

UILabel *headerBackgroundLabel = [[UILabel alloc] initWithFrame:CGRectMake(0,0,320,50)];
backgroundBox.backgroundColor = [UIColor grayColor];
[cell addSubview:backgroundBox];

Answer 3

Swift 4

It's not possible to make the default separator higher. Instead you need to add a subview that will look as a separator to each cell (and optionally make the cell higher). You can do it for example in cellForRowAtIndexPath or in a UITableViewCell subclass.

In case you allow to select the cell, you need to add the subview for selected state as well, otherwise the separator would disappear when the cell is selected. That's why selectedBackgroundView is also configured.

Add this into your UITableViewController subclass:

override func viewDidLoad() {
    super.viewDidLoad()
    tableView.separatorStyle = .none
}

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)

    cell.backgroundView = UIView(backgroundColor: .white)
    cell.backgroundView?.addSeparator()

    cell.selectedBackgroundView = UIView(backgroundColor: .blue)
    cell.selectedBackgroundView?.addSeparator()

    // configure the cell

    return cell
}

Add this extensions into the same file at the bottom:

private extension UIView {
    convenience init(backgroundColor: UIColor) {
        self.init()
        self.backgroundColor = backgroundColor
    }

    func addSeparator() {
        let separatorHeight: CGFloat = 2
        let frame = CGRect(x: 0, y: bounds.height - separatorHeight, width: bounds.width, height: separatorHeight)
        let separator = UIView(frame: frame)
        separator.backgroundColor = .gray
        separator.autoresizingMask = [.flexibleTopMargin, .flexibleWidth]

        addSubview(separator)
    }
}

Answer 4

Here's an option that might work for some people

cell.layer.borderColor = UIColor.white.cgColor
cell.layer.borderWidth = 4.0
cell.layer.masksToBounds = true

Answer 5

Kinda old thread, but since I only found hacky solutions in this thread, here the solution that worked best for me (without additional UIView in every cell)

Swift 3:

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    //configure your cell...

    cell.layer.shadowColor = UIColor.red.cgColor
    cell.layer.shadowOffset = CGSize(width: 0, height: 1)
    cell.layer.shadowOpacity = 1
    cell.layer.shadowRadius = 0
    cell.layer.masksToBounds = false

    return cell
}

EDIT: Unfortunately this does not work if you scroll up in a table. I leave the answer here anyway, since it might be a solution if your table has limited content.

See Shadow on a UITableViewCell disappears when scrolling for more info.

Answer 6

First make tableview separator none from the storyboard. Then add UILabel/UIView at bottom of cell of height(you needed) using storyboard or Xib