how can UITableViewCell dynamically adapt to new image with aspect ratio retained?

Question

I'm designing a tableview that can dynamically loads new image into cells.

My tableview hierarchy is like this: tableview -> myCustomCell -> content view -> myCustomImageView.

What I want is this: After tableViewCells shown on the screen at given size (say 300 * 50 ), the user can tap some cell to show certain sized image (say 600 * 600 ). To update the cell, I use tableView.beginUpdates() and tableView.endUpdates() . Then the tabelViewCell's size should changed to 300 * 300 .

After so many tries, I face the problem below:

If I set the imageView's contentmode to aspectFit, the tableViewCell's size and imageView's size both became 300 * 600 (the actual image is 300 * 300 ), with blank area at the cell's top and bottom regions, like this:

If I set the imageView's contentmode to aspectFill, the tableViewCell's size and imageView's size both became 300 * 600 (the actual image is 600 * 600 ), with left side and right side is clipped off, like this:

Is there anyway to make the tableViewCell best fit the image while keeping aspect ratio? Thanks a lot.

Answer 1

When you load an image, calculate the images aspect ratio.

Then add a constraint to the UIImageView to fix its aspect ratio. Aspect ratio constraints can not be changed once created, so you have to remove any existing one and add a new one every time you change the image. Something like:

// Declare constraint as a property so you can remove it
@property NSLayoutConstraint *constraint;

// Remove previous constraint as multiplier property is read only.
if (self.constraint){
  [self.imageView removeConstraint:self.constraint];
}

// Calculate aspect ration
CGFloat aspectRation = <insert calculation...>

// Add a new constraint for the new image setting the aspect ration
self.constraint = [NSLayoutConstraint constraintWithItem:self.imageView  
                                          attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual 
                                             toItem:self.imageView 
                                          attribute:NSLayoutAttributeWidth 
                                         multiplier:aspectRatio constant:0.0f];

// Add the new constraint.
[self.imageView addConstraint:constraint];

// View needs updated.
[self.contentView setNeedsLayout];

This should force the image to have and aspect ratio calculated.

So that the image view knows its width or height(but not both as that would clash with aspect ratio), you have to add constraints for the image view to meet your display needs. eg You might want to make it have equal width with the containing view so it always fills the full width and the height will then change based on aspect ratio etc... This is down to how you want the image to fill the cell.

If using storyboard, you may find it easier to give the UIImageView an aspect ratio so that IB does not complain about missing constraints. CTRL-drag that into your cell header so you have an IBOutlet for that constraint. First time around, remove the IB version from the UIImageView.

Answer 2

Hope this code will help you

cimageView.contentMode = UIViewContentModeCenter;
 if (imageView.bounds.size.width > ((UIImage*)imagesArray[i]).size.width && imageView.bounds.size.height > ((UIImage*)imagesArray[i]).size.height) {
   imageView.contentMode = UIViewContentModeScaleAspectFit;

}