<div style="font-size:50%"> 深入淺出 `Auto Layout` 原理篇 Ep.1 ===  </div> --- <p style="text-align:right"> Jerry </p> ---- ## I'm Jerry Lin #### iOS CAMP [GitHub](https://github.com/aa08666) [Medium](https://medium.com/@kc50047) --- ## Why Auto Layout? ---- ### 有一天 iOS 平台上出現了不同尺寸的移動設備 ----  ---- ### 使得原有的 `frame` 佈局方式無法很好地適應不同尺寸的螢幕 ---- ### 而為了解決這個問題： ## Auto Layout 就誕生了。 ---- ## 什麼是 `frame` ----  ---- `frame` 表示與父視圖之間的絕對距離 ---- ### 需要特別注意的是 > 這些值的單位是 points (點)，而不是 pixels (像素)。 ---- #### 為什麼要用 points 而非 pixels？ >因為 View 在 Retina 和非 Retina 螢幕上的大小無法保持一致。 > >而 points 會取決於螢幕解析度來決定多少 pixels 顯示一個點。 ---  --- `Auto Layout` 中大部分的約束都是`描述性`的 * 一個 View 的約束是相對於另一個 View 的，比如說相對於父視圖，或者是相對於兩兩 View 之間的。 ----  ---- ### Nearest neighbor  --- ## Cassowary 算法 ---- 一個名叫 Cassowary 的佈局演算法解決了使用者界面的佈局問題，它通過將佈局問題抽象成線性方程式和不等式約束來進行求解。 --- ### ==Autolayout 的原理就是一個線性方程的解析器，該解析器試圖找到一種可滿足其規則的幾何表達式。== ---  --- * Greg J. Badros and Alan Borning, “The Cassowary Linear Arithmetic Constraint Solving Algorithm: Interface and Implementation”, Technical Report UW-CSE-98-06-04, June 1998. * Greg J. Badros, Alan Borning, and Peter J. Stuckey, “The Cassowary Linear Arithmetic Constraint Solving Algorithm,” ACM Transactions on Computer Human Interaction , Vol. 8 No. 4, December 2001, pages 267-306. --- 當方程組的解 | 方程組的解 | 結果 | | -------- | -------- | |無窮多個| 會得到缺乏約束的有歧義的佈局 | | 無解 | 約束有衝突 | | ==唯一解== | 才會得到一個穩定的佈局。 | --- * 因為 Auto Layout 佈局系統在最後仍然需要通過 frame 來進行。 * 不過它相比原有的佈局系統加入了從約束計算 frame 的過程，而在這裡，我們需要了解 Auto Layout 的佈局性能如何。 --- ### 如果今天想讓 app 的 view 保持60 FPS 的刷新頻率的話？ --- ### 每一幀的渲染時間 ### 1s = 1000 ms ### 1000/60 = 16.67 ms --- ### 故我們必須在 16.67 ms 之內完成包括佈局、繪製以及渲染等操作。 ---  ---  ---- ## Q&A --- ## 謝謝大家！ --- ref. * https://lpd-ios.github.io/2017/04/05/FlexBox-Weex/ * https://draveness.me/layout-performance * http://www.informit.com/articles/article.aspx?p=2474236&seqNum=5 * https://juejin.im/post/5a5b8b41f265da3e4c07c0bc --- ###### tags: `iOS重要觀念`