iOS 自动布局 : two views of equal width and equally spaced

Question

我目前在使用 AutoLayout 时遇到困难。我正在使用界面生成器并尝试放置两个 100 * 100 的 uiview block 。我需要以这样的方式放置这些 block ，即第一个 block 通往 super View 等于第二个 block 尾随 super View 。此外，这等于这两个 block 之间的空间并根据屏幕宽度同样变化。 我试过使用堆栈 View giving fixed width to stackview seems to be equally spaced in 4s but not on 6s .保持宽度不固定会导致 block 之间的间距更大 as here .

是否可以通过界面构建​​器实现这一点？ 非常感谢您的帮助。

Answer 1

IB 并没有很好地处理这个问题。笨拙的解决方案是添加“间隔” View (我们将添加的 View 是为了自动布局中的间距，但它们是不可见的)。只需使间隔 View 的宽度相等，然后将这五个 View 放在堆栈 View 中，或者设置水平约束，使五个 View 彼此相邻:

然后，只需将间隔 View 背景设置为清晰颜色，这样我们就看不到它们，您将获得所需的间距:

---

如果以编程方式执行此操作(我知道您没有这样做，但只是为了完整起见)，您将使用 UILayoutGuide而不是这些看不见的间隔 View :

let view1 = ...
let view2 = ...

let layout1 = UILayoutGuide()
view.addLayoutGuide(layout1)
let layout2 = UILayoutGuide()
view.addLayoutGuide(layout2)
let layout3 = UILayoutGuide()
view.addLayoutGuide(layout3)

let views: [String: Any] = ["view1": view1, "view2": view2, "layout1": layout1, "layout2": layout2, "layout3": layout3]

view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[layout1][view1(==100)][layout2(==layout1)][view2(==100)][layout3(==layout1)]|", options: .alignAllCenterX, metrics: nil, views: views))

view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-[view1(==100)]", options: [], metrics: nil, views: views))
view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-[view2(==100)]", options: [], metrics: nil, views: views))

令人惊讶的是，Apple 仍未向 IB 添加布局指南。