按单词包装 UILabel 并以编程方式扩展 UITableViewCell 高度

Question

我以编程方式创建了布局约束，以便在表格单元格中排列 UI 组件。

以下是我正在实施的约束：

• 单元格的左侧部分包含nameUIView（完成）
• 单元格的右侧部分包含valueUIView（完成）
• nameUIView 和 valueUIView 部分的宽度应该相等（完成）
• nameUIView 和 valueUIView 的高度和宽度应该是可用空间的 100%（完成）
• nameUIView 包含一个 nameUILabel（完成）
• nameUILabel 应该使用单词换行（需要建议）
• 如果nameUILabel 中的文本过大，则 UITableViewCell 单元格的高度应扩大（需要建议）

如何以编程方式实现该布局的换行和高度扩展？

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

        // The view containing the label (left, red)
        UIView *nameUIView = [[UIView alloc] init];
        self.nameUIView = attributeNameView;
        [self.nameUIView setBackgroundColor:[UIColor redColor]];
        [self.nameUIView setTranslatesAutoresizingMaskIntoConstraints:NO];
        [self.contentView addSubview:self.nameUIView];

        // The label (green)
        UILabel *nameUILabel = [[UILabel alloc] init];
        self.nameUILabel = nameUILabel;
        [self.nameUILabel setTextColor:[UIColor blackColor]];
        [self.nameUILabel setBackgroundColor:[UIColor greenColor]];
        [self.nameUILabel setTranslatesAutoresizingMaskIntoConstraints:NO];
        [self.nameUILabel setLineBreakMode:NSLineBreakByWordWrapping];
        [self.nameUIView addSubview:self.nameUILabel];

        // The view containing the value (right, blue)
        UIView *valueUIView = [[UIView alloc] init];
        self.valueUIView = valueUIView;
        [self.valueUIView setBackgroundColor:[UIColor blueColor]];
        [self.valueUIView setTranslatesAutoresizingMaskIntoConstraints:NO];
        [self.contentView addSubview:self.valueUIView];

        NSDictionary *views = NSDictionaryOfVariableBindings(nameUIView, nameUILabel, valueUIView);
        NSArray *constraints;

        // The constraint to align the views horizonzally (1:1) sizing
        constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[nameUIView][valueUIView(==nameUIView)]|"
                                                                       options: 0
                                                                       metrics:nil
                                                                         views:views];

        [self.contentView addConstraints:constraints];

        // 100% height for name view
        constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[nameUIView]|"
                                                              options: 0
                                                              metrics:nil
                                                                views:views];
        [self.contentView addConstraints:constraints];

        NSLayoutConstraint *constraint;

        // Center name label horizontally
        constraint = [NSLayoutConstraint constraintWithItem:nameUILabel
                                attribute:NSLayoutAttributeCenterX
                                relatedBy:NSLayoutRelationEqual
                                toItem:nameUIView
                                attribute:NSLayoutAttributeCenterX
                                multiplier:1.f constant:0.f];// Not possible via VFL
        [self.contentView addConstraint:constraint];

        // Center name label vertically
        constraint = [NSLayoutConstraint constraintWithItem:nameUILabel
                                                                      attribute:NSLayoutAttributeCenterY
                                                                      relatedBy:NSLayoutRelationEqual
                                                                         toItem:nameUIView
                                                                      attribute:NSLayoutAttributeCenterY
                                                                     multiplier:1.f constant:0.f];// Not possible via VFL
        [self.contentView addConstraint:constraint];

        // 100% height for value view
        constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[valueUIView]|"
                                                              options: 0
                                                              metrics:nil
                                                                views:views];

        [self.contentView addConstraints:constraints];

    }
    return self;
}

Answer 1

1. 单词换行

添加这个额外的约束（将标签的宽度设置为父视图）确实启用了自动换行：

constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[attributeNameLabel(==attributeNameView)]|"
                                                      options: 0
                                                      metrics:nil
                                                        views:views];

        [self.contentView addConstraints:constraints];

最后，我必须将文本居中：

[self.attributeNameLabel setTextAlignment:NSTextAlignmentCenter];

1. 根据内容扩展单元格高度

UITableView也需要设置这些属性

tableView.rowHeight = UITableViewAutomaticDimension
tableView.estimatedRowHeight =

将包装超级视图的高度设置为它包含的标签

constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[nameUIView(==nameUILabel)]|"
                                                      options: 0
                                                      metrics:nil
                                                        views:views];

[self.contentView addConstraints:constraints];

最小高度限制（可选）

constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[nameUIView(>=50)]|"
                                                      options: 0
                                                      metrics:nil
                                                        views:views];

[self.contentView addConstraints:constraints];