如何在不使用代码的情况下使用约束 AutoLayout 来指定横向与纵向的不同布局? [英] How can I use constraints AutoLayout with to specify a different layout on landscape vs. portrait without using code?

问题描述

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

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

_{(来源:
(来源:
(来源:chattypics.com)}

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

我已经使用了详细的技术 在这篇文章中在横向模式下使事物并排"，但我不相信在这里就足够了，因为我希望视图"中的布局旋转也不同.

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

解决方案

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

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

• 演示此操作的屏幕截图.
• Github 上的源代码(我已经在 iPhone 的情节提要中设置了它，但 iPad 的想法类似).

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

I have an iPad app that features a login screen, with the login controls contained within a UIView.

When the iPad is in portrait orientation I have the Login UIView near the bottom and center of the app, pretty much right above where the keyboard will be, and the company logo is in a UIImageView centered across the top. I'm using AutoLayout constraints to keep the company logo gravitated to the top and right, and the Login UIView gravitated to the bottom and right.

_{(source: chattypics.com)}

When I rotate this to landscape, the effect is something like this:

_{(source: chattypics.com)}

I want it to look like this

_{(source: chattypics.com)}

So, I want the two elements to be side-by-side, and I want the Login UIView to be further to the right. The amount of spacing to the right of the UIView when in portrait mode is greater than I want for landscape mode, and the distance from the bottom is less than I want for Landscape mode. I could handle this via "center in container" instead, but that would also not work in Landscape mode.

I've used the technique detailed in this post to make things be "side by side" when in landscape mode, but I don't believe it will suffice here because I want the layouts within the "views" to also be different on rotation.

I can think of ways to pull this off programmatically, but I can't imagine this is all that unique a need, so is there some way using just constraints in IB to pull this off? Some "this is what constraints in IB were designed for" way, possibly dealing with priorities? Or do I just need to pull this off in code?

解决方案

You could achieve such behaviour using different priorities for constraints in Interface Builder. For both views ("Company Logo" and "Login view") you need to set up "vertical center in container" and "horizontal center in container" constraints with some reduced priority. Next you need to defined "Vertical Space" and "horizontal space" constraints using rules with relations like "Less Than or Equal".

I've achieved such behaviour just using Interface Builder.

• Screencast demonstrating this in action.
• Source code on Github (I've set it up in iPhone only storyboard, but the idea is similar for iPad).

Also you could combine "less than or equal" with "greater than or equal" using different priorities to achieve best result.

这篇关于如何在不使用代码的情况下使用约束 AutoLayout 来指定横向与纵向的不同布局?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！