以编程方式使用自动布局对齐视图

Question

我很难通过编程方式使用Autolayout将NSViews彼此对齐。为了说明，我做了一个非常简单的示例项目。 DiscView是NSView的子类，它绘制具有指定颜色的光盘。

在下面的示例中，我只在两个子视图中的一个上添加了Autolayout约束，结果与我预期的一样（见下面的截图）。

- (void)applicationDidFinishLaunching:(NSNotification *)aNotification
{
    DiscView *discViewA = [[DiscView alloc] init];
    DiscView *discViewB = [[DiscView alloc] init];

    discViewA.color = [NSColor blackColor];
    discViewB.color = [NSColor redColor];

    discViewA.translatesAutoresizingMaskIntoConstraints = NO;
    discViewB.translatesAutoresizingMaskIntoConstraints = NO;

    [self.customView addSubview:discViewA];
    [self.customView addSubview:discViewB];

    NSDictionary *discViewDictionary = @{@"discViewA" : discViewA,
                                         @"discViewB" : discViewB};

    [self.customView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[discViewA]|" options:0
                                                                           metrics:nil
                                                                              views:discViewDictionary]];

    [self.customView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[discViewA]|" options:0
                                                                            metrics:nil
                                                                              views:discViewDictionary]];
}

但是，如果我尝试使用一些额外的约束并排显示两个子视图，我只会看到一张红色光盘。也就是说，好像红色光盘直接绘制在黑色光盘的顶部。

[self.customView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[discViewA]-[discViewB]|" options:0
                                                                               metrics:nil
                                                                                  views:discViewDictionary]];

[self.customView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[discViewA]|" options:0
                                                                                metrics:nil
                                                                                  views:discViewDictionary]];

[self.customView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[discViewB]|" options:0
                                                                                metrics:nil
                                                                                  views:discViewDictionary]];

这里可能出现什么问题？

Answer 1

我的猜测是，当你将两个视图设置为并排时，AutoLayout不知道如何在两个视图之间划分超视图的宽度。

尝试向其中一个子视图添加宽度约束，这足以解决歧义。

Answer 2

[self.customView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[discViewA][discViewB]|" 
                                                                        options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom 
                                                                          views:discViewDictionary]];


[self.customView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[discViewA]|" options:0
                                                                        metrics:nil
                                                                          views:discViewDictionary]];

试试这个。它可能有所帮助。如果没有做别人建议的事情并提出这样的约束。

[self.customView addConstraint:[NSLayoutConstraint constraintWithItem:discViewA
                                                                attribute:NSLayoutAttributeWidth
                                                                relatedBy:NSLayoutRelationEqual
                                                                   toItem:self.customView
                                                                attribute:NSLayoutAttributeWidth
                                                               multiplier:0.5f
                                                                 constant:0.f]];