Change color of inset area in UITableView separator

Question

I have a customized UITableView, the cells have a different background color (set in a custom backgroundView). However, the background color is only applied within the cell, but not extended to the inset area of the separator. As you can see in the screenshot, there is a white area to the left of the colored separator.

How can we change the color of this white line? We would like to make the line "disappear" by setting it to the same color as the cell background. Thanks!

Magnetometer

Are you using Xcode 5 ? and interface builder ? – Bosson

Yeah Xcode 5. We load the viewcontroller from storyboard and set the colors in code. – Phenoxide

Answer 1

Setting the cell's background colour to the same as the contentView's background colour seems to give the best results.

cell.backgroundColor = cell.contentView.backgroundColor;

That will handle cases where the accessoryView is the wrong colour as well.

Tympanic

You can also set this in Interface Builder, FWIW – Repulse

@jmstone How? I can see how to do it if the color is a fixed value, but I could not figure out how to assign a color of a different view – Earle

Answer 2

So I just had this problem myself, and it's strange because it seems to work fine on some tableviews. I'm assuming that the grey color you are using is the background color of your tableview. If not, this solution may not work.

It seems like cells in iOS 7 don't always pick up the tableview background color when a separator inset is present, so you need to manually set the cell background to clearColor. Interestingly, setting this value in storyboards didn't work for me, I had to do it in code. Add this:

cell.backgroundColor = [UIColor clearColor];

when you configure the cell in this delegate function:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

Stentor

Thanks, I tried your suggestion, the color is no longer white, but still it's not the same color as contentview.backgroundColor :( cl.ly/image/063n0z18002L. How does your cell look like? – Phenoxide

@Magnetometer This will only work if you have set your tableview.backgroundColor to whatever color you are using for your cell background color. – Stentor

Answer 3

It's the default in iOS 7. But you can change it to the way iOS 6 looks. Please try my code below. You will be amazed:

    tableView.separatorColor = [UIColor colorWithRed:red green:green blue:blue alpha:1.0];
    NSString *iosversion = [[UIDevice currentDevice] systemVersion];
    int version = [iosversion intValue];
    if(version>6)
    {
        tableView.separatorInset = UIEdgeInsetsZero;
    }

Swift 3+:

tableView.separatorInset = UIEdgeInsets.zero

Abernathy

Answer 4

Use image for separator. This the only easy way to acechive your expected result. For ios 7 in xib we have edge insect property is there you can use.

Rotorua

Answer 5

Go to storyboard > Attribute Inspector > Separator Insets, then select cutom and change left coordinate from 15 to 0. it will be Done.

Swipple

Answer 6

In Interface builder on the UITableViewCell set the attribute 'background' to be clear (or whatever) and then on the Content View set the attribute 'background' to be clear as well and the problem should go away.

Trixi

Answer 7

This is the only method that worked for me... (separator = None via storyboard)

Yemane

Answer 8

I had similar issue and below code worked like charm. [self.tableView reloadData]

reload tableview on didSelectRowAtIndexPath Method.

• (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { [self.tableView reloadData] }

only this fixed my issue.

Garica

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Eada