开始用Swift开发iOS 10 - 4 用Stack View设计UI

cover

前一篇 开始用Swift开发iOS 10 - 3 介绍Auto Layout中提到Auto Layout工具栏有个stack按钮，这是 Stack View功能。为了解决复杂UI时布局约束定义困难，Apple从iOS 9开始引入 Stack View。
这篇文章将学习到：

1. 用Stack View布局UI。
2. 用image views展示图片。
3. 用内建的asset catalog管理图片。
4. 用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：

1. 直接从Object library中拖出stack view（纵向或横向），然后把其他视图拖动stack view
2. 选中一些视图，然后点击Interface Builder editor右下角一组按钮中的stack按钮

一个小程序

• 新建项目 StackViewDemo

• 向Xcode中添加图片

  • 从[图片](https://www.appcoda.com/resources/swift3/stackviewdemo- images.zip)下载所需图片，加压后有3组9张图片，每组有3张不同类型的图片，针对不同类型的设备：

    • user1.png （ non-Retina的一些老设备）
    • [email protected] （iPhone 4/4s/5/5s/6）
    • [email protected] （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的几个属性：
  • axis stack view中对象是水平放置还是垂直放置，也就是Vertical Stack View和Horizontal Stack View之间的切换
  • alignment stack 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》 的一篇记录