原文：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将模拟器横向来看看。
image - 点击WEATHER旁边的Hide按钮。它成功地隐藏了文本，但是它没有重新定位它下面的部分，留下一块空白。
image - 可以改进这些部分的展示顺序。如果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模拟器来跑一下看看。
[图片上传失败...(image-b4cef2-1535097314156)]
好在苹果也考虑到这种情况，我们改变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做高级动画是稍稍有点复杂的，以后有空还是需要专门开一篇来做介绍。
