如何在情节提要中使用自动布局在不同设备尺寸上设置动态位置的约束

Posted 2023-03-15

【中文标题】如何在情节提要中使用自动布局在不同设备尺寸上设置动态位置的约束

【英文标题】：How to setup constraints in storyboard with autolayout for dynamic position on different device sizes

【发布时间】：2017-02-08 08:40:53

【问题描述】：

如果我想保证多屏支持以便所有 UI 控件都可以访问并且 UI 在较小屏幕尺寸的设备（iPhone 4s 或 iPhone SE）当我在更大屏幕尺寸的设备（iPhone 6）上设计时。我有一个基于 iPhone 6 的设计（在草图文件中），我想将其转移到我的故事板。所以总的来说，我想在故事板中设置所有视图内容，而不是通过代码。

这是我的限制条件。底部按钮的固定高度为 48，左右有一个leadingMargin，到底部的垂直距离为 100。顶部按钮与底部按钮的高度相同，距离底部按钮为 28。

这是 iPhone 6 上带有上述按钮的设计视图。这是我要设置草图文件的情节提要原因的默认大小。

这是 iPhone 4s 上的视图

如您所见，按钮靠近固定垂直距离和固定高度的中间原因。我的意思是这显然是固定值的原因。所以我对mentioned here 这样的百分比位置进行了一些研究，但这是正确的方法吗？在我看来，其他方式也很复杂。如何防止固定值，如高度和垂直距离？有没有办法将 iPhone 6 的固定高度设置为 48，然后根据屏幕尺寸（底部垂直距离和其他固定值相同）缩小按钮（对于 iPhone SE）？

有人可以给我任何建议吗？

【问题讨论】：

这个链接可能对你有帮助...***.com/questions/42085444/…

我也在找同样的东西……但没有找到任何成功……

大多数时候我使用 spacerviews .. 表示具有相等高度乘数的空白视图，以根据设备分辨率管理空间 .. 但您也可以使用 center Y 约束（非首选）和一些常量，例如this link

【参考方案1】：

这有点复杂，我尽可能多地解释它。

注意：自动布局就像是一步一步地建造一座建筑。

选择顶部按钮并添加这些约束（Leading：8，Trailing：8，并选择Aspect Ratio复选框） + 并且还添加“水平中心和垂直中心约束”选择垂直中心约束并将其乘数改为1.5或相应地增加或减少它的值。 p>

这之后应该没有错误，只有警告（如果有）。

选择第二个按钮并添加顶部约束到8。选择两个按钮并添加在屏幕短显示中突出显示的约束。

在不同的屏幕上运行并检查。希望对您有所帮助。

【参考方案2】：

bottomButton.bottom = superview.bottom * 0.9

或

通过代码改变底部约束

    bottomConstraint.constant = xx
    self.view.layoutIfNeeded()