自动布局中的弹簧:在Xcode 5中使用约束均匀分布视图

编辑请注意,在iOS 9中,此技术将变得不必要,因为UIStackView将自动执行分发.我将添加另一个答案来解释它是如何工作的.

如何使用Autolayout执行均匀分布

单独在Interface Builder中执行此操作的最简单方法(而不是在代码中构造约束)是使用"spacer"视图:

绝对定位顶部和底部按钮.

在所有按钮之间放置间隔视图.使用约束将它们水平放置(水平居中最简单)并设置它们的宽度.

在每个按钮与其上方和下方的间隔视图之间建立约束,常数为0.

现在选择所有间隔视图并将它们的高度设置为相等.

第一个屏幕截图显示我在IB中设置了这个:

我故意没有纠正"错位观点",因为我希望你在我设计约束时看到它的样子.这是4英寸和3.5英寸屏幕的结果:

我把间隔视图留下了黑色,只是为了向您展示这种技术是如何工作的,但当然在现实生活中你会让它们变得透明,因而看不见!因此,用户只能看到您的按钮,均匀分布在任一屏幕高度上.

使用这种技术的原因是,尽管相等的概念执行了您要求的值的分布,但约束只能在视图的各个方面之间应用相等; 因此我们需要额外的视图(间隔视图),以便我们可以使其他东西等于(这里是间隔视图的高度).

其他方法

显然,更灵活的方法是在代码中分配约束.这可能听起来令人生畏,但有很多第三方代码可以帮助你,比如这类事情.

例如,如果我们有一个(可能是不可见的)上海华盈的高度作为一个边界,以决定我们的四个按钮的最大垂直分布,我们可以固定自己的上衣给上海华盈的有垂直中心constant的0,但一multiplier中0.000001,0.666667,1.33333,和2.0分别(如果我们有四个按钮); 现在按钮将保持垂直分布,即使超视图根据屏幕高度或其他任何方式改变大小.[在Xcode 5.1中,可以在Interface Builder中进行设置,但在早期版本的Xcode中是不可能的.]

在iOS 9/Xcode 7中,这个问题将在IB中轻松解决.只需选择按钮(或任何想要垂直分布的按钮),然后选择编辑器>嵌入>堆栈视图.然后您只需配置堆栈视图:

提供用于定位和调整堆栈视图本身的约束.例如,将堆栈视图的四个边缘固定到其超视图的四个边缘.

设置堆栈视图的属性.在这种情况下,我们需要垂直轴,填充对齐,等间距分布.

就这样!但是,您可能对这是如何工作感到好奇,因为仍然可以在代码中手动执行相同的操作.堆栈视图执行分配,而不是通过插入间隔视图,而是通过插入间隔引导.指南(UILayoutGuide)是一个轻量级对象,其行为类似于布局约束的视图,但不是视图,因此不必使其不可见,也不会带来视图的任何开销.

为了说明,我将在代码中执行堆栈视图正在执行的操作.假设我们有四个垂直分布的视图.除了它们的分布外,我们为它们分配了约束:

它们都有绝对的高度限制

他们的左边是固定在superview的左边,右边是固定在superview右边

顶视图的顶部固定在superview的顶部,底部视图的底部固定在superview的底部

现在,假设我们将四个视图引用为views数组.然后:

let guides = [UILayoutGuide(), UILayoutGuide(), UILayoutGuide()]
for guide in guides {
    self.view.addLayoutGuide(guide)
}
NSLayoutConstraint.activateConstraints([
    // guide heights are equal
    guides[1].heightAnchor.constraintEqualToAnchor(guides[0].heightAnchor),
    guides[2].heightAnchor.constraintEqualToAnchor(guides[0].heightAnchor),
    // guide widths are arbitrary, let's say 10
    guides[0].widthAnchor.constraintEqualToConstant(10),
    guides[1].widthAnchor.constraintEqualToConstant(10),
    guides[2].widthAnchor.constraintEqualToConstant(10),
    // guide left is arbitrary, let's say superview margin
    guides[0].leftAnchor.constraintEqualToAnchor(self.view.leftAnchor),
    guides[1].leftAnchor.constraintEqualToAnchor(self.view.leftAnchor),
    guides[2].leftAnchor.constraintEqualToAnchor(self.view.leftAnchor),
    // bottom of each view is top of following guide
    views[0].bottomAnchor.constraintEqualToAnchor(guides[0].topAnchor),
    views[1].bottomAnchor.constraintEqualToAnchor(guides[1].topAnchor),
    views[2].bottomAnchor.constraintEqualToAnchor(guides[2].topAnchor),
    // top of each view is bottom of preceding guide
    views[1].topAnchor.constraintEqualToAnchor(guides[0].bottomAnchor),
    views[2].topAnchor.constraintEqualToAnchor(guides[1].bottomAnchor),
    views[3].topAnchor.constraintEqualToAnchor(guides[2].bottomAnchor)
])

(显然,我可以使用循环使代码更可靠和更短,但为了清晰起见,我故意展开循环,以便您可以看到模式和技术.)