iOS 開發實踐之 Auto Layout

歡迎你們來咱們的交流社區，一塊兒來交流學習，我會按期分享一些我在項目中遇到問題的解決辦法和一些iOS實用的技巧，現階段主要是整理出一些基礎的知識記錄下來。加微信邀請你加入 15388944845

本文是博主 iOS 開發實踐系列中的一篇，主要講述 iOS 中 Auto Layout（自動佈局）在實際項目中的使用。

Auto Layout 在 2012 年的 iOS 6 中發佈，距今已經 2 年多了，若是從 2011 年在 Mac OS X 上發佈的 Auto Layout 開始算起，已經超過 3 年了。若是你的簡歷上寫着 2 年以上工做經驗，而居然不會使用 Auto Layout，真有點難以想象。

本文將會經過若干個 Demo 進行講解，經過實踐來理解 Auto Layout 究竟是什麼，該如何使用（包括在 Xib 中使用以及手動編碼）。

Auto Layout 是什麼?

個人理解：Auto Layout 是一種基於約束的佈局系統，它能夠根據你在元素（對象）上設置的約束自動調整元素（對象）的位置和大小。

官方的說明：

Auto Layout 是一個系統，可讓你經過建立元素之間關係的數學描述來佈局應用程序的用戶界面。——《Auto Layout Guide》

Auto Layout 是一種基於約束的，描述性的佈局系統。——《Taking Control of Auto Layout in Xcode 5 - WWDC 2013》

這裏有幾個關鍵字：

• 元素

• 關係

• 約束

• 描述

元素（Element）

低頭看看你電腦的鍵盤，你能夠把每個按鍵當作一個元素；對於 iOS 系統來講，你能夠把桌面上每個應用圖標當作一個元素；對於某一款 iOS 應用來講，你能夠把視圖中的每個子視圖當作一個元素。

事實上，你也能夠把整個鍵盤、桌面或者視圖當作一個元素。

關係（Relation）

元素之間能夠有關係。例如在鍵盤上Q 鍵和W 鍵之間有關係。是什麼關係呢？有不少，例如Q鍵在W 鍵的左邊，W鍵在 Q 鍵的右邊，Q鍵和W鍵之間相距 0.5 釐米等等。

不理解？試着把鍵盤想象成View，把按鍵想象成 Button，再思考一遍。

約束（Constraint）

元素之間關係的限制。約束是 Auto Layout 系統中最重要的概念。咱們上面提到的 左邊、右邊 以及 相距 0.5 釐米 等這些都是約束，它們限制了元素之間的關係。

描述（Description）

定義約束來限制元素之間的關係。描述定義了元素之間的關係及約束。

繼續用鍵盤舉例，**Q 鍵的長寬均爲 1 釐米，左邊距離鍵盤的左邊緣 10 釐米，上邊距離鍵盤的頂部 5 釐米。**這句話就能夠定位 Q 鍵在鍵盤中的位置，很輕鬆就能夠計算出 Q 鍵的 frame 爲 {{10.0, 5.0}, {1.0, 1.0}}。

如今 Q 鍵的座標已經肯定，那麼 W 鍵的座標能夠這樣描述：**頂部和 Q 鍵對齊，大小和 Q 鍵相等，位於 Q 鍵右側 0.5 釐米處。**仔細想一想，這句話中包含了元素間的關係，關係間的約束，能夠直接計算出 W 鍵的 frame。

忘掉傳統的 Springs & Struts 佈局方式

事實上若是你用傳統的設置 frame 的佈局方式的思惟來理解上面的 Q 鍵和 W 鍵的佈局也說的通。

由於在 Auto Layout 中，當你描述完以後， Auto Layout 會自動幫你計算出 frame。換句話說，你的描述告訴了 Auto Layout 如何幫你計算出 frame。因此，你也能夠理解爲你間接的設置了 frame。爲何要這麼作呢？爲何不直接設置 frame？這是由於使用 Auto Layout 有不少好處：

• 多數狀況下旋轉屏幕不用再作額外的處理

• 更容易適配不一樣尺寸的屏幕

• 上手後佈局很是簡單容易，佈局邏輯更清晰

Auto Layout 和傳統佈局很大的不一樣之處在於它是一種相對的佈局方式。怎麼理解這句話？上面提到

W 鍵位於 Q 鍵右側 0.5 釐米處。

傳統的佈局沒法直接表示，你必須把這種佈局手動轉換爲傳統佈局代碼。例如上面的 Q 鍵和 W 鍵的傳統佈局代碼看起來多是這樣：

q.frame = CGRectMake(CGRectGetMinX(keyBoard.frame) + 10.f, CGRectGetMinY(keyBoard.frame) + 5.f, 1.f, 1.f);
w.frame = CGRectMake(CGRectGetMaxX(q.frame) + 0.5f, CGRectGetMinY(q.frame), CGRectGetWidth(q.frame), CGRectGetHeight(q.frame));
複製代碼

使用 Auto Layout 的佈局代碼看起來像這樣：

// 僞代碼
q.width = 1.f;
q.height = 1.f;
q.left = keyboard.left + 10.f;
q.top = keyboard.top + 5.f;

w.top = q.top;
w.width = q.width;
w.height = q.height;
w.left = q.right + .5f;
複製代碼

Auto Layout 不只能輕鬆表示這種佈局，並且相對於傳統的佈局更清晰簡潔易懂，還免費附贈不少優勢，有什麼理由不使用 Auto Layout 呢？

實踐中我發現對於不少新手來講，Auto Layout 這種佈局方式比較容易理解接受，相反不少對傳統佈局很熟練的人卻不太容易理解，老是用傳統佈局的思惟來思考，因此若是可能的話，我建議你暫時忘掉傳統的佈局方式