Xcode Interface Builder：使视图的中心 X 等于其父视图的三分之一答案

【问题标题】：Xcode Interface Builder: Make a view's center X equal to third of its superviewXcode Interface Builder：使视图的中心 X 等于其父视图的三分之一
【发布时间】：2018-02-05 11:21:34
【问题描述】：

我有两个视图，我希望它们在水平方向上等距放置。

我想定义他们的Center X，以便它们是超级视图宽度的三分之一和三分之二，但我发现没有允许您这样做的约束设置。

您能告诉我如何实现吗？

【问题讨论】：

一定会喜欢那幅素描：D

标签： ios xcode autolayout storyboard

【解决方案1】：

您可以使用具有以下设置的Center X 约束：

对于第二个视图，Multiplier 当然必须是2/3。

结果：

【讨论】：

【解决方案2】：

从 subView 和 Superview 中选择 Align Center X（只有最后一个的屏幕）

更改乘数：第一个 2:3，第二个 4:3：

【讨论】：

【解决方案3】：

你说：

我有两个视图，我希望它们在水平方向上等距放置。

我想定义它们的 Center X，以便它们是超级视图宽度的三分之一和三分之二，但我没有找到允许您这样做的约束设置。

值得注意的是，“等间距”和“中心 x 即父视图的 ⅓ 和 ⅔”实际上不是一回事。考虑“⅓ 和 ⅔”场景：想象一个 300 像素宽的超级视图，它会将 ⅓ 和 ⅔ 点分别放在 100 和 200 处。如果然后添加两个 50 像素宽的子视图，那么左右边距将是 75 像素，但中心边距将是 50 像素。如果子视图更宽，情况会变得更糟（例如，如果子视图是 100 像素宽，那么左右会有 50 像素的边距，但绝对没有中间空间）。

如果您真的希望它们均匀分布（子视图之间的水平空间与子视图与其父视图边缘之间的空间相同），如果以编程方式执行，则可以使用布局指南。

因此，假设您已经创建了两个子视图并处理了它们的大小和垂直约束，那么您可以这样做：

// create three layout guides

let layoutGuides = (0 ..< 3).map { _ in UILayoutGuide() }

// add them to your view

layoutGuides.forEach { view.addLayoutGuide($0) }

// create dictionary for VFL

let views = ["layoutGuide0": layoutGuides[0], "layoutGuide1": layoutGuides[1], "layoutGuide2": layoutGuides[2], "subview0": subviews[0], "subview1": subviews[1]]

// define horizontal constraints where three layout guides are the same width

let vfl = "H:|[layoutGuide0][subview0][layoutGuide1(==layoutGuide0)][subview1][layoutGuide2(==layoutGuide0)]|"

let constraints = NSLayoutConstraint.constraints(withVisualFormat: vfl, metrics: nil, views: views)
NSLayoutConstraint.activate(constraints)

如果您想在 IB 中执行此操作，则无法创建此类布局指南，但您可以添加三个不可见的“间隔”视图（即 alpha 为 0 的简单 UIView 对象），并保留它们的约束各自的宽度彼此相等。然后将这五个视图（两个子视图加上三个间隔视图）粘贴到堆栈视图中（或者，如果您是受虐狂，绕过堆栈视图并自己在这五个子视图之间添加六个前导/尾随约束），您就可以实现所需的两个均匀间隔的子视图的效果（在这三个不可见的“间隔”视图之间）。

所以，这就是它的样子（让三个“间隔”视图可见，这样你就可以看到发生了什么）：

当您将这三个间隔视图的 alpha 设为 0（使它们不可见）时，最终效果如下：

【讨论】：