UITableViewCell with background image and dynamic height

Question

I have a tableView that present a list of Books, each of the table cells includes "Book name" and "Book description". The cell's height is determined by the length of the book description, so cells have different heights.

Every cell also has a background image that of course starches according to the cell's height.

I'm drawing the background image in the cell drawRect as follow:

- (void)drawRect:(CGRect)rect
{
    UIImage *bgImage = [UIImage imageNamed:@"cell_BG.png"];
    bgImage = [bgImage stretchableImageWithLeftCapWidth:60.0 topCapHeight:60.0];
    [bgImage drawInRect:rect];
}

This code works, the problem is the scrolling performance, it's not smooth as I would like it to be.
I noticed that the main problem is the changing height, this seems to trigger a drawRect call for all cells, including the reusable cells.
(When I tried to set the same height for all cells the scrolling performance improved drastically, but I must use dynamic height...)

Is there a better approach to do this so the table scrolling will improve?

Patrick Borkowicz Patrick Borkowicz · Accepted Answer · 2012-06-14T16:07:12

You probably don't want to override drawRect for a UITableViewCell's view since drawRect is pretty darn expensive.

Try placing a UIImageView on top of your prototype cell and setting its image (you can do so programatically or just drag in interface builder). You can then set the image view's frame size to match the dynamic height of its respective UITableViewCell. UIImageView is optimized for images so this approach should run smoother.

You can set the image and frame size of your imageView in the cellforRowAtIndexPath method in you UITableViewController.

UPDATE: You'll probably also want to set the content mode to scale and fit your image.

From UIView class reference: "contentMode - Provides layout behavior for the view’s content, as opposed to the frame of the view. This property also affects how the content is scaled to fit the view and whether it is cached or redrawn."

For example redraw calls drawRect anytime the view's frame changes.

It can be set programatically:

UIView* view = [[UIView alloc] initWithFrame:CGRectMake...etc];
view.contentMode = UIViewContentModeRedraw; // for example

or just by selecting the view in interface builder and setting the content mode attribute in the attributes inspector. I think your looking for UIContentModeScaleToFit or something like that. Also if using interface builder check the struts and springs of the UIImageView in the size inspector.

UITableViewCell with background image and dynamic height

1 Answers