使用自动布局在 Storyboard 中与分辨率无关的同等大小的元素

Posted 2023-03-12

【中文标题】使用自动布局在 Storyboard 中与分辨率无关的同等大小的元素

【英文标题】：Resolution agnostic equally sized elements in Storyboard using Auto-Layout

【发布时间】：2013-03-24 17:59:40

【问题描述】：

我有一个包含带有导航栏的视图的故事板，我的目标是在下面有另外 3 个元素（按钮、视图，我想这无关紧要），它们可以拉伸，使它们都具有相同的高度，并相互粘连，即它们之间没有间隙。

我尝试使用 AutoLayout 来实现这一点，方法是将顶部元素的约束设置为导航栏的垂直间距为 0，下方元素的垂直间距为 0，底部元素的两个超级视图的垂直间距为 0底部和上面的元素。我还添加了所有元素具有相同高度的约束，一切都很好，直到我在 Storyboard 编辑器中从 iPhone4 切换到 iPhone5 视图，当它被 InterfaceBuilder 炸毁时，删除了顶部元素的“坚持导航栏”约束并给出它固定大小（不等于其他两个）。

摆弄了一段时间，因此布局中的任何地方都不存在绝对高度，但是在 iPhone5 和 iPhone4 之间切换会破坏我所做的一切，要么删除一些约束，要么将其他一些约束设置为固定值。

有人知道使用 AutoLayout 实现此目的的方法吗，还是我应该使用带有 flowlayout 的 UICollectionView？

或者换一种说法 - 在“故事板中的 UIViewControler + 导航栏”中，实现三个元素以相互粘连并在所有可能的当前和未来屏幕尺寸上保持相同高度的最佳方法是什么" 场景，使用 InterfceBuilder？

（我对在代码中执行此操作的想法并不陌生，我知道该怎么做，但如果可以使用 IB，我会这样做。）

【参考方案1】：

您必须至少有一个其他约束才能开始，因为您所描述的还不够 - 这 3 个视图中的一个已设置其高度（或固有高度），或者您有一个约束也到屏幕底部。后者会导致它在屏幕尺寸变化时爆炸。您确实需要有一个具有设定高度的项目，每个项目对上方和下方的项目都有一个垂直间距约束，并且它们的高度都相同。如果您没有其他应该起作用的约束（在垂直方向上）。

【讨论】：

谢谢，在仔细清理所有孤立约束后，它开始按预期工作，除了我实际上仍然希望 IB 在 iPhone4/iPhone5 高度之间切换时不会破坏/删除任何约束，这确实如此。由于忘记考虑电话状态栏，我还错误地计算了第一个元素的最小高度。