Image "moves" when varying heightForRowAtIndexPath in UITableViewCell.

Question

I have a table view with varying height, as defined in the heightForRowAtIndexPath. For some very odd reason, the image is "indented" to the right based on the height; if the height is low enough, the image is stuck to the left side of the cell, but as the height increases, the image for said cell is shifted rightward compared to other rows.

The result of this is a very poor looking list, with images floppily laid out in a zig-zag pattern depending on the height of each individual row.

The problem is revealed by this simple example:

- (CGFloat)tableView:(UITableView *)tableView 
  heightForRowAtIndexPath:(NSIndexPath *)indexPath 
{
    return (indexPath.row+1) * 50;
}

Each cell is set up (simplified) as a "Subtitle" style cell with:

// ...
cell.textLabel.text = @"foo";
cell.detailTextLabel.text = @"bar";
cell.imageView.backgroundColor = [UIColor redColor]; // for debugging; i have images with transparent bg
cell.imageView.image = anImageThatIs55x50pixelsBig;
return cell;

Any ideas? My head bleeds from the wall-love-affair.

Edit: uploaded a screen which displays this. The "image" is just a screenshot of a tiny area of the screen which makes it look a little weird, but you get the picture I'm sure: http://img28.imageshack.us/img28/549/screenshot20100311at172.png

Answer 1

A potential cause could be the contentMode.

UIView (a superclass of UIImageView) defines the property contentMode, which determines how a view lays out its content when its bounds rectangle changes. You may want to change this property to another mode, as in the case of an UIImageView it determines how and where an image is drawn.

Answer 2

What happens if you add your own UIImageView to the UITableViewCell instead of using the built in one? I believe the built in one is designed to add padding if there is room for it and ignore it if there is not.