UIStackView 看我就够了

介绍

UIStackView 是 iOS9新增的一个布局技术。熟练掌握相当节省布局时间。
UIStackView 是 UIView 的子类,是用来约束子控件的一个控件。但他的作用仅限于此,他不能用来呈现自身的内容,类似于 backgroundColor。当然了,这个控件相当易学,属性只有4个。

![屏幕快照 2016-07-20 16.52.41](https://o909w11l5.qnssl.com/2016-07-20-屏幕快照 2016-07-20 16.52.41.png)

  • Axls: 子控件的布局方向,水平或者垂直
  • Alignment: 类似于 UILabel 的 Alignment 属性
  • Distributlon: 子控件的大小
  • Spacing: 子控件间的间距

可以看到在属性左边有个加号,点开来是这样的:
![屏幕快照 2016-07-20 16.57.50](https://o909w11l5.qnssl.com/2016-07-20-屏幕快照 2016-07-20 16.57.50.png)

这其实是 UIStackView 也集成了 Size Class,Size Class 是用来布局不同尺寸屏幕的。在这里可以通过选择不同的尺寸来更新子控件约束。

使用

接下来我们在 IB 中使用 UIStackView 来完成以下布局:

![屏幕快照 2016-07-20 17.23.53](https://o909w11l5.qnssl.com/2016-07-20-屏幕快照 2016-07-20 17.23.53.png)

首先上面的 ImageView 是直接做约束完成的。
然后我们可以选择左下角的三个 Label,然后点击右下角第一个图标合成 UIStackView:
![屏幕快照 2016-07-20 17.26.30](https://o909w11l5.qnssl.com/2016-07-20-屏幕快照 2016-07-20 17.26.30.png)

因为三个 Label 间是有间距的,所以接下来我们修改 Spacing 属性:
![屏幕快照 2016-07-20 17.29.29](https://o909w11l5.qnssl.com/2016-07-20-屏幕快照 2016-07-20 17.29.29.png)

这样就很方便的做好了 UIStackView 内部子视图的布局,然后只需要给 UIStackView 设置离左边和下边的约束即可,因为这个 UIStackView 内部的子视图都是 UILabel, UILabel 都是有他自身的固有大小的,所以不需要设置4个布局。

![屏幕快照 2016-07-20 17.31.28](https://o909w11l5.qnssl.com/2016-07-20-屏幕快照 2016-07-20 17.31.28.png)

这样我们就完成了左边三个 Lable 的布局。接下来我们来布局右边的2个控件。

还是和刚才一样,选择 Image 和 label,并且组成一个 UIStackView 并设置好 UIStackView 的布局约束:
![屏幕快照 2016-07-20 17.33.03](https://o909w11l5.qnssl.com/2016-07-20-屏幕快照 2016-07-20 17.33.03.png)

接下来布局内部子控件约束:
![屏幕快照 2016-07-20 17.33.34](https://o909w11l5.qnssl.com/2016-07-20-屏幕快照 2016-07-20 17.33.34.png)

做好这两步你会发现 IB 还是报错,这是因为 UIStackView 并不知道他内部的 image 的宽高,这时候我们可以让 image 有他的固有大小:
![屏幕快照 2016-07-20 17.35.10](https://o909w11l5.qnssl.com/2016-07-20-屏幕快照 2016-07-20 17.35.10.png)

将 intrinsic Size 的属性改为 Placeholder,这时候就解决了报错,至此,整个 View 的约束已经做完,是不是发现比之前全部用 Auto Layout 快多了。

当然了 UIStackView 也是可以用代码创建的。

class UIStackView : UIView {
init(arrangedSubviews views: [UIView]) 
var arrangedSubviews: [UIView] { get }
func addArrangedSubview(view: UIView) 
func removeArrangedSubview(view: UIView) 
func insertArrangedSubview(view: UIView, atIndex stackIndex: Int) ... 
}

第一个方法是用来创建一个 UIStackView 的,传入 views 里的数组的顺序代表了 UIStackView 里子视图的顺序。
第二个方法是用来获得 UIStackView 里有哪些子视图的。

后面3个方法和 UIView 里的方法是类似的。
看到 addArrangedSubviewremoveArrangedSubview 你是不是想到了addSubViewremovfromSuperView

下面有张表,可以区别这四个方法:
![屏幕快照 2016-07-20 17.44.56](https://o909w11l5.qnssl.com/2016-07-20-屏幕快照 2016-07-20 17.44.56.png)

从表中可以看出,添加 UIStackView 的子视图应该用 addArrangedSubview,移除 UIStackView 某个子视图应该用 removeArrangedSubview

UIStackView 用来约束子视图的属性有以下几个

var axis: UILayoutConstraintAxis 
var distribution: UIStackViewDistribution 
var alignment: UIStackViewAlignment 
var spacing: CGFloat 
var baselineRelativeArrangement: Bool 
var layoutMarginsRelativeArrangement: Bool

这些就是使用代码来创建 UIStackView 了。

UIStackView 还是蛮简单的,但是功能却十分强大。这篇文章应该能让大家了解 UIStackView 的基本使用了。

推荐阅读更多精彩内容

  • 目录 0、前言 一、Auto Layout前世今生 二、Auto Layout基础知识 1.Auto Layout...
    浮游lb阅读 13,911评论 2 65
  • 我最近一直在学习写作,也投了一篇文章在网站上。 本来是自娱自乐之物,幸运的有了一些粉丝后,也开始...
    西西系阅读 70评论 0 1
  • 文/徐雁冰 一片树叶从树上飘落 大地成了它的宝座 曾经的浓妆艳抹 经历过岁月颠簸 生命,终将陨落 一片树叶从树上飘...
    徐雁冰阅读 61评论 0 1
  • 今天的阳光很亮 人们说着天地的特征 懒懒的眼睛 轻轻地看 我在一个角落睡着 阳光很亮 亮回从前 从前忐忑的夏天 很...
    水槛阅读 53评论 0 4
  • 周一的晚上,下班了不想坐公交车回家,想着弟弟刚好周一休息,就请他骑电动车来接我,结果,他不仅来了,还给我解锁了完美...
    含羞的红颜阅读 96评论 0 0