189

I've implemented a custom table view cell class that inherit from UITableViewCell. The tableview contains a background image, so I want cell's background to be transparent. It looks great before iOS7.

However, in iOS7, the cell is always shown with a white background.


Even for Xcode7, 2015, there is a bug in storyboard: you have to set the background color of a cell in code.

1
  • you can change the background colour of cell directly by accessing its property background colour. cell.backgroundColor = [UIColor clearColor];
    – ViruMax
    Feb 27, 2014 at 12:55

14 Answers 14

386

As Apple DOC said (UITableViewCell Class Reference):

... In iOS 7, cells have a white background by default; in earlier versions of iOS, cells inherit the background color of the enclosing table view. If you want to change the background color of a cell, do so in the tableView:willDisplayCell:forRowAtIndexPath: method of your table view delegate.

So for my case that to show cells with transparent background, just need to implement the delegate method in the table view controller like below:

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

Just Note: As @null said, "...there seems to be a bug in interface builder...", I'm not totally sure whether it does have the bug, but seems so cause his comment got several up votes. So there might something wrong if you use IB. :)

19
  • 54
    Unfortunately not true, there seems to be a bug in interface builder and I couldn't set it to my custom cell from the storyboard. Sep 29, 2013 at 16:55
  • 1
    @null, aha, seems iOS 7 SDK still has lots bugs need to be fixed. I've already met some, but for Storyboard related, I've no idea. :)
    – Kjuly
    Sep 29, 2013 at 17:01
  • 4
    You also can do this in the tableView:cellForRowAtIndexPath: method.
    – bugloaf
    Oct 1, 2013 at 16:15
  • 1
    @KendallHelmstetterGelner sure? I've not noticed it yet, seems still works for me. :)
    – Kjuly
    Feb 14, 2014 at 16:51
  • 1
    As bugloaf says above - do it in tableView:cellForRowAtIndexPath:
    – amergin
    May 11, 2014 at 17:07
67

I investigated it a little bit and found out that the cell backgroundColor is set by the Appearance system. So if all cells in your application have clear background, the easiest solution would be:

[[UITableViewCell appearance] setBackgroundColor:[UIColor clearColor]];

And even if they have different background, clear color seems to be the most convenient as the default one.

6
  • 1
    You my friend are a monster. I subclass all my UITableViewCells, so it wasn't an issue for me to provide a superclass with an initializer to set the BG color to clearColor, but guess what? That didn't work... I mean, WHY, APPLE?
    – Mazyod
    Dec 31, 2013 at 3:11
  • This works. However, the white color pops out of view. Went with top response for best effect (no popping).
    – Carl Prehn
    Mar 18, 2014 at 21:15
  • @Anton Filimonov I have set the table view cell appearance in my Appdelegate now in a particular viewController I want to have different color for cell how can I approach this Scenario? I have tried to set different color in CellWillDisplay delegate method but no effect. Could you please help me on this May 26, 2016 at 11:40
  • @PeerMohamedThabib please tell some more about the environment (iPad/iPhone, iOS version) and provide some code. And actually you can investigate the situation yourself - just make a subclass of UITableViewCell, redefine the setBackgroundColor: method (just call superclass' implementation inside) and put a breakpoint to this method and you'll see, what changes cell color after you set it inside tableView:willDisplayCellAtIndexPath: May 26, 2016 at 16:44
  • 1
    Even if you have mixed cells, some with background and some without (transparent). Easiest way is to define a custom class and write the same code. This way all of the all of UITableViewCell classes will remain on default and custom classes will have clear color. [[CustomTableCell appearance] setBackgroundColor:[UIColor clearColor]]; This wont affect defult UITableViewCells, and only put impact on custom cells.
    – Ansari
    Apr 11, 2017 at 13:34
30

Write this in your cellForRowAtIndexPath method before return cell;

cell.backgroundColor = [UIColor clearColor];
1
  • 1
    This helped me with a problem in iOS 8 on iPhone 5.
    – Almo
    Feb 18, 2015 at 16:17
14

The default background color of an UITableViewCell in iOS 7 is white.

You have to set the backgroundColor property somewhere in your code. For example, set it after you newly created the cell.

cell.backgroundColor = [UIColor clearColor];
2
  • I tried but it has not worked for me. Are you sure that it works? Sep 30, 2013 at 17:01
  • Works for me for a custom table view cell in the initWithCoder:aDecoder method.
    – ftvs
    Jun 25, 2015 at 5:06
13

I actually found that the issue arose from the UITableView's Background color not being set to clear. If you change the UITableViewCell's Background color to clear and you are finding you still see white, make sure that the UITableView's background color is set to clear (or whatever you want).

[self.tableView setBackgroundView:nil];
[self.tableView setBackgroundColor:[UIColor clearColor]];

In Swift

tableView.backgroundView = nil
tableView.backgroundColor = UIColor.clearColor()
2
  • Just FYI you can also set this in IB. Just make sure you change the background colour within the 'View' section, and not just the 'Table View' section which apparently has no noticeable affect.
    – AndyDunn
    Oct 14, 2014 at 10:01
  • 1
    this worked for me too, i was looking for the swift version of it. Added what worked for me in the code :) Sep 21, 2015 at 9:11
10

This is definitely an iOS bug. In iOS 8, setting background color in Interface Builder works fine for iPhone, but in iPad it's always whiteColor. To fix it, in the cellForIndexPath data source message, putting this in:

cell.backgroundColor = cell.backgroundColor

And it will work. This is exactly why I said it's a bug since the code itself is pretty much bullsh*t, but it works.

3
  • Still the case for Xcode7/iOS9. I added the explicit code in tableView:willDisplayCell:forRowAtIndexPath as suggested above. Sep 21, 2015 at 16:15
  • In XCode 7.0.1 compiling universal app showed black background on iPhone running iOS 7,8,9 but white background on iPad running iOS 9.0.2 (and probably others but can't verify). The above code fixed it.
    – ScottyB
    Oct 23, 2015 at 21:22
  • For static tableView override willDisplayCell with cell.backgroundColor = UIColor.clearColor(). Reassigning color setup in IB didn't work for me. Mar 6, 2016 at 8:48
4

It could be that your UITableViewCell is selected by default.. You can confirm this using Xcode 6s new visual debugger (or find out exactly which view is causing this white cell to appear).

enter image description here

Interestingly, after knowing this.. setting the background color of the selected cell to clear still didn't work.. doing some more research, turns out i just had to modify the selection style when i'm creating this custom cell:

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        // do customization here
    }
    self.selectionStyle = UITableViewCellSelectionStyleNone;
    [self setBackgroundColor:[UIColor clearColor]];
    return self;
}
1
  • broken link for visual debugger
    – Suragch
    May 6, 2016 at 8:02
3

I found that none of the above worked from XCode 5.1.1, iOS 7.1.

If you are using Interface Builder with prototype cells, select the prototype cell, then from the attributes selector in the View section, change the Background form default to Clear Color:

enter image description here

This seems to work fine. None of the above code changes are needed, either--this is a pure IB solution.

2

The accepted answer did not fix the problem for me. I had to do this:

  1. In the interface builder, select the table view. Then from the attributes inspector, from the View section, set the Background to transparent (0% opacity).

enter image description here

  1. From the table's data source class cellForRowAtIndexPath method:

    cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
        reuseIdentifier:CellIdentifier];
    cell.backgroundColor = [UIColor clearColor]; //Make cell transparent
    
4
  • Well, you use Interface Builder.. as @null commented below my answer, “... there seems to be a bug in interface builder…”, I’m not totally sure whether it does have the bug, but seems so cause that comment got several up votes. ;)
    – Kjuly
    Oct 29, 2013 at 1:32
  • Something in iOS7 is definitely buggy when it comes to transparent cell background. I hope my answer will help others who are facing similar situation as me.
    – RajV
    Oct 29, 2013 at 14:29
  • This is not the right way to create cells for your tableview, especially if you're using Interface Builder/Storyboards. In the code snippet you are making a new cell every single time your delegate is asked for one, this is not reuse! To gain the performance benefits of cell-reuse you should use cell = [tableView dequeueReusableCellWithIdentifier:<#Reuse ID#> forIndexPath:indexPath]. In earlier versions you drop the indexPath argument and then test for nil, instantiating with initWithStyle:reuseIdentifier as per your code snippet in the nil case.
    – ikuramedia
    Nov 6, 2013 at 5:05
  • ikuramedia: I left the reuse code out of my post. Of course, I reuse cells. That is not the point of this post.
    – RajV
    Nov 6, 2013 at 5:24
2

Swift 1.2 Solution:

Just add an explicit definition for your cell's background color like so:

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

    // Configure the cell...
    cell.backgroundColor = UIColor.clearColor()

    return cell
}
1
  • Sorry. It's my bad. It works. I missed some other settings.
    – Sung Kim
    Mar 7, 2016 at 13:41
2

For me setting cell.backgroundColor = cell.contentView.backgroundColor; either in tableView:willDisplayCell:forRowAtIndexPath: or tableView:cell:forRowAtIndexPath: did the job.

This is because I set the contentView's background colour in Interface Builder as desired.

1

When adding UI objects to a cell, Xcode 5/IOS 7 adds a new "Content View" which will be the superview of all elements in the cell. To set the background color of the cell, set the background color of this Content View. The solutions above didnt work for me but this one worked well for me.

3
  • Content view is available in previous SDK versions either, you just set a background colour for content view that covers cell's background view.
    – Kjuly
    Oct 12, 2013 at 14:23
  • Well, it does not popup automatically in interface builder previous to xcode 5. What exactly is your point ?
    – DrBug
    Oct 12, 2013 at 16:39
  • I mean, your answer discussed for another issue, not my question asked for. You just want to set a background colour for your cell, right? So no matter cells have a white background by default or not in iOS 7, you can always implement it by setting a colour for content view, cause the content view lays over cell's background view. Make sense? ;)
    – Kjuly
    Oct 12, 2013 at 17:00
1

Had a similar problem, had to

  1. Set blue as the selectionStyle and
  2. add this to the code to correct it

    override func tableView(tableView: UITableView, shouldHighlightRowAtIndexPath indexPath: NSIndexPath) -> Bool {
    
      var bgColorView: UIView = UIView()
      bgColorView.backgroundColor = UIColor(red: (76.0 / 255.0), green: (161.0 / 255.0), blue: (255.0 / 255.0), alpha: 1.0)
      bgColorView.layer.masksToBounds = true
      tableView.cellForRowAtIndexPath(indexPath)!.selectedBackgroundView = bgColorView
      return true
    }
    
0

You can also use colour code in order to make your UITableView Cell lucrative.

[cell setBackgroundColor:[self colorWithHexString:@"1fbbff"]];

This is the code for applying colour code method:

-(UIColor*)colorWithHexString:(NSString*)hex
{
    NSString *cString = [[hex stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]] uppercaseString];


    if ([cString length] < 6) return [UIColor grayColor];

    if ([cString hasPrefix:@"0X"]) cString = [cString substringFromIndex:2];

    if ([cString length] != 6) return  [UIColor grayColor];

    NSRange range;
    range.location = 0;
    range.length = 2;
    NSString *rString = [cString substringWithRange:range];

    range.location = 2;
    NSString *gString = [cString substringWithRange:range];

    range.location = 4;
    NSString *bString = [cString substringWithRange:range];

    unsigned int r, g, b;
    [[NSScanner scannerWithString:rString] scanHexInt:&r];
    [[NSScanner scannerWithString:gString] scanHexInt:&g];
    [[NSScanner scannerWithString:bString] scanHexInt:&b];

    return [UIColor colorWithRed:((float) r / 255.0f)
                         green:((float) g / 255.0f)
                          blue:((float) b / 255.0f)
                         alpha:1.0f];
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.