Resizing UIImageView within custom UITableViewCell yielding inconsistent results

Question

I'm building a table based on a UITableViewCell prototype I have created in a XIB file. The cell consists of a couple labels and an image view, which needs to be stretched to fit the full device width. Once the width is stretched, I also want to stretch the height to the same proportion, so my image is scaled consistently.

I'm getting mixed results. I've been able to get the CELL to size appropriately using the following code:

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    //pull the image from the array based on the indexPath
    NSUInteger row = [indexPath row];
    CITImage *image = [report.reportImages objectAtIndex:row];
    UIImage *img = [UIImage imageWithData:image.imageData];

    //see how we need to scale the image to make it fit within the full width of the screen
    float scale = tableView.frame.size.width /img.size.width;
    float imgHeight = img.size.height * scale;

    //return the necessary cell height
    return imgHeight;
}

The problem is that the UIImageView within the cell is not resizing correctly. I'm using the following code to set the cell's properties when it's ready to be drawn:

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

    //pull the image from the array based on the indexPath
    NSUInteger row = [indexPath row];
    CITImage *image = [report.reportImages objectAtIndex:row];
    UIImage *img = [UIImage imageWithData:image.imageData];

    //attempt to get a reusable cell
    CITImageCell *cell;
    cell= [tableView dequeueReusableCellWithIdentifier:@"CITImageCellIdentifier"];
    if (cell == nil) {
        // Load the top-level objects from the custom cell XIB.
        NSArray *topLevelObjects = [[NSBundle mainBundle] loadNibNamed:@"CITImageCell" owner:self options:nil];
        cell = [topLevelObjects objectAtIndex:0];
    }

    //see how we need to scale the image to make it fit within the full width of the screen
    float scale = tableView.frame.size.width /img.size.width;
    float imgHeight = img.size.height * scale;

    NSLog (@"Height %f",cell.imageView.frame.size.height);
    //size the image view
    cell.imageView.frame = CGRectMake(0,34, tableView.frame.size.width, imgHeight+34 );
    NSLog (@"Height %f",cell.imageView.frame.size.height);

    //assign the image
    cell.imageView.image = img;

    //return the cell ready to go
    return cell;

}

The two NSLog statements verify that the height value is being calculated correctly, but when the image is displayed on-screen, it is RARELY sized correctly. MOST of the time it's the same size as defined in the XIB file, but SOMETIMES it takes on the correct height. I have not found a very good pattern. It's never the first item in the table, always the second, and sometimes the fourth and fifth.

Still digging through documentation and other people's stories, and what gets me the most is that I can get the cell sized right, and that the image height is calculated right, but that it's only displayed right some of the time.

Any help? Links to screenshots showing what I'm experiencing are below (yes, I was watching the debates last night)

Unscaled image

Correctly scaled image

Thanks!

I'm wondering if I need to generate the UIImageView completely at runtime. I've read some other posts where you can't MOVE a UIImageView that's within a custom cell; I wonder if the same applies with RESIZING that UIImageView. — Chet at C2IT
Got it working! I don't know if this is the only way, but I had to create the UIImageView at run time and manually add it to the cell instead of trying to resize the one in the XIB file. Can anyone explain why this is? Here's the code I wound up with: CGRect imageFrame = CGRectMake(0,34, tableView.frame.size.width, imgHeight); UIImageView *imgView = [[UIImageView alloc] initWithFrame:imageFrame]; [imgView setImage:img]; [cell addSubview:imgView]; — Chet at C2IT

Ray Shih Ray Shih · Accepted Answer · 2013-01-08T11:51:49

I meet the same problem. And after one hour work, I realize what happened!

The Problem is that the UITableViewCell already has an imageView!!

And if you use the SAME property name imageView for the UIImageView, somehow the system will modify the imageView you defined.

So the solution is DONT use the name imageView, try to use other name.

ex:

@property (nonatomic, weak) UIImageView *myImageView;

At least work for me. :)

Resizing UIImageView within custom UITableViewCell yielding inconsistent results

3 Answers