在自动布局泉:平均分配的观点,有约束,在X code 5 [英] Springs in Auto Layout: Distribute views evenly, with constraints, in Xcode 5

查看:237
本文介绍了在自动布局泉:平均分配的观点,有约束,在X code 5的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我明白对准老Struts和泉法,大小和在Interface Builder分配的意见。不过,我似乎无法弄清楚如何使用自动布局以X code 5.有办法用X code 4去做均匀分布的看法,但该选项已经一去不复返了。

I understand the old Struts and Springs method of aligning, sizing and distributing views in Interface Builder. However, I cannot seem to figure out how to evenly distribute views using auto layout with Xcode 5. There was a way to do it using Xcode 4, but that option is gone.

我有布置成垂直堆叠7的按钮。在一个3.5的布局,它看起来很棒,当我preVIEW屏幕在4的布局,所有的按键保持紧凑且有大量的最后一个按钮下方的空间。

I have 7 buttons arranged in a vertical stack. On a 3.5" layout, it looks great. When I preview the screen in the 4" layout, all of the buttons remain tightly packed and there is a large amount of space below the last button.

我希望他们留在同一高度,但我想他们之间的空间,能够弯曲,以便在屏幕上,他们可以发$ P $垫出来。

I want them to stay the same height, but I want the space between them to be able flex so they can spread out across the screen.

我已经能够获得按钮的高度弯曲并填补空间,但是这不是我希望的行为。我想学习如何使用自动布局来代替我的老泉的行为,但我似乎无法找到任何方式,通过Interface Builder来做到这一点。

I've been able to get the height of the buttons to flex and fill the space, but that is not my desired behavior. I would like to learn how to use Auto Layout to replace my old Springs behavior, but I can't seem to find any way to do it through Interface Builder.

我确定与顶部按钮或者是从顶边的固定空间或从顶部边缘成比例的空间,同样对于底部按钮和底边缘。这些都是对我来说不那么重要了,我很好无论是。

I'm ok with the top button either being a fixed space from the top edge or a proportional space from the top edge, likewise for the bottom button and the bottom edge. Those are less important to me, I'm good with either.

但我真的需要弄清楚如何平均分配各项目之间的额外空间在视图中。

But I really need to figure out how to evenly distribute the extra space between each of the items in the view.

推荐答案

修改请注意,在iOS的9这项技术将成为不必要的,因为UIStackView将自动执行分配。我将添加另一个答案解释是如何工作的。

EDIT Note that in iOS 9 this technique will become unnecessary, because a UIStackView will perform distribution automatically. I'll add another answer explaining how that works.

独自做在Interface Builder中最简单的方法(而不是code构建约束)是用隔离的意见:

The simplest way to do this in Interface Builder alone (rather than constructing constraints in code) is to use "spacer" views:


  1. 在顶部和底部按键的位置绝对。

  1. Position the top and bottom buttons absolutely.

所有的按键之间放置隔板的意见。使用约束他们水平位置(其中中心水平是最简单的),并设置其宽度。

Place spacer views between all the buttons. Use constraints to position them horizontally (centering them horizontally is simplest) and to set their widths.

请每个按钮和上面和下面的隔视图之间的约束,具有恒定的0。

Make constraints between each button and the spacer view above and below it, with a Constant of 0.

现在选择所有的间隔意见,并设置其高度相等。

Now select all the spacer views and set their heights to be equal.

第一个屏幕截图显示我IB设置此功能:

The first screen shot shows me setting this up in IB:

我特意没有得到纠正为放错地方的意见,因为我想让你看看是什么样子,而我设计的约束。这里有两个4英寸和一个3.5英寸的屏幕的结果是:

I have deliberately not corrected for the "misplaced views" because I want you to see what it looks like while I'm designing the constraints. Here's the result on both a 4 inch and a 3.5 inch screen:

我已经离开隔离意见黑,只是向您展示这种技术是如何工作的,但当然在现实生活中,你会使其更加透明化,从而无形!因此,用户看到只是你的按钮,均匀分布在屏幕的任何高度。

I have left the spacer views black, just to show you how this technique works, but of course in real life you would make them transparent and hence invisible! So the user sees just your buttons, evenly distributed on either height of screen.

究其原因,使用这种技术的是,虽然人人平等的概念,执行你所要求的数值的分布,约束只能意见方面之间适用平等;因此,我们需要额外的意见(间隔意见),以便我们有事情,我们可以等同于其他的东西(这里的隔离意见的高度)。

The reason for the use of this technique is that although the notion of equality performs the distribution of values you are asking for, constraints can apply equality only between aspects of views; thus we need the extra views (the spacer views) so that we have things we can make equal to other things (here, the heights of the spacer views).

显然,更灵活的方法是分配在code中的约束。这听起来可能有些吓人,但有很多第三方code在那里帮助你,比如这样的事情

Obviously, a more flexible approach is to assign the constraints in code. This may sound daunting, but there's a lot of third-party code out there to help you, such as this sort of thing.

例如,如果我们有一个(可能不可见)的SuperView其高度作为边界支配我们的四个按钮的最大垂直分布,我们可以固定自己的上衣给上海华与一个 0 但乘数> 0.000001 0.666667 1.33333 2.0 分别为(如果我们有四个按钮);现在的按钮将保持垂直分布,甚至为上海华变化响应屏幕高度或任何大小。 [在第X code 5.1,这将有可能设置了在Interface Builder中,但在早期版本的X $ C $的c那么它是不可能的。]

For example, if we have a (possibly invisible) superview whose height acts as a boundary to dictate maximum vertical distribution of our four buttons, we can pin their tops to the vertical center of that superview with a constant of 0 but a multiplier of 0.000001, 0.666667, 1.33333, and 2.0 respectively (if we have four buttons); now the buttons will stay vertically distributed even as the superview changes size in response to screen height or whatever. [In Xcode 5.1, it will be possible to set that up in Interface Builder, but in earlier versions of Xcode it is not possible.]

这篇关于在自动布局泉:平均分配的观点,有约束,在X code 5的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

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