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

时间:2018-06-22 08:42:00

标签: ios uitableview autolayout ios-autolayout nsautolayout

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

  • 有两列
  • 具有三行
  • “单元格”的内容应仅为UILabel
  • 应该根据行的高度动态设置高度

但是,UIViewCell的布局锚似乎与UIView的工作原理不同,我现在正在获得所需的结果,我想这可能是由于UITableView的复杂视图层次结构(内容视图,附件视图...)。 / p>

How it looks, how it should look

我在这里犯了一些明显的错误吗?将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列在视图层次结构中不可见:

enter image description here

1 个答案:

答案 0 :(得分:1)

对于表格视图单元格,您无需设置以下内容...

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

仅需在要添加的视图上进行设置。

widthAnchor也不返回该单元格,因为tableview单元格的宽度与表视图的宽度相同。所以删除这些行...

[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;