UIStackView 初探（译）

UIStackView

用于在列或行中布局视图集合的线性接口。

UIStackView 概览

UIStackView 允许您利用自动布局的强大功能，创建能够动态适应设备方向、屏幕大小和可用空间中的任何更改的用户界面。UIStackView 在其 arrangedSubviews 属性中管理所有视图的布局。这些视图根据在 arrangedSubviews 数组中的顺序沿着视图栈主轴排列。视图精确的布局依赖于 UIStackView 的 axis、distribution、alignment、spacing以及其他属性的共同作用。

WechatIMG390.jpeg

要使用 UIStackView，请打开您希望编辑的 Storyboard。从对象库中拖动 Horizontal Stack View（水平栈）或Vertical Stack View（垂直栈），并将堆栈视图定位到需要的位置。接下来，拖出栈的内容，将视图或控件拖放到栈中。您可以根据需要继续向栈添加视图和控件。Interface Builder 根据栈的内容调整栈的大小。您还可以通过在属性检查器中修改 UIStackView 图的属性来调整栈内容的外观。

note:开发者负责定义 UIStackView 的位置和大小(可选)。然后，UIStackView 管理其内容的布局和大小。

UIStackView 与自动布局

堆栈视图使用自动布局来定位和调整其排列的视图的大小。堆栈视图将第一个和最后一个被安排的视图与其沿堆栈轴的边缘对齐。在水平堆栈中，这意味着第一个排列的视图的前缘被固定在栈的左边缘，而最后一个排列的视图的后缘被固定在堆栈的右边缘。在垂直栈中，顶部和底部边缘分别固定在栈的顶部和底部边缘上。如果将 UIStackView 的 isLayoutMarginsRelativeArrangement 属性设置为 true，那么堆栈视图将其内容固定到相关的边距而不是边缘。

除了 UIStackView.Distribution.FillEquality分布，则堆栈视图在沿堆栈轴计算其大小时使用每个排列视图的intrinsicContentSize属性。UIStackView.Distribution.FillEquality调整所有排列视图的大小，使其大小相同，沿视图栈的轴填充栈视图。如果可以，UIStackView 会拉伸所有排列的视图，以匹配沿栈轴具有最长内部大小的视图。

对于除 UIStackView.Alignment.fill 对齐时，UIStackView 在计算垂直于栈轴的大小时使用每个排列视图的 intrinsicContentSize 属性。UIStackView.Alignment.fill 调整所有排列视图的大小，以便它们垂直于堆栈视图的轴填充堆栈视图。如果可以，堆栈视图将拉伸所有排列的视图，以与垂直于堆栈轴的最大内在尺寸的视图匹配。

WechatIMG391.jpeg

动态改变栈视图的位置和尺寸

尽管 UIStackView 允许您在不直接使用自动布局的情况下布局其内容，但仍然需要使用自动布局来定位 UIStackView 本身。一般来说，这意味着固定 UIStackView 的至少两个相邻边，以定义其位置。在没有附加约束的情况下，系统根据 UIStackView 的内容计算其大小。

沿着 UIStackView 的轴，它的大小等于已排列的视图大小加上视图间的空间总和。
UIStackView 轴的垂直方向，它的大小等于最大的已布局视图的尺寸
如果 UIStackView 的 isLayoutMarginsRelativeArrangement 属性设置为true，那么它的大小增加已包含边缘空白的空间。

可以提供其他约束来指定 UIStackView 的高度、宽度或两者。在这些情况下，堆栈视图将调整其排列视图的布局和大小，以填充指定区域。确切的布局因堆栈视图的属性而异。见 UIStackView.Distribution 以及 UIStackView.Alignment 枚举以获取有关 UIStackView 如何处理其内容具有额外空间或空间不足的完整描述。
也可以根据 UIStackView 的第一个或最后一个基线来定位 UIStackView，而不是使用顶部、底部或中心Y位置。与 UIStackView 的拟合大小一样，这些基线是根据 UIStackView 的内容计算的。

水平 UIStackView 返回forFirstBaselineLayout和forLastBaselineLayout方法的最高视图。如果最高的视图也是 UIStackView，则返回对嵌套 UIStackView 调用forFirstBaselineLayout或forLastBaselineLayout的结果。
垂直 UIStackView 返回forFirstBaselineLayout的第一个排列视图和forLastBaselineLayout的最后一个排列视图。如果这些视图中的任何一个也是UIStackView，那么它将返回对嵌套 UIStackView 调用forFirstBaselineLayout或forLastBaselineLayout的结果。

note:基线对齐仅适用于高度与其内部内容大小高度匹配的视图。如果视图被拉伸或压缩，基线显示在错误的位置。

管理 UIStackView 的外观

UIStackView 管理其排列视图的大小和位置。有许多属性定义 UIStackView 如何布局其内容

axis 属性决定栈的方向，无论是垂直方向还是水平方向
distribution 属性决定沿着栈的轴排列的视图的布局
alignment 属性确定垂直于堆栈轴的排列视图的布局。
spacing 属性决定排列视图间的最小空间。
isBaselineRelativeArrangement 属性确定是否从基线测量视图之间的垂直间距。
isLayoutMarginsRelativeRangement 属性确定UIStackView是否相对于其布局页边距布局其排列视图。

通常，您使用单个 UIStackView 来布局少量的项。通过将 UIStackView 嵌套在其他 UIStackView 中，可以构建更复杂的视图层次结构。如下图显示了一个包含两个水平堆栈视图的垂直堆栈视图。每个水平堆栈视图都包含一个标签和一个文本字段。

WechatIMG392.jpeg

也可以通过向排列视图添加其他约束来微调排列视图的外观。例如，可以使用约束设置视图的最小或最大高度或宽度。也可以为视图定义纵横比。布局其内容时使用这些约束。例如，在图像视图中有一个宽高比约束，该约束在调整图像大小时强制执行恒定的纵横比。

在向堆栈视图中的视图添加约束时，请小心避免引入冲突。一般来说，如果视图的大小默认为给定维度的内部内容大小，则可以安全地为该维度添加约束。

动态改变 UIStackView 的内容

当对arrangedSubviews 数组内容进行增加、删除、插入，或者改变排列视图的子视图的 isHidden 属性时，UIStackView 将自动跟新它的布局

// Appears to remove the first arranged view from the stack.
// The view is still inside the stack, it's just no longer visible, and no longer contributes to the layout.
let firstView = stackView.arrangedSubviews[0]
firstView.isHidden = true

UIStackView 还自动响应对其任何属性的更改。例如，可以通过更新堆栈视图的axis属性来动态更改堆栈的方向。

// Toggle between a vertical and horizontal stack
if stackView.axis == .Horizontal {
    stackView.axis = .Vertical
}
else {
    stackView.axis = .Horizontal
}

通过将这些更改放置在动画块中，可以设置对已排列子视图的isHidden属性的更改和对 UIStackView 属性的更改的动画。

// Animates removing the first item in the stack.
UIView.animateWithDuration(0.25) { () -> Void in
    let firstView = stackView.arrangedSubviews[0]
    firstView.isHidden = true
}

最后，您可以直接在I nterface Builder中为 UIStackView 的许多属性定义特定于大小类的值。每当堆栈视图的大小类更改时，系统会自动设置这些更改的动画。