使用锚以编程方式设置 UITableViewCell 的布局

Question

我正在尝试使用自动布局的锚点创建自定义 UITableViewCell。单元格应：

有两列
有三行
"cells" 的内容应该只是 UILabel
应该根据行的高度动态设置高度

但是，UIViewCell 的布局锚点似乎与 UIView 的工作方式不同，我现在得到了我想要的结果，我想这可能是由于 UITableView 的复杂视图层次结构（内容视图、附件视图...） .

我是不是犯了一些明显的错误？将 UILabel 包装到 UIView 或 UIStackView 中可以解决问题吗？

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {

        UILabel *col1row1 = [UILabel new];
        UILabel *col1row2 = [UILabel new];
        UILabel *col1row3 = [UILabel new];
        UILabel *col2row1 = [UILabel new];
        UILabel *col2row2 = [UILabel new];
        UILabel *col2row3 = [UILabel new];

        [self setTranslatesAutoresizingMaskIntoConstraints:NO];
        [self.contentView setTranslatesAutoresizingMaskIntoConstraints:NO];
        [col1row1 setTranslatesAutoresizingMaskIntoConstraints:NO];
        [col1row2 setTranslatesAutoresizingMaskIntoConstraints:NO];
        [col1row3 setTranslatesAutoresizingMaskIntoConstraints:NO];
        [col2row1 setTranslatesAutoresizingMaskIntoConstraints:NO];
        [col2row2 setTranslatesAutoresizingMaskIntoConstraints:NO];
        [col2row3 setTranslatesAutoresizingMaskIntoConstraints:NO];

        self.col1row1 = col1row1;
        self.col1row2 = col1row2;
        self.col1row3 = col1row3;
        self.col2row1 = col2row1;
        self.col2row2 = col2row2;
        self.col2row3 = col2row3;

        [self.contentView addSubview:col1row1];
        [self.contentView addSubview:col1row2];
        [self.contentView addSubview:col1row3];
        [self.contentView addSubview:col2row1];
        [self.contentView addSubview:col2row2];
        [self.contentView addSubview:col2row3];

        [col1row1 setTextAlignment:NSTextAlignmentLeft];
        [col1row2 setTextAlignment:NSTextAlignmentLeft];
        [col1row3 setTextAlignment:NSTextAlignmentLeft];
        [col2row1 setTextAlignment:NSTextAlignmentRight];
        [col2row2 setTextAlignment:NSTextAlignmentRight];
        [col2row3 setTextAlignment:NSTextAlignmentRight];

        [col1row1 setBackgroundColor:[UIColor yellowColor]];
        [col1row2 setBackgroundColor:[UIColor yellowColor]];
        [col1row3 setBackgroundColor:[UIColor yellowColor]];
        [col2row1 setBackgroundColor:[UIColor yellowColor]];
        [col2row2 setBackgroundColor:[UIColor yellowColor]];
        [col2row3 setBackgroundColor:[UIColor yellowColor]];

        [self.widthAnchor constraintEqualToAnchor:self.superview.widthAnchor multiplier:1.0].active = YES;
        [self.contentView.widthAnchor constraintEqualToAnchor:self.superview.widthAnchor multiplier:1.0].active = YES;

        [col1row1.leftAnchor constraintEqualToAnchor:self.contentView.leftAnchor constant:1.0].active = YES;
        [col1row2.leftAnchor constraintEqualToAnchor:self.contentView.leftAnchor constant:1.0].active = YES;
        [col1row3.leftAnchor constraintEqualToAnchor:self.contentView.leftAnchor constant:1.0].active = YES;
        [col2row1.rightAnchor constraintEqualToAnchor:self.contentView.rightAnchor constant:1.0].active = YES;
        [col2row2.rightAnchor constraintEqualToAnchor:self.contentView.rightAnchor constant:1.0].active = YES;
        [col2row3.rightAnchor constraintEqualToAnchor:self.contentView.rightAnchor constant:1.0].active = YES;

        [col1row1.topAnchor constraintEqualToAnchor:self.contentView.topAnchor constant:1.0].active = YES;
        [col1row2.topAnchor constraintEqualToAnchor:col1row1.bottomAnchor constant:1.0].active = YES;
        [col1row3.topAnchor constraintEqualToAnchor:col1row2.bottomAnchor constant:1.0].active = YES;
        [col2row1.topAnchor constraintEqualToAnchor:self.contentView.topAnchor constant:1.0].active = YES;
        [col2row2.topAnchor constraintEqualToAnchor:col2row1.bottomAnchor constant:1.0].active = YES;
        [col2row3.topAnchor constraintEqualToAnchor:col2row2.bottomAnchor constant:1.0].active = YES;

        [self.bottomAnchor constraintEqualToAnchor:col1row3.bottomAnchor constant:1.0].active = YES;
        [self.contentView.bottomAnchor constraintEqualToAnchor:col1row3.bottomAnchor constant:1.0].active = YES;

        [self.contentView setBackgroundColor:[UIColor greenColor]];

    }
    return self;
}

删除@Mahendra GP 建议的行后

[self setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.contentView setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.widthAnchor constraintEqualToAnchor:self.superview.widthAnchor multiplier:1.0].active = YES;
[self.contentView.widthAnchor constraintEqualToAnchor:self.superview.widthAnchor multiplier:1.0].active = YES;

...结果看起来更好，但第 2 列在视图层次结构中不可见：

Answer 1

对于 table 视图单元格，您不需要设置以下...

[self setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.contentView setTranslatesAutoresizingMaskIntoConstraints:NO];

只需要在要添加的视图上设置。

widthAnchor 也不需要单元格，因为 table 视图单元格的宽度与 table 视图的宽度相同。所以删除这些行...

[self.widthAnchor constraintEqualToAnchor:self.superview.widthAnchor multiplier:1.0].active = YES;
[self.contentView.widthAnchor constraintEqualToAnchor:self.superview.widthAnchor multiplier:1.0].active = YES;

编辑：

如下更改第 2 列的 rightAnchor 约束...

[self.contentView.rightAnchor constraintEqualToAnchor:col2row1.rightAnchor constant:1.0].active = YES;
[self.contentView.rightAnchor constraintEqualToAnchor:col2row2.rightAnchor constant:1.0].active = YES;
[self.contentView.rightAnchor constraintEqualToAnchor:col2row3.rightAnchor constant:1.0].active = YES;

使用锚以编程方式设置 UITableViewCell 的布局

Setting UITableViewCell's layout programmatically using anchors

uitableview

ios

autolayout

ios-autolayout