iOS9 Programming － UIStackView

UIStackView 这个控件，或许你没有接触过，但它的确很好用，特别是当你需要将一些lable、image、button 等很多控件排列成一行或一列，并且每个空间还要保持一定的间距时，stackview 将会为你提供便利。那今天我们就一起来聊聊 UIStackView。在阅读过程中发现什么问题请及时指正，共同进步😄

UIStackView 是 iOS9 中的新特性，它的主要工作就是约束他的局部或全部的 subviews ，也就是按一定顺序排列它的 subviews。stack view 解决的最重要的问题是是当 subviews 要在竖直方向上平铺一列或者在水平方向平铺一行时候。当然你也可以用很复杂的 autolayout 来达到这个效果但是 stack view 绝对是简捷的途径。假如要实现下图的排列顺序你会怎么做呢？

UIStackView 01.png

UIStackView 的用法是非常简单的并且很强大。通常你只需要提供subviews 然后调用初始化方法 init(arrangedSubviews:)， 其中 arrangedSubviews 是只读属性。你可以采用下面方法来管理并排列subviews：

• addArrangedSubview: //添加subview
• insertArrangedSubview:atIndex: //插入subview
• removeArrangedSubview: //移除Subview

arrangedSubviews 和 stack view 的 subviews 属性是不同的，但是它属于 subviews 的一个子集。换句话说，stack view 可以有没被整理的 subview（这些 subview 需要你自己去添加约束），但是任何被整理了的 subview 必须在 stack view 的 subviews 中，如果你将一个view 设置为 arranged subview 并且它还不是 stack view 的subview，那这个 view 将会被自动添加到为一个 subview 。arrangedSubviews 的顺序和 subviews 的顺序是相互独立的；你知道 subviews 的顺序决定了他们的绘制的顺序，但是 arrangedSubviews 的顺序决定了 stack view 将怎样放置这些 subview 。

Stack 视图管理着所有在它的 arrangedSubviews 属性中的视图的布局。这些视图根据它们在 arrangedSubviews 数组中的顺序沿着 Stack 视图的轴向排列。精确的布局变量根据 Stack 视图的 axis, distribution, alignment, spacing, 和其它属性共同决定。

StackView属性示意图.png

axis

你可以选择以下两种轴向：

• .Horizontal
• .Vertical

distribute

在已选好的轴向基础上，你要怎样布局 subviews呢？你可以选择：

• .Fill
• .FillEqual
• .FillProportionally
• .EqualSpacing
• .EqualCentering

除了 UIStackViewDistributionFillEqually 分布以外的分布方式 stack 视图使用被管理视图的 intrinsicContentSize 属性来计算沿着 stack 轴向的视图尺寸。UIStackViewDistributionFillEqually 分布将调节所有被管理视图的在 stack 轴向上拥有相同尺寸，以填充 stack 视图。如果可能，stack 视图将拉伸所有被管理视图，来匹配其在 stack 轴向上最长的原有尺寸（保证长宽比的情况下根据 stack 轴向长度拉伸视图）。stack view 的 space 属性决定了两个 view 之间的间距。

alignment

管理的视图在垂直于轴向上的布局

• Fill
• Leading
• Center
• Trailing
• FirstBaseline / LastBaseLine

除了 UIStackViewAlignmentFill 对齐方式以外的对齐方式，stack 视图使用其管理的视图的 intrinsicContentSize 属性来计算视图垂直于 stack 轴向的尺寸。 UIStackViewAlignmentFill 重新调节了所有其管理的视图，使这些视图填充 stack 视图垂直于其轴向空间。如果可能，stack 视图将拉伸其所有管理的视图来匹配其垂直于 stack 轴向的最大固有尺寸。

layoutMarginsRelativeArrangement

如果设置该属性的值为 true，stack view 的内部 layoutmargins 参与其 subviews 的约束设置，stack view 将使用相关边距与其内容对齐。如果 false（默认），则使用 stack view 的边界。

说了那么多，云里雾里的，还是上代码好了，下面我们用stackview来实现上一小节的内容

 let sv = UIStackView(arrangedSubviews:views)
        sv.axis = .Vertical
        sv.alignment = .Fill
        sv.distribution = .EqualSpacing
        sv.translatesAutoresizingMaskIntoConstraints = false
        
        self.view.addSubview(sv)
        
        NSLayoutConstraint.activateConstraints([
            sv.topAnchor.constraintEqualToAnchor(self.topLayoutGuide.bottomAnchor),
            sv.leadingAnchor.constraintEqualToAnchor(self.view.leadingAnchor),
            sv.trailingAnchor.constraintEqualToAnchor(self.view.trailingAnchor),
            sv.bottomAnchor.constraintEqualToAnchor(self.view.bottomAnchor),
            ])

运行的到：

v2移除之前.png

最后，附赠一条链接，作者将官方文档翻译成中文，讲得很清楚，建议大家可以去看一下 http://www.cnblogs.com/tieria/p/4572882.html