Question

我正试图获取NSLayoutConstraints视觉格式，我遇到了一些麻烦。

我想要的基本上是一个带有两个标签的简单UIView，一个在左边，一个在右边，高度等于容器的高度，宽度等于容器宽度的1/2。右侧标签的原点与左侧标签的尾部对齐。

|左标签 - 右标签|

无论如何，这是我的尝试：

self.leftLabel.translatesAutoresizingMaskIntoConstraints = NO;
self.rightLabel.translatesAutoresizingMaskIntoConstraints = NO;

NSDictionary *views     = @{ @"leftLabel"       :   self.leftLabel,
                             @"rightLabel"      :   self.rightLabel };

NSDictionary *metrics   = @{ @"width"           :   @(CGRectGetWidth(self.frame) / 2) };

NSArray *constraints;
constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[leftLabel]-|" options:0 metrics:metrics views:views];
[self addConstraints:constraints];
constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[rightLabel]-|" options:0 metrics:metrics views:views];
[self addConstraints:constraints];
constraints  = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[leftLabel(width)]" options:0 metrics:metrics views:views];
[self addConstraints:constraints];
constraints  = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-width-[rightLabel(width)]" options:0 metrics:metrics views:views];
[self addConstraints:constraints];

[self setNeedsUpdateConstraints];
[self updateConstraintsIfNeeded];

不幸的是，每次执行标签后，每个标签的宽度都保持为0。有什么建议吗？

更新

以下是全班：

- (id)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame])
    {
        self.leftLabel      = [UILabel new];
        self.rightLabel     = [UILabel new];
        self.loadingView    = [[DDLoadingView alloc] init];

        self.rightLabel.backgroundColor = [UIColor redColor];
        self.leftLabel.backgroundColor = [UIColor redColor];
        self.backgroundColor = [UIColor blackColor];

        [self addSubview:self.leftLabel];
        [self addSubview:self.rightLabel];

        [self configureLayout];
    }

    return self;
}

- (void)configureLayout
{
    self.leftLabel.translatesAutoresizingMaskIntoConstraints = NO;
    self.rightLabel.translatesAutoresizingMaskIntoConstraints = NO;

    NSDictionary *views     = @{ @"leftLabel"       :   self.leftLabel,
                                 @"rightLabel"      :   self.rightLabel,
                                 @"loadingView"     :   self.loadingView  };

    NSDictionary *metrics   = @{ @"width"           :   @(CGRectGetWidth(self.frame) / 2) };

    NSArray *constraints;
    constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[leftLabel]-|" options:0 metrics:metrics views:views];
    [self addConstraints:constraints];
    constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[rightLabel]-|" options:0 metrics:metrics views:views];
    [self addConstraints:constraints];
    constraints  = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[leftLabel]-[rightLabel(==leftLabel)]-|" options:0 metrics:metrics views:views];
    [self addConstraints:constraints];

    [self setNeedsUpdateConstraints];
    [self updateConstraintsIfNeeded];
}

Answer 1

您需要设置约束以使用其他视图的宽度：

NSArray *constraints;
constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[leftLabel]-|" options:0 metrics:metrics views:views];
[self addConstraints:constraints];
constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[rightLabel]-|" options:0 metrics:metrics views:views];
[self addConstraints:constraints];
constraints  = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[leftLabel]-[rightLabel(==leftLabel)]-|" options:0 metrics:metrics views:views];
[self addConstraints:constraints];

最后一个约束是说这两个视图的宽度相同，同时将它们固定到superview的左/右egdes。请参阅Equal Widths section of the docs

正如评论中所讨论的，您还需要确保superview的框架可以容纳视图本身。 |-[将使用20的默认插入内容，使用|-2-将提供2的插入内容。如果标签的固有高度超过视图高度减去这些插图，则您的视图不会显示。因此，您需要减少插入或增加容器的高度。

如果您想了解有关AutoLayout的更多信息，我建议following series of blog posts @jrturton - 请参阅本文顶部的系列中的其他帖子。他在UIView上也有一个很棒category，可以更轻松地添加约束，我每天都会使用它！

使用NSLayoutConstraint Visual Format设置项目的宽度

1 个答案: