UIStackView教程

这是一篇挺老的文章,主要就是介绍在iOS9时推出的控件UIStackView。我发现网上的资料并不算多,而AppCoda的这一篇就浅显易懂,所以决定翻译一下,再写个Demo

Demo 地址如下 : https://github.com/liberalisman/StackView-Demo

UIStackView教程_第1张图片

UIStackView 简介

开始这个教程的话,我们会讲一些iOS9的新特性,iOS最近推出的新版本带来了很多新的特性,而新推出的UIStackView应该引起开发者第一时间的关注。据我所知,一些开发者认为使用AutoLayout去设计一些复杂的用户界面是十分困难的。UIStackView就是帮助开发者将这些复杂页面的设计工作变得更简单。

UIStackView为布局一组控件提供了线性的布局页面,这组控件可以垂直显示,也可以水平显示。当View被加入到UIStackView,你不再需要为它设置约束。UIStackView会自动管理子控件的布局并为他们添加约束。这也就意味着,子控件可以去适应不同的屏幕尺寸。

再进一步讲,你可以将一个UIStackView放进另一个UIStackView中以实现更为复杂的用户界面的设计工作。当然千万不要被我误导,UIStackView并不意味着你再也不必和约束打交道,你至少是要为UIStackView设置约束的。UIStackView只是节省了你为每一个界面元素添加约束的时间,同时你在UIStackView中添加和删除约束将变得超级简单。

Xcode 7提供了两种方式去使用UIStackView。你可以在对象库拖一个UIStackView然后放进StoryBoard中,UIStackView水平垂直两种,然后你可以拖拽一些视图控件,例如Label,Button,image等直接放入UIStackView。或者,你也可以利用在自动布局工具栏中Stack选项。利用这种方法,你可以选择两个或者多个视图控件,直接点击StackInterface Builder会将这些试图对象加入到UIStackView并且重新指定他们的大小。说到此处如果你还没有明白UIStackView,那也不要担心。在这个教程中,我们会展示这两种方法。只需要继续阅读,然后在一瞬间,你会 的一下就懂了。

The Demo App

首先我们要预览一下我们即将构建的App,在这个教程中,我们会展示在Interface中利用UIStackView如何构建这个App

UIStackView教程_第2张图片

当然你不用UIStackView也可以构建一个这样的页面,但是正如你所见,UIStackView完全改变了你进行页面布局的方式。这个教程无需任何代码,我们将专注于利用Interface Builder来构建这个用户界面。

添加 UIStackView

打开 Xcode 7 ,然后打开main.storyBoard。从右侧的对象库面板中,往storyBoard中拖一个垂直方向的UIStackViewUIStackView可以分别管理水平方向垂直方向的子控件。因为我们想要布局的ImageViews是垂直方向的,所以我们选择一个垂直方向的UIStackView

UIStackView教程_第3张图片

接下来从控件库往外拖一个Imageview,当你把Imageview拖拽到StackView里,Imageview会自动调整尺寸,重复上面的步骤,我们再往StackView里面添加两个imageView,这时候神奇的一幕发生了,当你把另外两个imageView添加到StackView里面时,StackView会自动给这两个imageView进行垂直布局,并为他们添加上了约束条件。是不是很酷?

为 UIStackView 添加约束

StackView为开发者节省了为每一个界面元素添加约束的时间,但是你必须要为你的StackView添加约束条件,接下来我们将为刚才添加到是图中的StackView添加约束

  • 设置StackView与父控件顶部、左侧、右侧的距离
  • 设置StackView的高度占父控件高度的70%

现在,我们选中StackView并点击Pin按钮。设置距离顶部、左侧、右侧的距离各自分别为10,0,0。并且把这三个约束加上。

UIStackView教程_第4张图片

现在StackView的位置,并不满足我们的约束条件,你需要点击警告去修复这个问题。

想设置高度的约束,到文档大纲视图。按住Control键,从StackView拖线到View上面,松开后,选择Equal Height.

UIStackView教程_第5张图片

这样设置以后,StackView的高度就与使徒的View相等。然而我们只需要让StackView的高度是视图的View的70%。所以选择StackViewHeight属性,然后到属性面板,把Mutiplier的值从1.0变成0.7

UIStackView教程_第6张图片

设置StackView属性值

StackView看起来并没有像预期一样,一旦你使用了StackView,你可以通过修改StackView的属性值来改变它的外观。

Axis是坐标轴,负责水平还是垂直。
alignment是对齐方式。

UIStackView教程_第7张图片

Distribution决定了StackView中子控件的尺寸和位置。它默认被设置为Fill。在这个例子里,StackView要尽可能的利用有限的空间去适配它的子控件。接下来我们将选项改为Fill EquallyStackView会自动将里面的子控件重新布局为大小相等的控件。

UIStackView教程_第8张图片

Space选项允许你通过修改该选项,调解两个控件之间的距离,此处将值改为10。

UIStackView教程_第9张图片

设置图片

接下来为三个ImageView设置图片

UIStackView教程_第10张图片

现在可以把程序跑起来看看效果,在不同的模拟器,UI都可以很好的适配各种设备。StackView已经自动帮你添加好了布局。实际上你可以通过页面调试选项,来查看为ImageView添加的布局。

UIStackView教程_第11张图片

用嵌套的方式布局控件

还有一些LableButton需要添加到页面上,如图所示,拖两个LableStackView的正下方,上面的标签字号为30.

然后选中两个Lable,点击stack选项,将这两个控件合并为一个StackView

接下来添加两个按钮,一个Like,一个Share。把这两个控件合并为一个StackView,设置间距为 5,方向水平。

UIStackView教程_第12张图片

把按钮的StackView拖进LabelStackView中,选中顶部的Nature标签和Buttonde StackView,点击stack选项,将他们两个合并为一个StackView,设置方向为水平

UIStackView教程_第13张图片

选中这个StackView,将对齐方式调整为First BaseLine,沿第一个对象的基线对齐,然后给LableButton加一个20的间距。

UIStackView教程_第14张图片

这样,我们只需要利用 StackView 的嵌套,就可以实现我们想得到的布局。

最后,我们实现了用StackView包裹ImageView,同时也实现了StackView包裹LabelButton。将顶部、左侧、右侧各自设置值为 8,0,0。

UIStackView教程_第15张图片

为了确保Label的描述文字可以正好适配,将Label的行数改为0,文字的Line break设置为文字包裹。这样你就完成了界面的设计。

现在可以把程序跑起来看一下效果

UIStackView教程_第16张图片

如果横屏,效果是这样的:

UIStackView教程_第17张图片

看起来还可以,但是如果横屏时图片是水平排列那就更好了:

UIStackView教程_第18张图片

利用*Size Class 构建自适应的 StackView

为了实现 iPhone 在横屏时显示不同的布局,我们需要让StackView是自适应。在 iOS8,介绍过 Size Class 的概念,下面的表格介绍了不同的 iOS 设备以及他们相对应的 Size Class

UIStackView教程_第19张图片

你可以利用 Size Class 提供一个指定的布局去覆写之前的布局设计。在这个例子中,我们需要将StackView的方向在以下两种情况下,由垂直变为水平。

  • 宽度紧凑 - 高度紧凑
  • 宽度宽松 - 高度紧凑

接下来选择我们的StackView,然后打开属性面板,点击Axis边上的+号。

选择 任意宽度 , 高度紧凑,并把StackView的方向设置为水平方向

UIStackView教程_第20张图片

然后。。。。。。就妥了!

总结

在这个教程中,对StackView进行了简单介绍,为大家做了一个Demo,以及如何使用这个全新的组件。StackView这种流线型的布局方式,让你在布局时只需要使用很少的约束。

Apple的工程师也是推荐优先使用StackView,实在不行在用原生的约束。

我自己做了一个简单的Demo,地址如下 : https://github.com/liberalisman/StackView-Demo

你可能感兴趣的:(UIStackView教程)