UILabels和NSLayoutConstraint的垂直列表

时间:2014-03-27 21:14:44

标签: ios objective-c nslayoutconstraint

我有UILabel s的垂直列表:

enter image description here

我希望能够将所有标签与":"在右侧并将间距保持在superView的左侧(createDate标签保持不变,名称和年份标签将向右移动)。

代码:

[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[nameLabel]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(nameLabel)]];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[headerView]-[nameLabel]-[createDateLabel]-[yearLabel]" options:NSLayoutFormatAlignAllLeading metrics:nil views:NSDictionaryOfVariableBindings(headerView, nameLabel, createDateLabel, yearLabel)]];

编辑:

好的,在实施了一些建议之后:

[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(52)-[nameLabel]-[createDateLabel]-[yearLabel]" options:NSLayoutFormatAlignAllTrailing metrics:nil views:NSDictionaryOfVariableBindings(headerView, nameLabel, createDateLabel, yearLabel)]];

让他们可以正确对齐:

enter image description here

我宁愿将它固定在headerView上,所以如果该视图改变了高度,我不需要重新编码引脚空间。此外,如果我固定到headerView,它会导致标签一直向右移动:

enter image description here

所以这可能只是一场失败的战斗。

我仍然需要弄清楚如何将它们固定在左边并保持":"排列整齐。现在,我将createDateLabel固定,因为当我在视觉上看它时,我可以看到它最宽。有没有办法让我知道哪个标签最宽?

3 个答案:

答案 0 :(得分:2)

您可以通过以下方式执行此操作:

  1. 对齐尾随边缘
  2. 将superview的前导空间设为> = [some const value]。这将使标签至少具有左边缘的给定间距。
  3. 按原样固定垂直间距
  4. 如果你知道哪个标签最长,你也可以将这些元素引导到superview的空间。

    所有这些约束也可以在界面构建器中进行,这样可以使您的生活更轻松

答案 1 :(得分:1)

如何将单个约束添加到较短的标签:

- (void)viewDidLoad
{
    [super viewDidLoad];

    UILabel *createDateLabel = [[UILabel alloc] init];
    createDateLabel.text = @"Created date:";
    createDateLabel.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:createDateLabel];

    UILabel *yearLabel = [[UILabel alloc] init];
    yearLabel.text = @"Year:";
    yearLabel.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:yearLabel];

    UILabel *nameLabel = [[UILabel alloc] init];
    nameLabel.text = @"Name:";
    nameLabel.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:nameLabel];

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[createDateLabel]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(createDateLabel)]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-40-[nameLabel]-[createDateLabel]-[yearLabel]" options:NSLayoutFormatAlignAllTrailing metrics:nil views:NSDictionaryOfVariableBindings(nameLabel, createDateLabel, yearLabel)]];

    // skip these
    // [self.view addConstraint:[NSLayoutConstraint constraintWithItem:nameLabel attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:createDateLabel attribute:NSLayoutAttributeRight multiplier:1.0 constant:0.0]];
    // [self.view addConstraint:[NSLayoutConstraint constraintWithItem:yearLabel attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:createDateLabel attribute:NSLayoutAttributeRight multiplier:1.0 constant:0.0]];
}

输出是这样的:

enter image description here

我同意在IB中更容易实现它,但如果你被迫在代码中实现它..

好的阅读是:Creating Individual Layout Constraints

答案 2 :(得分:0)

使所有标签的宽度相同(在所有标签上设置一个明确的宽度约束)并使它们的文本对齐都是右对齐的。

这是我的渲染。没有代码 - 这完全是使用Interface Builder中的约束设置的。最长的一个(“创建日期:”)采用其自然宽度;其他人有相同的宽度。显然,所有都包含右对齐的文本。其他所需的限制是显而易见的。

enter image description here