Question

有没有办法在superview中垂直居中可变数量的标签（在我的例子中是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;
}

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

1 个答案: