iOS Autolayout：两个等宽等间距的视图

Posted 2023-02-26

【中文标题】iOS Autolayout：两个等宽等间距的视图

【英文标题】：iOS Autolayout: two views of equal width and equally spaced

【发布时间】：2016-10-15 17:57:52

【问题描述】：

我目前在使用 AutoLayout 时遇到困难。我正在使用界面生成器并试图放置两个 100 * 100 的 uiview 块。我需要将这些块放置在这样的方式中并且根据屏幕宽度同样变化。 我试过使用stackview giving fixed width to stackview seems to be equally spaced in 4s but not on 6s.保持宽度不固定会导致块之间的间距更大as here。

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

【问题讨论】：

stackview 内的视图的高度和宽度应该改变还是应该保持固定为某些预定值？

是的，这个块的宽度 n 高度从 4s 到 6s plus 是恒定的 100。对于 ipad，这个值要改为 150。

【参考方案1】：

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

然后，只需将间隔视图背景设置为清除颜色，这样我们就看不到它们，并且您将获得所需的间距：

---

如果以编程方式执行此操作（我知道您没有这样做，只是为了完整起见），您将使用 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 添加布局指南。

【讨论】：

非常感谢 Rob。我使用了间隔视图解决方案。