前言
這幾年來工作上寫 iOS app，都是用純程式碼與原生的 Auto Layout。一路上發現網路上純程式碼的寫法教學還是不多，Visual Format Language 更是少，於是將這幾年碰壁學出來的心得，以我理解的方式，整理成這份概要教學。有所疏漏誤解，還請先進不吝指教改正。
預計會有三篇：
- 從 setFrame 到 Auto Layout constraint
- Visual Format Language (VFL)
- 何時需要 UIStackView？
本系列文範例，都整理成 Swift Playground 在這專案裡。
從 setFrame 到 Auto Layout constraint
要排版出一個長方形的 UIView，最早的方式是設定 frame：
subview.frame = CGRect(x: 100, y: 50, width: 200, height: 100)前兩個 (x, y) 設定長方形左上角的原點，後兩個 (width, height) 設定長方形的寬與長，這樣就能唯一決定長方形的樣子。
一般來說是在繼承layoutSubviews()中描述這些 subviews 的關係，畫面有變化時（譬如旋轉）就能即時更新。
然而這樣的方式，在排版更多 subview 時，就很容易需要相當多的算術。
適度配合 autoresizingMask 能緩解這問題，但在不同 subview 排版互相依賴時，依然無法很好地解決（這裡不討論 autoresizingMask，因為後面的 Auto Layout 就能取代）
iOS 6 之後提供另一套更高層次的機制：Auto Layout，它的根本基礎就只有一個 constraint API：
NSLayoutConstraint(item: y, attribute: y.attribute, relatedBy: =, toItem: x, attribute: x.attribute, multiplier: m, constant: c只用這個 API 就足以完整描述一個 UIView 的樣子。這個 API 是在描述一個線性等式關係：y = m x + c
相較於 setFrame 只有 x, y, width, height 四種描述屬性，Auto Layout 提供了更多的描述屬性(NSLayoutAttribute)：
而描述這些變數之間的關係，是用線性關係 y = m x + c (m: multiplier, c: constant)（甚至可以用不等式 >=, <= 這裡不討論，因為後面的 VFL 更有機會用到）
直接用實例來解釋這個 API，我們改用 Auto Layout constraint 重做前述例子。假設上層 view 是長這樣：
let view = UIView(frame: CGRect(x: 0, y: 0, width: 400, height: 400))可以發現前述長方形其實是在置中位置，只需分別設定 centerX, centerY 和 width, height 如下：
由此可以發想，必有其他的描述方式，可以達到一樣的排版效果。
只要 x 方向與 y 方向上，各有 2 個有效給定的 Auto Layout Constraint（等式），就可以唯一決定長方形的樣子。
那麼也可以這樣做，分別設定 top, bottom, left, right 如下：
當然這樣旋轉後的樣子，會與前者不同；所以應該根據 subview 的本質，選擇最合理正確的描述方式。
掌握了 Auto Layout constraint 其實就是描述 y = m x + c 的線性關係之後，很快就能明白，不論是用 Storyboard/Interface Builder 或是 NSLayoutAnchor、PureLayout、Masonry… 等等，其實都是奠基於這一個 API 而已。
以 iOS 9 之後支援的 NSLayoutAnchor 為例，重做前述例子：
P.S. 延伸學習支線：從這篇你可以岔出去自學的題材
- Auto Layout constraint 可以設定 priority
- Auto Layout constraint 在 activate 之後，constant 值還可以動態修改！這也是 Auto Layout 架構下做動態效果的基礎
- 排版某些 UIView 時（譬如 UILabel）可以略去指定其寬度，只描述其他 constraint，因為它們有預設實作 intrinsicContentSize
