[心得] 純程式碼 Auto Layout(三)UIStackView

作者: denkeni (Denken)   2017-05-06 23:41:08
這是「純程式碼 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
作者: jeff12280 (猜不透平常心)   2017-05-08 10:43:00
作者: Polestar (極)   2017-05-08 14:10:00

Links booklink

Contact Us: admin [ a t ] ucptt.com