Create custom UITableView separator line

Question

I would like to create a separator line like this one:

Any idea about how to implement it? I tried getting an image of the line and using UIAppearance proxy objects:

[[UITableView appearanceWhenContainedIn:[MyController class], nil] setSeparatorColor:
[UIColor colorWithPatternImage:[UIImage imageNamed:@"line.png"]]];
[[UITableView appearanceWhenContainedIn:[MyController class], nil] setSeparatorStyle:UITableViewCellSeparatorStyleSingleLine];

but,somehow, only the black line gets rendered.

Importunate

Answer 1

you can try below:

UIView *separator = [[UIView alloc] initWithFrame:CGRectMake(0, cell.contentView.frame.size.height - 1.0, cell.contentView.frame.size.width, 1)];
separator.backgroundColor = myColor;
[cell.contentView addSubview:separator];

or

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
   UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"separator.png"]];
   imageView.frame = CGRectMake(0, 100, 320, 1);
   [customCell.contentView addSubview:imageView];

   return customCell;
}

Confidante

I believe your last line is: [cell.contentView addSubview:seperator]; anyway it doesn't work because I need a separator line with two colors – Importunate

how to add an image instead? – Confidante

I think the second approach works better but I had to set CGRectMake(0, 1, 320, 1) – Importunate

Strange that I cannot get the same effect with the UIAppearance proxy objects – Importunate

By the way it is an image background up there either for the cell or the whole table. – Confidante

I did this trick for a one of my app before, it was a static UITable and I put a pre designed background for the table and remove the separator and the cell bg ;) – Confidante

when I use appearance proxy I just get a black line – Importunate

What happens if the cell is reused? Shouldn't you check if the separator view exists already? – Reliant

You may want to use 1.0 / UIScreen.mainScreen.scale as the separator height. – Monied

Answer 2

@Tarek I used two instance of your objects for creating the double line

UIView *separator = [[UIView alloc] initWithFrame:CGRectMake(0, cell.contentView.frame.size.height - 0.5, cell.contentView.frame.size.width, 1)];
UIView *separator2 = [[UIView alloc] initWithFrame:CGRectMake(0, cell.contentView.frame.size.height - 1.0, cell.contentView.frame.size.width, 1)];
separator.backgroundColor = [UIColor darkGrayColor];
separator2.backgroundColor = [UIColor blackColor];
[cell.contentView addSubview:separator];
[cell.contentView addSubview:separator2];

Looks good! Kudos for you

Importunate

Answer 3

Swift 3

viewDidLoad:

//remove default separator line
tableView.separatorStyle = .none

tableView cell:

class MyCustomCell: UITableViewCell {

    override func awakeFromNib() {
        super.awakeFromNib()

        let separator = UIView(frame: CGRect(x: 8, y: bounds.size.height - 0.5, width: bounds.size.width - 22, height: 1))
        separator.backgroundColor = UIColor.red
        contentView.addSubview(separator)
    }
}

Trigon