iOS 自动布局：等宽等间距的两个视图

Question

我目前在使用 AutoLayout 时遇到困难。我正在使用界面生成器并尝试放置两个 100 * 100 的 uiview 块。我需要以这样的方式放置这些块，即第一个块导致 superview 等于第二个块尾随 superview.Further 这等于 space 在这两个块之间，并根据屏幕宽度同样变化。我试过使用堆栈视图 giving fixed width to stackview seems to be equally spaced in 4s but not on 6s.Keeping width not fixed results in greater spacing in between blocks as here.

是否可以通过界面生成器来实现？非常感谢您的帮助。

Answer 1

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

然后，只需将间隔视图背景设置为透明颜色，这样我们就看不到它们，您就会得到想要的间距：

如果以编程方式执行此操作（我知道您没有这样做，但只是为了完整起见），您将使用 UILayoutGuide 而不是这些不可见的间隔视图：

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 添加布局指南。

iOS 自动布局：等宽等间距的两个视图

iOS Autolayout: two views of equal width and equally spaced

ios

xcode-storyboard

ios-autolayout