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.

Fattie
  • 30,632
  • 54
  • 336
  • 607
Kjuly
  • 32,573
  • 22
  • 98
  • 112
  • you can change the background colour of cell directly by accessing its property background colour. cell.backgroundColor = [UIColor clearColor]; – ViruMax Feb 27 '14 at 12:55

14 Answers14

385

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. :)

Kjuly
  • 32,573
  • 22
  • 98
  • 112
  • 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. – Tarek Hallak Sep 29 '13 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 '13 at 17:01
  • Not working. Using this technique (delegation of willDisplayCell) or setting the background to clearColor did not solve the issue. – philippe Sep 29 '13 at 20:13
  • @philippe I too am experiencing the same problem - setting the background color to clear or a solid does not work and still displays white – Pete Martin Sep 30 '13 at 14:57
  • @Kjuly I set red color but could not set clear color for the cell ( – Matrosov Alexander Sep 30 '13 at 17:07
  • @MatrosovAlexander red colour can cover on others, but clear colour does not. You might have set another colour below cell in other view layers. :) – Kjuly Oct 01 '13 at 00:38
  • 4
    You also can do this in the `tableView:cellForRowAtIndexPath:` method. – bugloaf Oct 01 '13 at 16:15
  • @Kjuly, I am supporting one project right now, I have another reason why it did not work for me. I have table that contains another table in the cell. So I have added [cell setBackgroundColor:[UIColor clearColor]]; for each table in cellForRowAtIndexPath and now it works good. In any case your variant works good as well. thanks – Matrosov Alexander Oct 01 '13 at 16:26
  • This alone did not make a cell transparent. See my answer. – RajV Oct 28 '13 at 16:36
  • Hi @RajV, sorry as I said _"for my case"_ in my answer, I didn't say it works for every case. Like someone use different SDK versions, or as someone said it seems there's a bug in interface builder, etc. Anyway, it seems my workaround works for most cases depend on the up votes. ;) – Kjuly Oct 29 '13 at 01:31
  • So they gave us a bunch of cleaner, smoother, things and showed it off, removing all the colors and backgrounds saying it's cleaner, then just adds it to other things? Thanks for the answer! I'm switching phones to a less schizophrenic company. – Stephen J Nov 08 '13 at 00:02
  • 1
    @KendallHelmstetterGelner sure? I've not noticed it yet, seems still works for me. :) – Kjuly Feb 14 '14 at 16:51
  • 1
    As bugloaf says above - do it in tableView:cellForRowAtIndexPath: – amergin May 11 '14 at 17:07
  • 1
    @amergin before iOS 7, u can just do it in `-tableView:cellForRowAtIndexPath`. :) – Kjuly May 11 '14 at 23:40
  • 1
    @Kjuly I'm using iOS7 and it works fine with -tableView:cellForRowAtIndexPath - seems that at creation is best time for this. Tried subclassing UITableViewCell and doing it during initialization but it didn't work. – amergin May 12 '14 at 09:00
  • anyone finding that this causes a complete redisplay of their tableview? we animate additions to our tableview, but the redisplay hides the animation. *sigh* – Sam Sep 22 '14 at 17:12
  • @Sam yeah, it'll be invoked every time the cell shows from hidden, in earlier versions of iOS, cells inherit the background color of the enclosing table view, and we can set the colour any where to make the background fixed. But after iOS 7, apple suggests to do this way to set the colour. – Kjuly Sep 23 '14 at 00:47
  • It is absolutely ridiculous that this bug still exists in XCode 7. – AppreciateIt Jun 21 '16 at 19:52
  • @AppreciateIt hahaha, yeah, though calling it as bug might not be accurate. – Kjuly Jun 22 '16 at 01:59
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.

Kyle Clegg
  • 36,212
  • 26
  • 127
  • 138
Anton Filimonov
  • 1,572
  • 13
  • 18
  • 1
    You my friend are a monster. I subclass **all** my `UITableViewCell`s, 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 '13 at 03:11
  • This works. However, the white color pops out of view. Went with top response for best effect (no popping). – Carl Prehn Mar 18 '14 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 – Peer Mohamed Thabib May 26 '16 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: – Anton Filimonov May 26 '16 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 '17 at 13:34
  • This is required in iOS 14 if you are drawing any Core graphics UIs in UITableViewCell's draw(:CGRect). Otherwise, you will see all the white view when running. – KoreanXcodeWorker Oct 12 '20 at 08:52
30

Write this in your cellForRowAtIndexPath method before return cell;

cell.backgroundColor = [UIColor clearColor];
sanjana
  • 2,974
  • 2
  • 23
  • 30
13

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];
Yiming Tang
  • 547
  • 4
  • 9
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()
x4h1d
  • 5,807
  • 1
  • 28
  • 43
Endama
  • 753
  • 8
  • 25
  • 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 '14 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 :) – Mugunthan Balakrishnan Sep 21 '15 at 09: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.

superarts.org
  • 6,508
  • 1
  • 53
  • 43
  • Still the case for Xcode7/iOS9. I added the explicit code in tableView:willDisplayCell:forRowAtIndexPath as suggested above. – Andrew Duncan Sep 21 '15 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 '15 at 21:22
  • For static tableView override willDisplayCell with cell.backgroundColor = UIColor.clearColor(). Reassigning color setup in IB didn't work for me. – Viktor Kucera Mar 06 '16 at 08: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;
}
abbood
  • 21,507
  • 9
  • 112
  • 218
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.

Mike
  • 3,024
  • 1
  • 23
  • 43
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
    
RajV
  • 5,925
  • 6
  • 39
  • 54
  • 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 '13 at 01: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 '13 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: 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 06 '13 at 05: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 06 '13 at 05: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
}
Kjuly
  • 32,573
  • 22
  • 98
  • 112
Dan Beaulieu
  • 17,926
  • 15
  • 92
  • 126
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.

mllm
  • 15,275
  • 14
  • 44
  • 58
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.

DrBug
  • 1,834
  • 2
  • 17
  • 21
  • 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 '13 at 14:23
  • Well, it does not popup automatically in interface builder previous to xcode 5. What exactly is your point ? – DrBug Oct 12 '13 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 '13 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
    }
    
Kjuly
  • 32,573
  • 22
  • 98
  • 112
Nakul Sudhakar
  • 1,494
  • 1
  • 24
  • 24
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];
}
P.J.Radadiya
  • 1,372
  • 10
  • 16
MahboobiOSDeveloper
  • 722
  • 2
  • 8
  • 32