我如何使用自动版式的约束与指定的横向和纵向不同的布局,而无需使用code? [英] How can I use constraints AutoLayout with to specify a different layout on landscape vs. portrait without using code?

查看:207
本文介绍了我如何使用自动版式的约束与指定的横向和纵向不同的布局,而无需使用code?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个iPad应用程序,具有一个登录界面,与包含一个UIView内登录控件。

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

当iPad是纵向我登录的UIView附近的应用程序,pretty的多右上方那里的键盘将是底部和中部,而该公司的标志是在顶部中心的一个UIImageView。我使用的自动版式的限制,以保持公司的标志吸引到顶部和右侧,以及登录的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.

在我这个旋转为横向,效果是这样的:

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

我希望它看起来像这样

所以,我想这两个元素是并排的一面,我想登录的UIView进一步是正确的。间距的UIView的右侧的量时,在纵向模式大于我要为横向模式,并从底部的距离小于我要为风景模式。我可以通过,而不是集装箱中心处理这个问题,但也不会在风景模式下工作。

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.

我用详细的技术<一个href=\"http://stackoverflow.com/questions/16729302/two-views-one-below-another-in-portrait-and-side-by-side-in-landscape-using-lay\">in这个帖子让事情是在横向模式时,肩并肩,但我不相信它会在这里就够了,因为我想在意见中的布局,也可以在旋转不同。

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.

我可以想办法以编程方式退出这个功能,但我无法想象这是所有独特的需要,所以有一些方法使用IB只是约束拉这一关?有些这是设计什么约束IB为的方式,可能处理的优先级?或者,我只是需要在code拉这一关?

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?

推荐答案

您可以用不同的优先级在Interface Builder中实现的约束这种行为。对于这两种观点(公司徽标和登录意见),你需要设置集装箱垂直中心和水平中心集装箱的一些优先级降低的约束。
接下来,您需要定义的垂直空间,并使用规则中包含小于或等于关系水平间距的限制。

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.

这篇关于我如何使用自动版式的约束与指定的横向和纵向不同的布局,而无需使用code?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆