cover
前一篇开始用Swift开发iOS 10 - 3 介绍Auto Layout中提到Auto Layout工具栏有个stack按钮，这是Stack View功能。为了解决复杂UI时布局约束定义困难，Apple从iOS 9开始引入Stack View。
这篇文章将学习到：
- 用Stack View布局UI。
- 用image views展示图片。
- 用内建的asset catalog管理图片。
- 用Size Classes适配Stack View
Stack View是什么
Stack View为在纵向或横向布置一个视图的集合，提供了一个流线型界面。可以用stack view将很多UI对象合成一个。视图嵌入一个stack view里以后,就不再需要定义自动布局约束.
Stack View管理它子视图的布局,然后自动提供布局约束。这意味着子视图已经准备好去适应不同的屏幕尺寸。此外，也可以嵌入一个stack view到另一个stack view来构建更复杂的用户界面。但是，这并不意味着不需要处理自动布局。仍然需要定义stack view的布局。这样不仅能够节约在创作每个UI元素的约束的时间，也可以轻松的从布局里来添加/移除视图。
Xcode提供两种方法使用Stack View：
- 直接从Object library中拖出stack view（纵向或横向），然后把其他视图拖动stack view
- 选中一些视图，然后点击Interface Builder editor右下角一组按钮中的stack按钮
一个小程序
-
新建项目 StackViewDemo
-
向Xcode中添加图片
-
从[图片](https://www.appcoda.com/resources/swift3/stackviewdemo- images.zip)下载所需图片，加压后有3组9张图片，每组有3张不同类型的图片，针对不同类型的设备：
- user1.png （ non-Retina的一些老设备）
- user1@2x.png （iPhone 4/4s/5/5s/6）
- user1@3x.png （iPhone 6 Plus等高分辨的）
-
拖动图片竟然xcode的asset catalog中，xcode会自动组织这些有规律的图片，使用时直接用user1,不需要靠后面的@2或@3。
-
-
用Stack View布局title的label
- 选择
Main.storyboard，从Object library中拖出Vertical Stack View到storyboard中 - 拖出一个label到stack view中。一旦label进入stack view中，它就自动调整大小以适应label
- 修改label的title为“Instant Developer”，字体大小为40 points，font style为medium，字体颜色为红色
- 另外拖出一个label到stack view中，修改label的title为“Get help from experts in 15 minutes”
- 选择stack view，在属性检查器中修改Alignment参数为center，这样使stack view中的label水平居中对齐。
多个视图在一起不方便选择时，可以用 shift + 右击：
stack view的几个属性：-
axisstack view中对象是水平放置还是垂直放置，也就是Vertical Stack View和Horizontal Stack View之间的切换 -
alignmentstack view中对象的对齐方式 -
distribution
- 选择
用Stack按钮布局多个图片
- 拖动一个image view对象，并修改其
image属性为user1 - 同样的方法再添加两个image view对象，
image属性分别为user2，user3。粗略调整图片的带下，放在一个水平，大概如下：
- 选中三个image view，击Interface Builder editor右下角一组按钮中的stack按钮，则生成一个新的horizontal stack view。
- 修改新生成的horizontal stack view的属性，
spacing为 10，表示图片之间的间距，Distribution为Fill Equally - 同时选中两个stack view，点击stack 按钮，再生成一个新的大vertical stack view
为stack view添加布局约束
- 选中大的stack view，添加space constraints，上，左右，分别为70，0，0
添加约束后，如果出现布局问题，可通过issue indicator解决，可参考上一篇文章。 - 看预览assistant editor，查看其它设备会发现两个问题：
- Instant Developer label文本在小屏幕设备被截断
- 图片的宽高比改变了
选择Instant Developer label，修改Autoshrink属性为Minimum Font Size，值为20，这样就设置了label的字体可以变化，最小值为20 ，小屏幕就不会被截断了。
横向control-drag图片的stack view，选择Aspect Ratio，使图片的宽高比不变化。
在图片stack view下添加一个label
-
拖动一个label到图片下，看到一个蓝色线后松开
- 改变label的文本：
Need help with your coding problems? We’ll find you the right developer who can help you in 15 minutes. - label的属性
lines改为0，表示不限制行数 - 选择大stack view，修改间距
sapcing为10，修改Alignment为居中
用stack view布局Buttons
- 添加两个Button："Sign in" 和 "Sign up with Facebook"
- 修改白字体，红背景，宽度为200
- 选择两个Button生成vertical stack view，
spacing为10 -
为vertical stack view添加两个约束，水平居中和底边距20
- 当把两个button聚合成stack view时，button的大小会自动调节到适宜大小，也就是"Sign up with Facebook"的宽度变为155 。需要再添加一个宽度约束，修改
Constant值为200 。
用Size Classes来调节Stack view
-
landscape orientation vs portrait orientation
直译就是风景画方向和肖像画方向，其实就是指横屏和竖屏 - 上面设计的UI看上去以不错了，但一直没有考虑的横屏的情况。因为横屏上下高度变小，原本在竖屏下适宜的stack view上边距，就有点大了，需要小一点。这也导致了，从iOS 8开始引入了一个新的UI设计概念Adaptive Layout（自适应布局），为此，Apple引入了Size Classes。通过Size Classes 和 auto layout一起设计自适应UI。Size Classes仅仅是对屏幕进行了分类, 实际上的布局还是交给autolayout
- Size Classes有两种类型：regular 和 compact（可以理解为大[R] 和 小[C]）。而这两种类型应用在两个方向上：vertical (height) 和 horizontal (width) ，就对应不同类型的设备：Regular width-Regular Height, Regular width-Compact Height, Compact width-Regular Height and Compact width-Compact Height
最新版本的Xcode已经为我们提供了不同设备和方向的Size Classes查看：
- 选择上边距约束。在属性检查器中，点击
Constant前面的+号，弹框中分别选择：Width：Any，Height：Compact，Gamunt：Any，后面的值为0，表示只有在Compact height下上边距为0
- 为了更加简洁也可以在有些屏幕状态下把"Need help with your ..." label隐藏掉，就是height为0。也就是为label添加一个只有在Width：Any，Height：Compact，Gamunt：Any这个Size Classes下，的height约束。
用control-drag方法添加height约束：
选择现价的height约束，修改
Constant为0；去除选中Installed，点击Installed前的+，弹出框选择Width：Any，Height：Compact，Gamunt：Any，并选择新加的Installed（height约束颜色变浅了，说明这个约束不是在任何状态下都有效的）：
练习
还有考虑特殊的一些设备的情况，添加一些特殊的约束：
- 在wR hR时，修改两个按钮的宽度为300
- 在iphone 6/7 和一些老的iphone等设备竖屏时，修改"Need help with ..." label 字体为15
- 在wR hR时，修改图像stack view的上下空间为30
代码
Beginning-iOS-Programming-with-Swift
说明
此文是学习appcode网站出的一本书 《Beginning iOS 10 Programming with Swift》 的一篇记录
网友评论