Custom TableViewCell with dynamic height and full width image using Autolayout - ios

Question

I'm really stuck using autolayout and a custom tableviewcell.
I want my tableviewcell to have a dynamic height. The table cell should contain an image with the same width as the tableviewcell and the height should adjust based on an aspect ratio of 0.6
This is what it should look like
But this is what I get
To give you a clear look of what is going on I gave the tableViewCell and it's subviews some pretty background colors…
Green = thumbnailView
Blue = self
Red = contentView
Purple = hotspotNameLabel
Yellow = categoryLabel
This is what my code looks like:
Initializer:
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
self.contentView.backgroundColor = [UIColor redColor];
self.backgroundColor = [UIColor blueColor];
CGFloat imageAspectRatio = 720/432;
CGFloat imageHeight = self.contentView.bounds.size.width / imageAspectRatio;
CGRect imageFrame = CGRectMake(0, 0, self.contentView.bounds.size.width,imageHeight);
self.thumbnailView = [[UIImageView alloc] initWithFrame:imageFrame];
[self.thumbnailView setBackgroundColor:[UIColor greenColor]];
[self.thumbnailView setContentMode:UIViewContentModeScaleAspectFill];
[self.thumbnailView.layer setMasksToBounds:true];
[self.contentView addSubview:self.thumbnailView];
self.hotspotNameLabel = [[UILabel alloc] initWithFrame:CGRectMake(40, 15, self.contentView.bounds.size.width - 80, 20)];
[self.hotspotNameLabel setAutoresizingMask:UIViewAutoresizingFlexibleWidth];
[self.hotspotNameLabel setTextColor:[UIColor colorWithWhite:(32/255.0) alpha:1]];
[self.hotspotNameLabel setLineBreakMode:NSLineBreakByWordWrapping];
[self.hotspotNameLabel setNumberOfLines:0]; // Unlimited Lines
[self.hotspotNameLabel setBackgroundColor:[UIColor purpleColor]];
[self.hotspotNameLabel setFont:[UIFont fontWithName:#"AvenirNext-Medium" size:20]];
[self.contentView addSubview:self.hotspotNameLabel];
// Category Label
self.categoryLabel = [[CategoryLabel alloc] initWithFrame:CGRectMake(40, 15, self.contentView.bounds.size.width - 80, 10)
categoryId:22 categoryName:#"Food"];
[self.contentView addSubview:self.categoryLabel];
// Constraints
[self.contentView setTranslatesAutoresizingMaskIntoConstraints:false];
[self.hotspotNameLabel setTranslatesAutoresizingMaskIntoConstraints:false]; // Enables autosizing
[self.categoryLabel setTranslatesAutoresizingMaskIntoConstraints:false];
[self.thumbnailView setTranslatesAutoresizingMaskIntoConstraints:false];
[self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.thumbnailView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem: self.contentView attribute:NSLayoutAttributeWidth multiplier:1.0f constant:0]];
[self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.thumbnailView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem: self.contentView attribute:NSLayoutAttributeWidth multiplier:0.6f constant:0]];
[self.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|-0-[nameLabel]-0-|" options:0 metrics:nil views:#{#"nameLabel": self.hotspotNameLabel}]];
[self.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|-0-[thumbnail]-20-[nameLabel]-10-[categoryLabel]-0-|" options:0 metrics:nil views:#{#"thumbnail": self.thumbnailView,#"nameLabel": self.hotspotNameLabel, #"categoryLabel":self.categoryLabel}]];
}
return self;}
Layout subviews:
-(void)layoutSubviews {
[super layoutSubviews];
[self.contentView setNeedsLayout];
[self.contentView layoutIfNeeded];
self.hotspotNameLabel.preferredMaxLayoutWidth = CGRectGetWidth(self.hotspotNameLabel.bounds);
}
tableView:HeightForRowAtIndexPath:
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
return [self heightForLargeCellAtIndexPath:indexPath];
}
- (CGFloat)heightForLargeCellAtIndexPath:(NSIndexPath *)indexPath {
LargeHotspotCell *sizingCell = [[LargeHotspotCell alloc] init];
[self configureLargeCell:sizingCell atIndexPath:indexPath];
[sizingCell setNeedsLayout];
[sizingCell layoutIfNeeded];
CGFloat height = [sizingCell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height;
return height + 1 ;
}

Answer 1

Here you are my little tutorial with explaining basic concepts of autolayout.
Your first step, should be subclassing UITableviewCell, I named my new cell DynamicTableViewCell and assigned it in the identity inspector.
I dragged and dropped UILabel and UIImageView into contentView.
Below a screenshot with UILabel constraints, I added simultaneously leading and trailing space constraints, in order to make my label equal to contentView width. And it is aligned to the bottom of the cell.
Now, it is time to assign constraints to UIImageView. I am adding aspect ratio 0.6 (imageHeight/imageWidth = 0.6) and adding leading and trailing space to contentView. Feel free to play with constants to achieve your desired purposes.
Final results in iphone5, iphone6 simulator
Your image height (green color) is 60pt in 5s screen, 70pt in 6 screen and width resized properly:
For your better understanding, I am publishing Working Sample Project on github