作者denkeni (Denken)
看板MacDev
标题[心得] 纯程式码 Auto Layout（三）UIStackView
时间Sat May 6 23:41:08 2017
这是「纯程式码 Auto Layout 与概要教学」系列第三篇。总共有三篇：
- 从 setFrame 到 Auto Layout constraint
- Visual Format Language (VFL)
v 何时需要 UIStackView？
本系列文范例，都整理成 Swift Playground 在这专案里
https://github.com/denkeni/Auto-Layout-Programmatically
（由於批踢踢不方便贴程式码，会精简摘录
含完整程式码与後续文章更新，请到网页版
https://goo.gl/qNCPHQ ）
# 前言：何时需要 UIStackView？
用 VFL 已可轻松描述能适应不同尺寸的动态排版，譬如同前篇例子 2-5，我们希望单纯设定三个长方形之间，是等间距（而非如前篇 —— 自己预先计算出来是 10pt 再指定为间距值）：
https://cdn-images-1.medium.com/max/800/1*_7pEUtg78EELsPmSXpL2UQ.png
```精简版
VisualFormat: "H:|-(p)-[subview1(100)]-[spacer1]-[subview2(120)]-[spacer2(==spacer1)]-[subview3(130)]-(p)-|"
```
这里的间距（`spacer1`、`spacer2`），分别用上了作为 dummy view 的 `UIView`，在 iOS 9 之後可改用新推出的 `UILayoutGuide` 可节省系统资源，如下：
```
let spacer1 = UILayoutGuide()
let spacer2 = UILayoutGuide()
view.addLayoutGuide(spacer1)
view.addLayoutGuide(spacer2)
```
# 纯程式码 UIStackView
由於这里的所有间距都相同，故我们可以改用更高层次的 `UIStackView` 来重写排版程式码，设定为 `equalSpacing` 模式，如下：
```
let subview = UIStackView()
subview.axis = .horizontal
subview.alignment = .center
subview.distribution = .equalSpacing
subview.addArrangedSubview(arrangedSubview1)
subview.addArrangedSubview(arrangedSubview2)
subview.addArrangedSubview(arrangedSubview3)
```
若得支援 iOS 9 以前的版本，又想用 StackView 的排版语言，可以使用这个专案：[OAStackView](
https://github.com/oarrabi/OAStackView)
理解这系列三篇文章之後，就差不多掌握了 iOS UIView 的排版概要，剩下都可以透过经验积累而掌握得更熟悉。最後以一张图作结，来总览各种排版方式的适用范围：
https://cdn-images-1.medium.com/max/800/1*yk8FlP_V89wZ-hrJCBxCgw.png
--
我最近写了一个叫作「工作咖啡馆」的 iOS App
https://goo.gl/iBWJSs
我朋友拖拖拉拉也生出了 Android 版叫作「CaffeeTrip」
https://goo.gl/HnUQWQ
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 219.84.242.209
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/MacDev/M.1494085274.A.639.html
※ 编辑: denkeni (219.84.242.209), 05/07/2017 01:19:38
1F：推 jeff12280: 推 05/08 10:43
2F：推 Polestar: 推 05/08 14:10
※ 编辑: denkeni (219.85.164.188), 05/14/2017 14:19:07