使用自动布局约束将工具栏项目对齐到分割视图内容

Question

我想把一个按钮对齐到一个窗口中的分割视图位置上，和苹果邮件中的删除按钮类似。如何使用自动布局约束来完成此操作？

在苹果文档中我发现了一些线索，它表明可以使用自动布局约束来实现（请参见https://developer.apple.com/library/ios/documentation/userexperience/conceptual/AutolayoutPG/AutoLayoutConcepts/AutoLayoutConcepts.html），其中写道：“约束可以跨越视图层次结构，但有一些限制。例如，在 OS X 的邮件应用程序中，默认情况下，工具栏中的删除按钮与消息列表对齐。” 但这是我唯一能找到的信息。

我尝试在左侧分割视图面板的内容和按钮之间创建约束：

NSView *button = self.toolbarItemButton.view;
NSView *leftPane = self.leftSplitContent;

[self.window.contentView addConstraints:[NSLayoutConstraint
    constraintsWithVisualFormat:@"[leftPane][button]"
    options:0 metrics:nil
    views:NSDictionaryOfVariableBindings(leftPane, button)]
];

但是我遇到了一个错误提示，似乎表明跨视图约束不可能： "约束引用了视图子树外的内容"。有没有什么办法可以解决这个问题？

我找到了一个解决方法，即不使用约束，而是在按钮左侧插入一个自定义视图（而不是间隔符！）。然后我可以更改该视图的大小来移动按钮... 但是，这对我来说似乎更像是一个hack。

- powerpete

---

如果你最终解决了这个问题，我很想知道这个秘密。至于在按钮左侧添加自定义视图，你是每次分割视图调整其子视图大小时都设置“spacer”视图的框架值，还是已经安装了约束条件？ - Ben Stock

@BenStock 是的，我每次调整分割视图的子视图大小时都会设置框架值。没有使用约束来完成这个操作。我已经放弃寻找更好的解决方案，但也许 Yosemite 有什么可以提供的？我记得 WWDC '14 视频之一谈到了一些新的工具栏功能，所以也许苹果改进了约束处理... 可以再看一下。 - powerpete

Answer 1

我刚遇到了相同的问题。 在 OS X 10.11 El Capitan 中，我们可以使用 NSLayoutGuide 来解决这个问题。

首先，您应该在“当前”源代码文件中引用要与之对齐的 NSView 子类实例。在这种情况下，是拆分视图中的子视图。

以下示例展示了如何使用 NSLayoutAnchor 对齐两个视图。 您还可以为工具栏项添加垂直约束。

- (void) setUpToolbarItemConstrains {

// the view you want your toolbaritem to align to
NSView * refView = self.theOtherView.view;

// theToolbarItem is the outlet to the ToolbarItem
NSView * toolsView = self.theToolbarItem.view;

// You can also do this in Interface Builder
self.theToolbarItem.minSize = CGSizeMake(200.0f, 0.0f);
self.theToolbarItem.maxSize = CGSizeMake(600.0f, 100.0f);

toolsView.translatesAutoresizingMaskIntoConstraints = NO;

[toolsView.leadingAnchor constraintEqualToAnchor: refView.leadingAnchor].active = YES;

}

然而，我有一个与此相关的更深入的问题。

- LShi

Answer 2

我知道这可能有点过时，但我遇到了同样的问题并找到了答案：

你需要使用 topLayoutGuide 属性。

例如，在 Swift 中：

view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormats(
        ["H:|[toolbarShadow]|", "V:[topLayoutGuide][toolbarShadow(100)]"], 
views: viewDictionnary))

当然，topLayoutGuide必须在您的视图字典中

您可以通过self.topLayoutGuide访问它

- Antzi

---

toolbarShadow 是什么？ - LShi

@LS.上海 你可以用任何东西来替换它。我使用了约束来在工具栏上放置阴影，并在此处提供了未经修改的代码。 - Antzi