在单元格/视图中垂直居中可变数量的 UILabel

Question

有没有办法在超级视图（在我的例子中是 UITableViewCell）中垂直居中可变数量的标签？

在我的应用程序的这个特定视图中，我想显示我的数据库中的数据。数据来自一个大小范围为 0 到 3 个元素的集合，因此视图将具有 0 到 3 个对应的标签。如果有一个标签，它应该出现在单元格的垂直中心线上。如果有两个标签，它们应该在单元格的垂直中心线上方和下方出现相等的距离。如果有三个标签，一个应该出现在垂直中心线上，另外两个应该出现在中心线上方和下方的相等距离​​。

希望这种糟糕的视觉尝试有所帮助。在此视觉效果的第二个示例中，表示标签的两个刻度线看起来好像它们与第三个示例中的顶部和底部标签的距离相同，但我更希望在真实的情况下，它们稍微靠近一些不仅如此，但在尝试对复杂的 UI 元素进行建模时，纯文本的局限性就在于此。

**********************************************************************************

- -


  -
-    These two should be slightly closer to center than shown here.
  -


  -
- -
  -

**********************************************************************************

我已尽可能多地尝试摆弄约束，但似乎无法找到以这种方式处理此问题的方法。

由于我来自网络编程背景，我将其描述为在其父容器中垂直居中的可变高度的无序列表，但我不确定如何重新创建它。

Answer 1

假设containerView 是单元格中的 UIView，为标签提供容器，下面的代码将执行您想要的操作。

NSLayoutConstraint* containerCenterXConstraint = 
    [NSLayoutConstraint constraintWithItem:containerView
                                 attribute:NSLayoutAttributeCenterX
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:containerView.superview
                                 attribute:NSLayoutAttributeCenterX
                                multiplier:1
                                  constant:0];

NSLayoutConstraint* containerCenterYConstraint = 
    [NSLayoutConstraint constraintWithItem:containerView
                                 attribute:NSLayoutAttributeCenterY
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:containerView.superview
                                 attribute:NSLayoutAttributeCenterY
                                multiplier:1
                                  constant:0];

[containerView.superview addConstraints:@[containerCenterXConstraint, containerCenterYConstraint]];


[containerView setTranslatesAutoresizingMaskIntoConstraints:NO];
UILabel* previousLabel = nil;
for (int i = 0; i < numberOfElements; i++) {
    UILabel* label = [[UILabel alloc] init];
    [label setTranslatesAutoresizingMaskIntoConstraints:NO];
    label.text = <init label with data>;
    [label sizeToFit];
    [containerView addSubview:label];
    NSArray* constraints;
    NSDictionary* viewsDict;
    NSDictionary* metricsDict = @{@"labelHeight": @(CGRectGetHeight(label.frame))};
    if (i == 0 && numberOfElements == 1) {
        viewsDict = NSDictionaryOfVariableBindings(label);
        constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[label(labelHeight)]|"
                                                                                 options:0
                                                                                 metrics:metricsDict
                                                                                   views:viewsDict];

    } else if (i == 0 && numberOfElements > 1) {
        viewsDict = NSDictionaryOfVariableBindings(label);
        constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[label(labelHeight)]"
                                                              options:0
                                                              metrics:metricsDict
                                                                views:viewsDict];
    } else if (i == (numberOfElements - 1) && numberOfElements > 1) {
        viewsDict = NSDictionaryOfVariableBindings(label);
        constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[label(labelHeight)]|"
                                                              options:0
                                                              metrics:metricsDict
                                                                views:viewsDict];


    }

    if (i > 0 && numberOfElements > 1) {
        viewsDict = NSDictionaryOfVariableBindings(previousLabel, label);
        constraints = [[NSLayoutConstraint constraintsWithVisualFormat:@"V:[previousLabel][label(labelHeight)]"
                                                               options:0
                                                               metrics:metricsDict
                                                                 views:viewsDict] arrayByAddingObjectsFromArray:constraints];
    }
    [containerView addConstraints:constraints];
    constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"|[label]|"
                                                          options:0
                                                          metrics:nil
                                                            views:viewsDict];
    [containerView addConstraints:constraints];
    previousLabel = label;
}