如何在不使用代码的情况下使用约束 AutoLayout 来指定横向与纵向的不同布局？

Posted 2023-03-13

【中文标题】如何在不使用代码的情况下使用约束 AutoLayout 来指定横向与纵向的不同布局？

【英文标题】：How can I use constraints AutoLayout with to specify a different layout on landscape vs. portrait without using code?

【发布时间】：2013-10-14 16:05:11

【问题描述】：

我有一个具有登录屏幕的 iPad 应用程序，登录控件包含在 UIView 中。

当 iPad 处于纵向时，我在应用程序的底部和中心附近有 Login UIView，几乎就在键盘所在的上方，公司徽标位于顶部居中的 UIImageView 中。我正在使用 AutoLayout 约束来保持公司徽标被吸引到顶部和右侧，而登录 UIView 被吸引到底部和右侧。

_{（来源：chattypics.com）}

当我将它旋转到横向时，效果是这样的：

_{（来源：chattypics.com）}

我希望它看起来像这样

_{（来源：chattypics.com）}

所以，我希望这两个元素并排，并且我希望登录 UIView 更靠右。在纵向模式下，UIView 右侧的间距量大于我想要的横向模式，而与底部的距离小于我想要的横向模式。我可以通过“容器中的中心”来处理这个问题，但这在横向模式下也不起作用。

我已经使用了详细的技术in this post 在横向模式下使事物“并排”，但我不相信在这里就足够了，因为我希望“视图”中的布局也是旋转不同。

我可以想办法以编程方式解决这个问题，但我无法想象这是一个独特的需求，那么有没有办法只使用 IB 中的约束来解决这个问题？一些“这是 IB 中的约束设计的目的”的方式，可能处理优先级？还是我只需要在代码中实现这一点？

【问题讨论】：

我不确定这种行为是否可以在不编写代码的情况下实现。你可能想看看我对这个问题的回答：***.com/questions/17772922/…

【参考方案1】：

您可以在 Interface Builder 中使用不同的约束优先级来实现这种行为。对于两个视图（“公司徽标”和“登录视图”），您需要设置“容器中的垂直中心”和“容器中的水平中心”约束，并降低优先级。 接下来，您需要使用具有“小于或等于”等关系的规则来定义“垂直空间”和“水平空间”约束。

我仅使用 Interface Builder 就实现了这种行为。

Screencast demonstrating this in action。 Source code on Github（我只在 iPhone 的情节提要中设置了它，但 iPad 的想法类似）。

您还可以使用不同的优先级将“小于或等于”与“大于或等于”结合起来以获得最佳结果。

【讨论】：

我自己尝试过这样做，但中心 y 约束似乎给我带来了一些问题

【参考方案2】：

看起来您只需要单独旋转它们，而不是重新定位元素。在容器视图中设置它们，在视图控制器视图中将容器视图居中。然后只需设置两个视图之间的距离并设置它们的自动旋转。