How to programmatically scale a UIImageView to a fixed width and flexible height?

Question

I am trying to create a single table view cell that displays an image, downloaded from the web, and scaled down to fit the width of the device. Part of the problem is that I need to figure out how to resize the cell after the image is downloaded. In other words, I will set a default height while the image is loading, then once the image has loaded, I want to resize the height of the cell. I know that I can set the content mode of the image view to "aspect fit" once I specify a fixed width and height, but I'm not sure how to set the constraints programmatically so that the height can remain flexible.

How can I define these constraints in code?

If I understand correctly, you want to make the height of the cell the height of the image? — Caleb Kleveter
Not necessarily the height of the image, but the same height as the UIImageView since the image has been scaled down. — Andrew
The image is downloaded after the cell is displayed. Let say the default height is 50. Once the image is downloaded, we set the image on the UIImageView with a content mode of aspect fit. If I set a fixed width and height on the UIImageView, then it automatically scales down the image. I know I want the width to be the full width of the device, but I want the height to be flexible. If it's a portrait image, then the height will definitely be larger than the width. That's what I'm trying to account for. However, I don't know how to make the height flexible. — Andrew
@CalebKleveter Sorry, I realized my question did not clearly state that I was downloading an image. I have updated my question to be more clear. — Andrew

Renandus Renandus · Accepted Answer · 2015-12-17T23:06:48

use this code to resize the image after image has been downloaded :

//example
//UIImageView *yourImageView = [self imageWithImage:yourDownloadedImage scaledToWidth:CGRectGetWidth(self.view.frame)]


- (UIImage*)imageWithImage: (UIImage*) sourceImage scaledToWidth:(float)i_width{
float oldWidth = sourceImage.size.width;

if (oldWidth <= self.view.frame.size.width) {
    return sourceImage; // remove this line if you want the image width  follow your screen width
}
float scaleFactor = i_width / oldWidth;
float newHeight = sourceImage.size.height * scaleFactor;

UIGraphicsBeginImageContext(CGSizeMake(i_width, newHeight));
[sourceImage drawInRect:CGRectMake(0, 0, i_width, newHeight)];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}

then set your height of your cell with this :

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell *cell = [super tableView:tableView cellForRowAtIndexPath:indexPath]; // i'm using static cell so i call this
    return [self calculateHeightForConfiguredSizingCell:cell];
}

- (CGFloat)calculateHeightForConfiguredSizingCell:(UITableViewCell *)sizingCell {
[sizingCell layoutIfNeeded];

CGSize size = [sizingCell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize];
return size.height;
}

How to programmatically scale a UIImageView to a fixed width and flexible height?

1 Answers