Xcode Interface Builder：使视图的中心X等于其超级视图的三分之一

Question

我有两个观点，我想放置它们水平间隔的方式。

我想定义他们Center X，以便他们是超级视图宽度的第三和三分之二，但我找不到允许你做的约束设置这一点。

你能告诉我这是如何实现的吗？

Answer 1

您可以使用Center X约束并使用以下设置：

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

结果：

Answer 2

从子视图和超级视图中选择对齐中心X（仅显示最后一个的屏幕）

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

Answer 3

你说：

  

我有两个观点，我想放置它们水平间隔的方式。

     

我想定义它们的中心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（使它们不可见）时，如下：