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

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.有什么建议？

UPDATE

这是全班:

- (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.请参阅文档的" 等宽"部分

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

如果您想对自动版式的详细信息,我建议在以下一系列博客文章由@jrturton -请参阅文章在一系列其他职位的顶部.他也有一个很好的类别,UIView可以更容易地添加约束,我每天都使用它!