UITableViewCell transparent background (including imageView/accessoryView)

Question

When I set the UITableViewCells backgroundColor to a semi-transparent color, it looks good, but the color doesn't cover the entire cell.

The area around the imageView and accessoryView are coming up as [UIColor clearColor]...

I've tried explicitly setting the cell.accessoryView.backgroundColor and cell.imageView.backgroundColor to be the same color as the cell's backgroundColor, but it doesn't work. It puts a tiny box around the icon, but doesn't expand to fill the left edge. The right edge seems unaffected by this.

How can I fix this?

EDIT : Here is the raw table cell code:

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

    static NSString *CellIdentifier = @"Cell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] autorelease];
        cell.opaque = NO;
        cell.textLabel.backgroundColor = [UIColor clearColor];
        cell.backgroundColor = [UIColor colorWithRed:.1 green:.1 blue:.1 alpha:.4];
        cell.textColor = [UIColor whiteColor];
    }

    cell.imageView.image = [icons objectAtIndex:indexPath.row];
    cell.textLabel.text = [items objectAtIndex:indexPath.row];
    cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;

    return cell;
}

Solution 1

Ben and I figured this out today, here's the summary for the group in case this catches anybody else.

You have to set the cell background and cell.textLabel.backgroundColor every time cellForRowAtIndexPath is called, not just during the alloc/init phase (i.e. if the tableView has a dequeue cache miss).

So, the code becomes this:

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

    static NSString *CellIdentifier = @"Cell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] autorelease];
        cell.opaque = NO;        
    }

    // All bgColor configuration moves here
    cell.textLabel.backgroundColor = [UIColor clearColor];
    cell.backgroundColor = [UIColor colorWithRed:.1 green:.1 blue:.1 alpha:.4];
    cell.textColor = [UIColor whiteColor];
    cell.imageView.image = [icons objectAtIndex:indexPath.row];
    cell.textLabel.text = [items objectAtIndex:indexPath.row];
    cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;

    return cell;
}

Solution 2

Have you looked into setting the background color of the cell's contentView and keeping the cell, accessory, and image views transparent?

Also, this article might help show you some alternatives.

Comments

[smirkingman]

I was using that article for inspiration, but unfortunately he doesn't use transparent cells. Setting the contentView background color had very strange effects. I also tried setting contentView.opaque = NO, but still looked awful.

[smirkingman]

actually I had to do 1 more thing. The cell.textLabel.backgroundColor needed to be set AFTER the cell's background color. I have NO idea why I need to do this, but now it's working. Thanks Mike!