在contentView边上设置约束会破坏UITableViewCell与砌体

Question

我正在尝试创建一个左侧有图像的tableview单元格，右侧有一个内容框。图像应为方形和单元格宽度的20％，内容框（下面代码中的background）应至少与图像一样大。最后，我想尊重tableview本身的布局边距。

除了最后一步，尊重表格视图的边距之外，这样做效果很好。设置此结果会导致我的内容框在tableview很宽时设置得太大或太小。

// Base class
    [self.background setContentCompressionResistancePriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisVertical];

    [self.background mas_makeConstraints:^(MASConstraintMaker *make) {
        make.leading.equalTo(self.contentView).with.offset(8.0).with.priorityMedium();
        make.trailing.equalTo(self.contentView).with.offset(-8.0).with.priorityMedium();
        make.top.equalTo(self.contentView).with.offset(4.0);
        make.bottom.equalTo(self.contentView).with.offset(-4.0);
    }];

    // **** This block results in respecting tableview margins, but height constraints of background are not respected.  Comment it out to create image "B".
    [self.contentView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.leading.equalTo(self.mas_leadingMargin);
        make.trailing.equalTo(self.mas_trailingMargin);
        make.top.equalTo(self.mas_top).with.priorityHigh();
        make.bottom.equalTo(self.mas_bottom).with.priorityHigh();
    }];
    // **** End problematic block

// Subclass
    [self.courseImageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.leading.equalTo(self.contentView).with.offset(8.0);
        make.height.and.width.equalTo(self.contentView.mas_width).multipliedBy(.20).with.priorityHigh();
        make.centerY.equalTo(contentView);
    }];
    [self.background mas_makeConstraints:^(MASConstraintMaker *make) {
        make.leading.equalTo(self.courseImageView.mas_trailing).with.offset(8.0);
        make.height.greaterThanOrEqualTo(self.courseImageView).with.priorityMedium();
        make.height.equalTo(self.courseImageView).with.priorityLow();
    }];

A。）这里，内容框的高度正确，但不考虑边距

B。）在这里，边距得到尊重，但background已经扩大到荒谬的数量。此外，当像这样重新加载时，tableview会显示为向上滚动。

Answer 1

您需要检查Masonry默认应用的优先级。他们的文件并没有清楚地说明这一点。

Masonry - Learn to Priortize

第1步

尝试在有问题的区块内为leading / trailing设置高优先级 -

// **** This block results in respecting tableview margins, but height constraints of background are not respected.  Comment it out to create image "B".
    [self.contentView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.leading.equalTo(self.mas_leadingMargin).with.priorityHigh();
        make.trailing.equalTo(self.mas_trailingMargin).with.priorityHigh();
        make.top.equalTo(self.mas_top).with.priorityHigh();
        make.bottom.equalTo(self.mas_bottom).with.priorityHigh();
    }];
    // **** End problematic block

第2步

尝试在backgroundColor上设置cell.contentView，看看它在您的案例中的延伸程度A＆amp; B.那会给你一个更好的主意。

第3步（不推荐的方法，最坏情况）

没有任何效果。

• 将表格的leading/trailing部分layoutMargins重置为0。
• 在您的子类中的wrapperView内添加新的cell.contentView，并将其leading/trailing设置为预期值。
• 如果您不想添加wrapperView，请使用预期的leading/trailing值作为leading/trailing内cell.contentView内所有组件的直接值。< / LI>

最终，如果没有像预期的那样解决问题，那么你决定在多大程度上追逐这个问题。我有时不得不在＃3定居。希望它有所帮助。

Answer 2

最后，代码当然正在完成我告诉它要做的事情。上面的代码将高度（大于或等于）设置为等于表视图单元格宽度的20％。然而，这在设置高度时忽略了布局边距，导致了奇怪的行为。

除此之外，我不认为在父类中对contentView添加约束是正确/必要的。只需添加availableWidth视图就可以解决iPad上的问题，但在iPhone上，布局再次破裂。为了使两个平台都能正确布局，我必须改变我的基类约束，如下所示。

这是我的更新代码：

// Base Class
    [self.background mas_makeConstraints:^(MASConstraintMaker *make) {
        make.leading.equalTo(self.contentView.mas_leadingMargin).with.priorityMedium();
        make.trailing.equalTo(self.contentView.mas_trailingMargin).with.priorityMedium();
        make.top.equalTo(self.contentView.mas_top).with.offset(4.0);
        make.bottom.equalTo(self.contentView.mas_bottom).with.offset(-4.0);
    }];
// *** Constraints on self.contentView are not necessary to respect the default margins! ***

// Subclass
    ...
    UIView *availableWidth = [UIView new];
    availableWidth.hidden = YES;
    [self.contentView addSubview:availableWidth];

    [self.courseImageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.leading.equalTo(self.contentView.mas_leadingMargin);
        make.height.and.width.equalTo(availableWidth.mas_width).multipliedBy(.20);
        make.centerY.equalTo(contentView);
    }];
    [self.background mas_makeConstraints:^(MASConstraintMaker *make) {
        make.leading.equalTo(self.courseImageView.mas_trailing).with.offset(8.0);
        make.height.greaterThanOrEqualTo(availableWidth.mas_width).multipliedBy(.20).with.priorityHigh();
    }];
    [availableWidth mas_makeConstraints:^(MASConstraintMaker *make) {
        make.leading.equalTo(self.contentView.mas_leadingMargin);
        make.trailing.equalTo(self.contentView.mas_trailingMargin);
        make.height.equalTo(@0);
        make.top.equalTo(self.contentView);
    }];