Help adding a backgroundView to UITableViewCell

Question

I'm getting really desperate trying to add a UIImageView to UITableViewCell.backgroundView. All my efforts have resulted in this crappy rendering:

It looks like the cell's label's white background is sitting on top of cell's background and covering portions of it.

I tried setting the label's background color to clear, or some other color and it does not have any event. It is always white.

The reason I know it's the text label's background causing this white area is that if I don't do [cell setText:@"Cell text here"]; the white area is gone and I see just the cell's background image.

Here's the code that I'm using. The table view is added in the .xib file and UITableView is added to UIViewController:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [myCollection.items count];
}

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

    NSUInteger rowIndex = indexPath.row;
    static NSString *CellIdentifier = @"Cell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
        cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"darkCellBackground.png"]];
     cell.selectedBackgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"darkCellBackground.png"]];
    }


    [cell setText:@"Cell text here"];


    return cell;
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    // Navigation logic may go here. Create and push another view controller.
    // AnotherViewController *anotherViewController = [[AnotherViewController alloc] initWithNibName:@"AnotherView" bundle:nil];
    // [self.navigationController pushViewController:anotherViewController];
    // [anotherViewController release];

    [tableView deselectRowAtIndexPath:indexPath animated:YES];
}

- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath {
    return NO;
}

I'm sure I'm doing something wrong but cant quite figure out what.

Answer 1

Did you try setting the cell's textLabel to not be opaque?

cell.textLabel.opaque = NO;

Or, if your background is a solid color where the label is, you could set the label's background color to the appropriate color.

---

Deprecation sidenote:

[UITableViewCell setText:] is deprecated in OS 3.0 - you shouldn't use it (if you're building for 3.0+) as it could disappear in the future. Instead, you should use UITableViewCell's textLabel property to set the text of the UILabel directly.

---

Memory management sidenote:

You're leaking two instances of UIImageView for every UITableViewCell you create using this code. These lines

cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"darkCellBackground.png"]];
cell.selectedBackgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"darkCellBackground.png"]];

should be changed to this

cell.backgroundView = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"darkCellBackground.png"]] autorelease];
cell.selectedBackgroundView = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"darkCellBackground.png"]] autorelease];

Or you could use release instead of autorelease (doing it properly; don't try to just substitute release for autorelease, of course). Either way, the UITableViewCell takes ownership of the background views and because you alloc'd the objects you need to release your ownership of the objects.

Answer 2

Maybe you should take a look at this:

http://stackoverflow.com/questions/899140/how-can-i-set-the-background-color-of-a-cell-in-uitableview-on-iphone

Answer 3

What you want is:

cell.backgroundColor = [UIColor colorWithPatternImage:[[UIImage imageNamed:@"some.png"]stretchableImageWithLeftCapWidth:320 topCapHeight:44]];