问题描述
我了解在 Interface Builder 中对齐、调整大小和分布视图的旧 Struts 和 Springs 方法.但是,我似乎无法弄清楚如何使用 Xcode 5 的自动布局来均匀分布视图.有一种方法可以使用 Xcode 4 来做到这一点,但是那个选项已经消失了.
我有 7 个按钮排列成垂直堆栈.在 3.5" 布局上,它看起来很棒.当我在 4" 布局中预览屏幕时,所有按钮都保持紧密排列,并且在最后一个按钮下方有很大的空间.
我希望它们保持相同的高度,但我希望它们之间的空间能够弯曲,以便它们可以在屏幕上展开.
我已经能够获得按钮的高度来弯曲和填充空间,但这不是我想要的行为.我想学习如何使用 Auto Layout 来替换我的旧 Springs 行为,但我似乎无法通过 Interface Builder 找到任何方法.
顶部按钮可以是距顶部边缘的固定空间,也可以是距顶部边缘的比例空间,底部按钮和底部边缘也是如此.这些对我来说不太重要,我都擅长.
但我真的需要弄清楚如何在视图中的每个项目之间平均分配额外的空间.
EDIT 请注意,在 iOS 9 中这种技术将变得不必要,因为 UIStackView 将自动执行分发.我将添加.
例如,如果我们有一个(可能是不可见的)超级视图,其高度作为边界来指示我们四个按钮的最大垂直分布,我们可以使用 constant<将它们的顶部固定到该超级视图的垂直中心/code> 的
0
但 multiplier
的 0.000001
, 0.666667
, 1.33333
,和 2.0
分别(如果我们有四个按钮);现在按钮将保持垂直分布,即使超级视图响应屏幕高度或其他任何内容而改变大小.[在 Xcode 5.1 中,可以在 Interface Builder 中进行设置,但在早期版本的 Xcode 中这是不可能的.]
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.
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.
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.
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.
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.
How to Perform Even Distribution Using Autolayout
The simplest way to do this in Interface Builder alone (rather than constructing constraints in code) is to use "spacer" views:
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.
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.
The first screen shot shows me setting this up in IB:
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).
Other Approaches
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.
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.]
这篇关于自动布局中的弹簧:在 Xcode 5 中使用约束均匀分布视图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!