UIImageView not correctly resizing in self sizing cells iOS 8

Question

I'm trying to achieve something similar to the 9gag app where the cells automatically resize based in the size of the image. The width hugs the sides but the height is resized as needed.

I have a Label that consists of the title above it as well as a UIImageView and below the image I have share icons etc. I've set the constraints for the image to be the UIImageView and to the lower share icons as well as to both leading and trailing spaces. It seems like I've tried every combination of switching "Mode" of the view (i.e. aspect fill, aspect fit) when I do aspect fit it sizes the images correctly but adds a bunch of padding to both the lower and upper parts of the image (screenshot included below)

The label and icons all have the appropriate constraints set (as far as I can tell)

I've searched for hours trying to find someone with a similar issue but to no avail I can't seem to find anything in regards to self sizing cells that use images that may vary in size.

Can anyone point me in the right direction or know of the solution to my problem? All help is very much appreciated as always!

Answer 1

As fas as I've seen, you can't really do image resizing from Interface Builder. You would have to manually write the code in your ViewController.m file. Have something like this:

- (void) adjustImageSize{
    CGSize imageSize = self.imageView.image.size;
    CGSize imageViewSize = self.imageView.frame.size;
    float imageAspectRatio = imageSize.width/imageSize.height;
    CGRect frame = self.statusImage.frame;
    frame.size.height =imageViewSize.width/imageAspectRatio;
    self.imageView.frame = frame;
    // set your Cell's frame here, based on your other constraints (labels/buttons etc), after you have resized your image
}

You can call this from your tableView datasource function. And then add this delegate function to tell the tableView the dynamic height of each cell.

- (CGFloat) tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    UITableViewCell *cell = [self tableView:tableView cellForRowAtIndexPath:indexPath];
    return cell.frame.size.height;
}

This is how I did dynamic resizing of images for a NewsFeed-based app. Hope this helps.

Answer 2

This occurs due to the UIImageView intrinsic content size (image size). While your image view's width gets resized by leading and trailing space constraints, nothing limits its height so it remains equal to the original image height.

The solution is to calculate an aspect ratio of the image and set it as a ratio constraint to the UIImageView width

@interface PostImageViewCell()

@property (nonatomic, strong) NSLayoutConstraint *aspectConstraint;

@end

@implementation PostImageViewCell

- (void) setAspectConstraint:(NSLayoutConstraint *)aspectConstraint {

    if (_aspectConstraint != nil) {
        [self.postImage removeConstraint:_aspectConstraint];
        _aspectConstraint = nil;
    }
    if (aspectContraint != nil) {
        [self.postImage addConstraint:aspectConstraint];
        _aspectConstraint = aspectConstraint
    }
}

- (void)setPicture:(UIImage *)image {

    CGFloat aspect = image.size.width / image.size.height;
    self.aspectConstraint = [NSLayoutConstraint constraintWithItem:self.postImage
                                                         attribute:NSLayoutAttributeWidth
                                                         relatedBy:NSLayoutRelationEqual
                                                            toItem:self.postImage
                                                         attribute:NSLayoutAttributeHeight
                                                        multiplier:aspect
                                                          constant:0.0];
    [self.postImage setImage:image];
}

@end

Answer 3

I have the same problem.

I noticed that the cell will calculate its size based on the image in your imageView and that it ignores that the UIImageView will change the image's size to make it fit its bounds.

Example: Your image has the size 1000x1000. If you set your content mode to 'Aspect Fit' the UIImageView will display the image with the width of itself. So the displayed image might have the width of your iPhone - e.g. 750px and the height 750px (it's a square). Now the cell will resize itself as if the imageView would display the image in its original format; 1000x1000. Which leads to unwanted white space.

My workaround right now is to size down the image manually but this is very costly and it also creates some other problems with my UI.

Did you find a better solution?