原文：UIStackView Tutorial: Introducing Stack Views

最初教程由Jawwad Ahmad原创。Kevin Colligan更新支持iOS 11、Xcode 9和Swift 4。

转载注明：http://www.rockerhx.com/2018/08/21/2018-08-21-UIStackView-Tutorial/

iOS开发当中是不是遇到需要动态添加或者删除视图元素的需求。你是上基hub去嗨一遍第三方库还是自行撸frame，或者用Auto Layout的约束更新。就这点破需求，反正我是坚决不选前两者，即便是万不得已，最多也是更新约束（虽然Auto Layout的所见即所得极大缩短了开发耗时，增加我撸猫的快乐时光，但不得不承认我是很反感用代码去改约束，可视化编码还要去code约束，脑子有病！！！）。处理这类需求，总之一句话。

好在，现在大家伙应该都只支持到iOS9了，用上UIStackView来处理这类需求简直是美滋滋，艾玛真香~~~ 在本教程中，阔以了解UIStackView如何提供一种简单的方式来处理水平或垂直布局。还阔以了解如何通过使用对齐、分布和间距等属性来获取视图，以便自我调整方便自适应。

本教程假定观者基本熟悉Auto Layout。如果不熟悉，请移步传送门Beginning Auto Layout。

教程开始

在这份UIStackView教程中，我们将使用一个名为“Vacation Spots”的应用程序。这个简单的应用阔以展示度假地点的一些基础信息。不要方方脏脏的就开始动手，因为有几个问题需要我们先用UIStackView来处理下，而且比单独使用自动布局要简单得多。首先下载这个UIStackView教程的入门项目。打开项目并在iPhone模拟器上运行。你会看到一份度假地点清单。

点击London那一栏，进入伦敦的信息视图。乍一看，好像还不错，但有几个问题。

看看视图底部的一排按钮。他们目前的位置是固定的，所以他们不适应屏幕宽度。不信按Command - left将模拟器横向来看看。
点击WEATHER旁边的Hide按钮。它成功地隐藏了文本，但是它没有重新定位它下面的部分，留下一块空白。
可以改进这些部分的展示顺序。如果what to see部分正好位于why visit部分之后，而不是在两者之间有weather部分，这将会更合乎逻辑。
在横屏模式下，按钮的底部离视图的底部边缘太近了一点。如果能减少元素之间的间距，那就更好看。

既然我们已经罗列好了改进工作，那就动手开始吧！！！

打开Main.storyboard。第一次这样做时，会要求您选择初始设备视图。这个视图在运行时没有效果，它针对不同的设备调整大小，也只是让故事板的使用变得更加容易。iPhone 7或者8就行了。

你阔以随时点击故事板的操作区域的正下方，选择View As: iPhone 7 ，或者随便改变也行。
现在打开Spot Info View Controller看看，这东一块西一坨的颜色是什么鬼？

这些标签和按钮的各种背景色，运行时会被清除。在Storyboard中，它们只是视觉上的辅助，帮助显示改变StackView的各种属性将如何影响其嵌入视图的布局。

你现在不用管这些，如果在运行应用程序的时候你真的想看到背景色，你可以在SpotInfoViewController内部的**viewDidLoad()**中临时注释出以下几行。

// Clear background colors from labels and buttons
for view in backgroundColoredViews {
    view.backgroundColor = UIColor.clear
}

此外，所有的UI元素都使用了明确的占位内容，以便链接属性的时候更加明确方便，减小连错的可能性。

@IBOutlet weak var whyVisitLabel: UILabel!

叨逼叨完了，let’s get started!

第一次

使用stack view第一件事是修复按钮底部行之间的间距。stack view可以以各种方式沿其轴分布其视图，其中一种方式是每个视图之间的间距相等。苹果为了推广新控件，我们可以直接把想要的处理的控件元素直接一键压入stack view。打开Spot Info View Controller故事版场景，按住Command选中底部三个按钮。

点击右下角Show Document Outlin：

在左侧控件集列表内确认下是不是选对了按钮：

选中后，单击故事板画布右下角自动布局工具栏中的“新建堆栈”按钮:

按钮将嵌入到新的堆栈视图中:

现在出现了约束警告，stack view只是一种排版形式，是继承自UIView，它也是需要约束来确定frame，只有确定好自身的frame以后才能处理内部控件布局。

在stack view中嵌入控件时，将删除对其的任何约束。例如，在将按钮嵌入stack view之前，Submit Rating按钮的顶部有一个连接到Ratinglabel的垂直间距约束：

点击选中Submit Rating按钮可以看到它不在包含任何约束。

也阔以通过**Size inspector (⌥⌘5)**来查看控件约束情况：

接下来我们需要为stack view添加约束控制，如果整个页面的控件太多导致不好选中某个控件，直接从左侧的控件列表就好。

另外有个小技巧，按住Shift再单击右键，Xcode会帮大忙。

最后通过右下角的Auto Layout toolbar添加约束即可。

保持Constrain to margins选中，然后添加如下约束。

Top: 20, Leading: 0, Trailing: 0, Bottom: 0

按照如图所示输入数字直接tab就好，简单而快速的添加约束才是敏捷开发的首选。

控件之间现在看起来像是这样，stack view会拉伸第一个控件来填充空间。

决定stack view内部控件的分布属性为distribution。目前，它被设置为Fill，这意味着被包含的控件将沿着其轴完全填充。为了实现这一点，stack view将只拉伸其中一个视图来填充额外的空间；具体来说，它会拉伸content hugging优先级最低的视图，或者如果所有控件优先级相同，它拉伸第一个视图。

然鹅，我们只是向他们等距分布就好。切换到Attributes inspector属性编辑器，把Distribution的值从Fill改到Equal Spacing即可：

跑一下看看底部按钮是不是等距分布了，无论是竖屏还是横盘都是稳稳的，不过还不够完美，当你切换到小屏幕上，比如使用iPhone SE模拟器来跑一下看看。

好在苹果也考虑到这种情况，我们改变Distribution属性，从Equal Spacing改为Fill Proportionally，spacing值改为10。

现在，在iPhone SE模拟器上再跑一次，这次必须棒棒哒。

咋样，第一次上手stack view484真香，so easy。

在没有stack view，你必须使用间隔视图来占位，每对按钮之间有一个占位。要正确定位间隔视图，您必须向所有间隔视图添加等宽约束以及许多附加约束。它看起来会像下面这样。为了在屏幕截图中可见，间隔视图被赋予了浅灰色背景:

如果只是偶尔这么做一次其实还好，如果做多了，小伙子身体可吃不消啊。特别是动态添加视图这种。比如隐藏例子中的WEATHER这种。

现在我们只是简单的设置间距值，如果你想在某个视图中设置特别的间距，在iOS11里提供的新的Api: setCustomSpacing:afterView。

沙场老司机

经过上面的演练，下面我们就能很轻松的把SpotInfoViewController里需要的结构转换成stack view。

评级部分

选中评级RATING部分的两个控件。

接着还是同样的点击Stack按钮将其嵌入到stack view里。

这次我们只需要添加三个约束即可：

Top: 20, Leading: 0, Bottom: 20

spacing值这是为8：

你可能会看到一个错位的视图警告，如下图所示，其中星星标签已经超出了视图的范围（这种警告可能因为某些beta版本的原因才会出现，没出现那就恭喜你继续）:

如果确定自己的约束是正确的，因为Xcode某些版本的bug引起的视图错位，直接用右下角的Refresh Layout按钮矫正即可。

现在看起来就正常了。

还原视图

如果发现有的时候手残，或者是处于实验性目的，多上了stack view，直接选中需要撤销的控件，按住Option，左击Stack选Unembed即可撤销。

或者选中控件从菜单Editor \ Unembed撤销也行。

试试第一个垂直方式

现在我们来创建垂直方式的堆栈视图，选中WHY VISIT和**<whyVisitLabel>**两个文本控件。

Xcode会根据控件的分布排列来确实方向，就比如现在这样，直接生成的就是垂直分布的堆栈视图。

现在我们来确定约束，只需要把这部分的上左右约束都设置为0，只不过底部约束的对象是相对WEATHER控件，间距是20，一看即懂。

设置完后默认对齐是左对齐，如下图所示：

对齐属性

对齐属性确定堆栈视图如何垂直于其轴布局。对于垂直堆栈视图，可以设置的对齐方式为：

填充·Fill
靠左对齐·Leading
居中对齐·Center
靠右对齐·Trailing

水平堆栈视图对齐属性的值略有不同:

水平布局的对齐方式分别为：

顶部对齐·Top
靠左对齐·Leading
底部对齐·Bottom
靠右对齐·Trailing
第一元素基准线·FirstBaseline：意思是以第一个UI元素的的内容基准线为准，后面元素内容以此基准线对齐。
最后元素基准线·LastBaseline：意思是以最后一个UI元素的的内容基准线为准，前面元素内容以此基准线对齐。

大家阔以选中刚才设置好的垂直堆栈视图，调整下对齐属性看下变化就浅显易懂了。 填充·Fill：

靠左对齐·Leading：

居中对齐·Center：

靠右对齐·Trailing：

跑起来看一下布局稳当冇问题。

转换“what to see”部分

这部分转换和前面一节没啥区别，直接操作关键点即可。

首先选中WHAT TO SEE和**<whatToSeeLabel>**两个文本元素。
其次压入堆栈视图。
对齐方式选中填充·Fill。
最后设置好如下约束即可。

Top: 20, Leading: 0, Trailing: 0, Bottom: 20

设置完以后大概就长这样：

转换“weather”部分

由于需要隐藏天气，所以这部分是比较难搞的。

我们先把这部分的所有元素都压入堆栈视图。先选中WEATHER文本栏和Hide按钮，压入水平堆栈视图，然后在按住Command选中下面的**<weatherInfoLabel>**文本栏部分，将水平堆栈视图和这部分一起压入垂直堆栈视图。

其实可以发现，水平的堆栈视图被Hide按钮给顶开了，如果觉得不喜欢，阔以选中底部对齐的方式来看看效果。

也还是不太满意，那根据我的经验，要不就是修改水平堆栈视图内UI元素的约束优先级，要不就是把Hide按钮给拆出去，单独处理约束。为了容易理解我们还是单独处理。

自行撤回到天气部分的原始转态。选中WEATHER和**<weatherInfoLabel>**两个文本栏部分:

将其压入垂直堆栈视图:

然后设置好如下约束：

Top: 20, Leading: 0, Trailing: 0, Bottom: 20

对齐方式为填充：

因为Hide按钮被拆出去，所以我们需要对其添加约束以保证按钮位置的正确性。因为需要设置约束的相对控件为WEATHER文本栏，所以我们还得再改造改造。直接在控件列表栏选中WEATHER或使用组合拳Control-Shift-click：

压入堆栈视图：

对齐方式·Alignment选中为靠左对齐·Leading，排版·Axis确定为垂直·Vertical排版：

运行看看是啥情况：

我顶你个肺，啥情况，按钮跑偏了？实际上是我们拆出Hide按钮之后忘记给设置约束。按住Control选中Hide按钮拖动指向到WEATHER文本栏添加约束：

只要完成如下两条约束，间距和纵向位置的约束即可：

再重新跑一下，这回就必须妥当了。

堆栈化

在左侧控件列表里选中我们之前所有做个堆栈化的控件：

全部压入堆栈：

然后给最外层堆栈视图添加约束，确保勾选上Constrain to margins，四边边距约束为0即可。然后间隙·Spacing设置为20，对齐方式·Alignment设置为填充·Fill。

再次运行还是会有刚才那个屌问题。

只要记住如果有外设相对控件的约束，只要堆栈化，约束就会被干掉，只能再次添加了：

完善层级

最后我们需要把what to see的部分挪动到weather部分上面去，最好的方式是在左侧控件列表里拖动：

如果在Storyboard里直接去拖动，很可能会因为选错控件元素而导致打乱结构。

根据屏幕大小配置间隙

由于在横屏的情况下，垂直方向上的空间比较珍贵，所以针对横屏，把间隙改为10比较稳妥。找到间隙·Spacing的左侧的**+**号按钮：

选择Any Width > Compact Height，然后添加·Add Variation：

给wAny hC栏添加值为10即可：

最后运行一下看看，包括横屏（⌘←）也看看，484看起来比较舒爽了。

动画

当前的隐藏和呈现动画效果看起来有木有点生硬，感觉怪怪的。我们还是添加点动画让细节看起来比较丝滑为妙。打开SpotInfoViewController.swift，定位到updateWeatherInfoViews(hideWeatherInfo:animated:)方法，现在看起来长这样：

weatherInfoLabel.hidden = shouldHideWeatherInfo

替换成如下代码即可：

if animated {
    UIView.animate(withDuration: 0.3) {
        self.weatherInfoLabel.isHidden = shouldHideWeatherInfo
    }
} else {
    weatherInfoLabel.isHidden = shouldHideWeatherInfo
}

找到@IBAction func weatherHideOrShowButtonTapped(_ sender: UIButton)方法，替换成如下代码：

@IBAction func weatherHideOrShowButtonTapped(_ sender: UIButton) {
	let shouldHideWeatherInfo = sender.titleLabel!.text! == "Hide"
	updateWeatherInfoViews(hideWeatherInfo: shouldHideWeatherInfo, animated: shouldHideWeatherInfo)
	shouldHideWeatherInfoSetting = shouldHideWeatherInfo
}

这样跑一下看，隐藏起来就不会辣么尬了。。。

写在最后

一切照旧，懒癌患者或者阅读理解不过关的胖友阔以直接下载最终代码。

有关UIStackView的使用就到这里，关于使用UIStackView做高级动画是稍稍有点复杂的，以后有空还是需要专门开一篇来做介绍。