自动布局中的弹簧:在 Xcode 5 中均匀分布视图，有约束 [英] Springs in Auto Layout: Distribute views evenly, with constraints, in Xcode 5

问题描述

我了解在 Interface Builder 中对齐、调整大小和分布视图的旧 Struts 和 Springs 方法.但是，我似乎无法弄清楚如何在 Xcode 5 中使用自动布局均匀分布视图.有一种方法可以使用 Xcode 4 来实现，但该选项已消失.

我有 7 个按钮垂直排列.在 3.5" 布局上，它看起来很棒.当我以 4" 布局预览屏幕时，所有按钮都保持紧密排列，最后一个按钮下方有大量空间.

我希望它们保持相同的高度，但我希望它们之间的空间能够弯曲，以便它们可以在屏幕上展开.

我已经能够使按钮的高度弯曲并填充空间，但这不是我想要的行为.我想学习如何使用自动布局来替换我旧的 Springs 行为，但我似乎无法通过 Interface Builder 找到任何方法来做到这一点.

我认为顶部按钮可以是距顶部边缘的固定空间，也可以是距顶部边缘的比例空间，底部按钮和底部边缘也是如此.那些对我来说不那么重要，我很擅长.

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

解决方案

EDIT 请注意，在 iOS 9 中，此技术将变得不必要，因为 UIStackView 将自动执行分发.我将添加.

例如，如果我们有一个(可能不可见的)父视图，其高度作为边界来规定四个按钮的最大垂直分布，我们可以使用 constant<将它们的顶部固定到该父视图的垂直中心0 的/code> 但 0.000001、0.666667、1.33333 的 multiplier，和 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:

1. Position the top and bottom buttons absolutely.

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

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

4. 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 中均匀分布视图，有约束的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！