使用故事板中的AutoLayout在表格视图单元格中的图像

Question

I have a Table View Cell , and all that is in it is an ImageView .

How would I get the Table View Cell size to change dynamically with the Image (sizes) I get from Instagram's API ?

I'm having a hard time solving, because there are essentially two variables I'm solving for:

• Variable Size of Image from Instagram API (standard res always seem to be at least 600+ so will always be able to stretch from left to right no matter what phone size)
• Variable iPhone Size (iPhone 6, 6 Plus, etc)

I've tried pinning all sides, that didn't work. I've tried pinning left and right along with add constraints Bottom Space to Container Margin and Top Space to Container Margin, that didn't work.

But I can't get it right. I'm sure its something small I'm missing. Any help would be appreciated. Thanks!

I'm using Xcode 6 and iOS 8. I'm using Storyboard. Only Portrait orientation.

Answer 1

I don't know whether this can be done in the storyboard or not. Maybe there's a way to do it in iOS 8 using self-sizing cells, but I didn't find the way to do that, and in any case, that would only work for iOS 8, not 7. Anyway, it's easy enough to do with code, and simple constraints setup in the storyboard. Just pin your image view to all four sides of the cell (I did it in my example using the standard margins of 8 to all sides), and then implement heightForRowAtIndexPath,

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    CGSize imageSize = [[UIImage imageNamed:self.theData[indexPath.row]] size];
    CGFloat height = imageSize.height/imageSize.width * (tableView.frame.size.width - 16);
    return height + 16;
}

The 16's in the code are to account for the padding of 8 on all the sides of the image view. If you have your image view go all the way to the left and right edges, then you can eliminate those.