iOS 9 学习系列：UIStack View （转载）

作者：Nathan_Bao
地址：http://www.jianshu.com/p/1991e6c2881a

在 iOS9 中，Apple 引入了 UIStackView，他让你的应用可以通过简单的方式，纵向或横向的叠放你的 views。UIStackView 采用 auto layout 的方式来管理他的子视图的位置和尺寸。让你更简单的构建自适应的 UI。

如果在 iOS9 之前，你想要创建类似 UIStackView 为你提供的这种布局，你需要构建大量的 constraints。你需要编辑许多诸如边距、高度、x/y 轴的位置，还有它们的依赖关系等。

UIStackView 把这些全部帮你做了。甚至在你添加或者移除某些 view 时，还提供了平滑的动画。当 view 状态改变时，他会自动的改变 layout 的属性值。

使用 UIStackView

现在我们通过创建一个例子来说明怎么使用 UIStackView，最终的代码放在了 Github，你可以下载来研究.我们要创建一个简单的示范，演示 UIStackView 是怎么工作的？这个页面底部有2个segmented controls，用来控制 UIStackView 的对齐和分布的属性。

上面的图片就是我们要创建的示例。如你所见，我们显示了4个朋友的图片，还有2个 segmented controls 在下面。这些 UI 使用了auto layout 布局，可以适配多种尺寸。

一 会儿的制作过程，会让你感到惊喜，我们仅仅手动的添加了4个 layout positioning constraints。所有在这个UIStackView中的view都由它自动控制位置。我们一共有4个 UIStackView, 只有第一个我们需要设置一下他的 constraints。这是我们页面中 stackview 所在的位置。

当你从 Interface Builder 中拖拽了一个 vertical stack view 到页面上后，你可以打开它的 constraint 面板，像上图一样编辑它的属性。这会把这个主 stack view 放在页面的中央，正确的位置上。

从 Interface Builder 中拖拽3个 horizontal stack view 到刚才创建好的 UIStackView 中。在最上面的 stack view,包含四个 UIImageView ,每个 imageView 中展示一个我们的朋友的照片。你拖拽四个 UIImageView 到 stack view 中就可以了。每个图片的大小尺寸都是不一样的。为了避免变形，我们给 imageView 的 contentMode 设置为 Aspect Fit。这意味着，不去管图片的尺寸，图片总会以正确的比例展示在 imageView 中。

你 可能注意到了，在最终的 demo 中，每个 imageView 之间有个间隔，这是因为设置了 stackView的 spacing 属性为5的原因。在 interface builder 的 attributes inspector 面板可以设置 spacing 的值，同时还可以设置 alignment 和 distribution 的属性。这里我们缺省的设置为 Fill。因为一会儿我们会通过选择 segment 来改变它的值。

另外两个 stackView,同样是 horizontal stack view。非常简单，每个 stack view 中包含一个 label 和一个 segmented control。设置 segmented control为下面的内容。

Distribution

• Fill

• Fill Equally

• Fill Proportionally

• Equal Spacing

• Equal Centering

Alignment

• Fill

• Top

• Center

• Bottom

我们一会儿就能看到，这些属性是如何影响布局的。很多时候，他们的排列方式依赖 contentSize的值。好在，我们这个例子非常简单，image 的大小就是照片的实际大小。

现 在我们的 UI 都创建好了。我们需要给 segment 设置选中后的动作。首先把最上面的 stack view 拖拽 outlet 到 viewController 中，命名为 peopleStackView。然后分别拖拽一个 action 给segmented control。在 action 中对 peopleStackView 的 alignment 和 distribution 属性进行调节，对齐和排列方式由用户决定。

你可以看到，我给每个动作加了一个动画的效果，但这不是必须的。如果你移除动画效果，对齐和排列的方式依然会改变。好现在运行一下程序吧。

你可以看到视频中的结果，点击打开视频

尝试着使用不同的排列组合，看一下会是什么结果。它会让你知道UIStackView时多么强大，在不同尺寸的设备上开发用户界面有多方便。

为现有的view，添加UIStackView

如 果你想为你现在已经做好的 view 添加 UIStackView，也很简单。先移除掉你的 view 上的constraint，然后选中他们，点击一下 interface builder 的底部右手边，第一个按钮。（就是原来你给 view 添加 constraint 的那些按钮，左边多了一个）。这会立刻把你选中的view，全部放入一个 UIStackView 中。

这会把你原来的布局方式转为stack view的布局方式，由stack view来控制布局。

延伸阅读

想要了解更多关于Xcode7中 UIStackView的内容，推荐阅读 WWDC 2015 的 session 218 Mysteries of Auto Layout, Part 1.在视频前15分钟里，Jason Yao 介绍了 UIStackView，并且现场制作了一个Demo演示如何操作的。