subclassed UITableViewCell - backgroundView covers up anything I do in drawRect

Question

I'm trying to make a subclassed UITableViewCell where I draw an image in the upper right corner. I have it working perfectly - except when I set self.backgroundView, my background image covers up the image drawn in drawRect.

There must be a way to be able to set a background image (and the selectedBackgroundView) without covering up what's being done in drawRect.

Am I going about this the wrong way?

EDIT: I've posted an example project with the problem.

    - (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {

    if ((self = [super initWithStyle:style reuseIdentifier:reuseIdentifier])) {

     // TODO: figure out why this covers up self.starImage that's drawn in drawRect
         self.backgroundView = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"cellBackground.png"]] autorelease];
    }
    return self;
}

- (void)drawRect:(CGRect)rect {
    [self.starImage drawAtPoint:CGPointMake(self.bounds.size.width - self.starImage.size.width, 0.0)];
}

Answer 1

Have you tried adding a [super drawRect:rect]; there?

Answer 2

You shouldn't override the -drawRect: of a tablecell. Instead, create a new custom view and add it to the cell's contentView, and draw in there.

Answer 3

You are not really supposed to mix the drawing with your cell like that, you are operating at a lower-level than the UITableViewCell machinery is operating, and this is why you get this problem.

This is just one of the various problems you will end up running into. You will run into other problems as you go down that path, including problems with how the selection works.

The proper approach is to create a custom UIView that contains the code to draw, and then you can addSubView that into your cell's root view. That will take care of the rendering in the proper order, and wont interfere with the selection system, and will work correctly in this case.

Answer 4

Here's a solution that's a bit of a kludge, but it fits my requirements exactly... with one fatal flaw: when cells get reused, the star corner shows up when I don't want it to.

http://dl.dropbox.com/u/2349787/UIImage_Position_subclassed_cell2.zip

I'm still using drawRect here, but only because self.starImage is null if you access it within the initWithStyle method. Also, instead of adding the subview to self.contentView, I'm adding it to self.backgroundView to prevent the cell's delete button from interfering with it. The star corner is positioned correctly in both portrait and landscape mode, and works fine within edit mode as well.

With the cell reuse issue though, It's still a no go... so, maybe I'm back to trying to do it without subclassing UITableViewCell.

I'm open to any further suggestions. Thank you!

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    if ((self = [super initWithStyle:style reuseIdentifier:reuseIdentifier])) {
        // Initialization code

        self.backgroundView = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"cellBackground.png"]] autorelease];
    }
    return self;
}

- (void) drawRect:(CGRect)rect {

    UIImageView *imageView = [[[UIImageView alloc] initWithFrame:CGRectMake(self.bounds.size.width - self.starImage.size.width, 0, self.starImage.size.width, self.starImage.size.height)] autorelease];
    imageView.image = self.starImage;
    imageView.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin;

    [self.backgroundView addSubview:imageView];
}