使用 Autolayout 自定义具有动态高度和全宽图像的 TableViewCell

Question

我真的被自动布局和自定义 tableviewcell 卡住了。

我希望我的 tableviewcell 具有动态高度。表格单元格应包含与表格视图单元格宽度相同的图像，高度应根据纵横比 0.6 进行调整

This is what it should look like

But this is what I get

为了让您清楚地了解发生了什么，我为 tableViewCell 及其子视图提供了一些漂亮的背景颜色……

• 绿色 = 缩略图视图
• 蓝色 = 自我
• 红色 = 内容视图
• 紫色 = 热点名称标签
• 黄色 = 类别标签

这是我的代码的样子：

初始化器：

- (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;}

布局子视图：

-(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

这是我解释自动布局基本概念的小教程。 您的第一步，应该是子类化UITableviewCell，我将我的新单元命名为DynamicTableViewCell 并在身份检查器中分配它。

我将 UILabel 和 UIImageView 拖放到 contentView 中。 在带有 UILabel 约束的屏幕截图下方，我同时添加了前导和尾随空格约束，以使我的标签等于 contentView 宽度。它与单元格的底部对齐。

现在，是时候为 UIImageView 分配约束了。我正在添加纵横比 0.6 (imageHeight/imageWidth = 0.6) 并向 contentView 添加前导和尾随空格。随意使用常量来实现您想要的目的。

iphone5、iphone6模拟器中的最终结果

您的图像高度（绿色）在 5s 屏幕中为 60pt，在 6 屏幕中为 70pt，并且宽度调整正确：

为了您更好的理解，我发布Working Sample Project on github