Fork me on GitHub

开始用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中添加图片

    • 图片下载所需图片,加压后有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的几个属性:

      • axis stack view中对象是水平放置还是垂直放置,也就是Vertical Stack ViewHorizontal 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,表示图片之间的间距,DistributionFill 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有两种类型:regularcompact(可以理解为大[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》 的一篇记录

坚持原创技术分享,您的支持将鼓励我继续创作!
  • 本文标题: 开始用Swift开发iOS 10 - 4 用Stack View设计UI
  • 本文作者: AndyRon
  • 发布时间: 2017年07月06日 - 00:00
  • 最后更新: 2017年09月09日 - 13:01
  • 本文链接: http://andyron.com/2017/beginning-ios-swift-4.html
  • 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!