[心得] 純程式碼 Auto Layout（三）UIStackView

看板MacDev作者denkeni (Denken)時間8年前 (2017/05/06 23:41)推噓2(2推 0噓 0→)

留言2則, 2人參與討論串1/1

這是「純程式碼 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://www.ptt.cc/bbs/MacDev/M.1494085274.A.639.html ※ 編輯: denkeni (219.84.242.209), 05/07/2017 01:19:38