这是「纯程式码 Auto Layout 与概要教学」系列第二篇。总共会有三篇： * 从 setFrame 到 Auto Layout constraint * Visual Format Language (VFL) * 何时需要 UIStackView？ 本系列文范例，都整理成 Swift Playground 在这专案里 https://github.com/denkeni/Auto-Layout-Programmatically （由於批踢踢不方便贴程式码，会精简摘录 含完整程式码与後续文章更新，请到网页版 https://goo.gl/AWOCI2 ） # 前言 纯程式码建立 Auto Layout constraint 在 iOS 6 刚推出时只有两种方式 其一是前篇文所述的线性关系 其二即是 Visual Format Language (VFL) 到 iOS 9 之後才有第三种方式 NSLayoutAnchor 然而苹果推出 Auto Layout 至今 几乎所有官方文件都推广透过 Interface Builder 来设定 constraint 这使得长期以来官方文件仅短短一页的 VFL 成为被束之高阁的瑰宝 # Visual Format Language (VFL) VFL 可读性不错，尤其在相当复杂程度的排版更是如此， 因为 VFL 的根本基础，就只有一段即见即所得的字串： ``` NSLayoutConstraint.constraints(withVisualFormat: VFLString, options: NSLayoutFormatOptions, metrics: [String : Any], views: [String : Any]) ``` 直接用实例来解释这个 API 我们改用 Auto Layout VFL 重做前篇例子 subviewB 的排版方式 分别设定 top, bottom, left, right 如下： https://cdn-images-1.medium.com/max/800/1*PZarxIPo6anPxjm8VysOhw.png ```精简版 VisualFormat: "V:|-(150)-[subviewB]-(150)-|" // V: Vertical VisualFormat: "H:|-(100)-[subviewB]-(100)-|" // H: Horizontal ``` 首先可以发现，VFL 其实就是自动帮我们生成多个 constraints 所以改用 += 来加入 constraints array 以中括号描述 view 以小括号描述数值 座标轴同样是由上往下（V）、由左向右（H）的方向描述 直线 `|` 表示为 superview `V:|-(150)-[subviewB] `表示为 subviewB 与其 superview 的 top 相距 150pt `V:[subviewB]-(150)-|` 表示为 subviewB 与其 superview 的 bottom 相距 150pt 两者合并起来就是相当直观的 `V:|-(150)-[subviewB]-(150)-|` 多数人不使用 options 而采用预设的空值 [] metrics 是用来描述 VFL 字串中「数值常数」的对应字典 views 则是用来描述 VFL 字串中「view 变数」的对应字典 故前例也可以修改成这样： ```精简版 let metrics = ["v": 150, "h": 100] VisualFormat: "V:|-(v)-[subview]-(v)-|" VisualFormat: "H:|-(h)-[subview]-(h)-|" ``` 由此也会发现 只用 VFL 无法描述前篇例子 subviewA, subviewC 的排版方式 因为 VFL 无法描述 centerX, centerY 因此，在许多情况下 VFL 还是得合并使用 constraint 来正确描述 subview 我们改用 Auto Layout VFL + NSLayoutAnchor 重做前篇例子 subviewA, subviewC 的排版方式 分别设定 centerX, centerY 和 width, height 如下： ```精简版 subviewA.centerXAnchor.constraint(equalTo: view.centerXAnchor) subviewA.centerYAnchor.constraint(equalTo: view.centerYAnchor) VisualFormat: "H:[subviewA(200)]" // width VisualFormat: "V:[subviewA(100)]" // height ``` 基於 VFL，也可以很容易地描述较为复杂的排版了： https://cdn-images-1.medium.com/max/800/1*_7pEUtg78EELsPmSXpL2UQ.png ```精简版 let metrics = ["p": 15] // padding VisualFormat: "H:|-(p)-[subview1(100)]-(10)-[subview2(120)]-(10)-[subview3]-(p)-|" "V:|-(p)-[subview1]-(p)-|" "V:|-(p)-[subview2]-(p)-|" "V:|-(p)-[subview3]-(p)-|" ``` 当然，在描述更为复杂的二维排版时 由於一段 VFL 只能描述一维排版关系 经常需要组合多段 VFL 才能完整而正确地描述排版 # 番外篇：NSLayoutFormatOptions 这个选项可在描述 X 方向 VFL 时，提供 Y 方向排版的准则 反之亦然。 以下述为例： https://cdn-images-1.medium.com/max/800/1*pyc3FixPF8775DPTkQTnVQ.png ```精简版 VisualFormat: "H:|-(15)-[subview1(100)]-(10)-[subview2(120)]-(10)-[subview3]-(15)-|", options: .alignAllTop, metrics: nil, views: viewsDict) VisualFormat: "V:[subview1(300)]" VisualFormat: "V:[subview2(200)]" VisualFormat: "V:[subview3(150)]" ``` # VFL Coding Style 以下是我自己偏好的 VFL Coding Style 原则，并藉此解释 VFL 的相容语法： * view 间距常数值加上括号 * view 间距常数值为等式时，不加上 `==` ex. `[view1]-(15)-[view2]` 而非 `[view1]-15-[view2]` 或 `[view1]-(==15)-[view2]` 这也是考量了使用不等式时，必须加上括号才能运作 ex. `[view1]-(>=15)-[view2]` * view 间距常数值为 0 时，依然要标示出来 ex. `[view1]-(0)-[view2]` 而非 `[view1][view2]` ex. `|-(0)-[view]-(0)-|` 而非 `|[view]|` * 不使用预设的间距 ex. `[view1]-(8)-[view2]` 而非 `[view1]-[view2]`（两者效果相同） P.S. 有一专案 [Swiftstraints](https://github.com/Skyvive/Swiftstraints) 将 VFL 精简成仅需一段字串，字串内可直接取用变数， 便可省略了 metrics 与 views 参数。 -- 我最近写了一个叫作「工作咖啡馆」的 iOS App https://goo.gl/iBWJSs 我朋友拖拖拉拉也生出了 Android 版叫作「CaffeeTrip」 https://goo.gl/HnUQWQ --

※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 219.85.169.16 ※ 文章网址: https://webptt.com/cn.aspx?n=bbs/MacDev/M.1491279670.A.17A.html