這是轉載 一名網友：繼續前進，的一片文章，寫的不錯，拿來分享。
AutoLayout之可視化佈局
寫過兩篇關於自動佈局的文章《AutoLayout實用技巧》和《AutoLayout之純代碼佈局》。雖然，《AutoLayout實用技巧》主要是針對Storyboard和XIB寫的，但是裏面僅僅只是展示了下操作技巧，也是針對有基礎的人來學的，並未對如何在Storyboard和XIB中使用
AutoLayout 做過介紹。所以，打算再寫篇文章來介紹一下。
基礎知識
1、如何啓用 AutoLayout
如下圖：
2、約束條件介紹
上面這兩張圖主要介紹了Align和Pin下面的約束條件的含義。
實戰演練
下面主要通過具體例子來介紹 AutoLayout 的使用。
例：如圖，給“跟我學AutoLayout”這個按鈕添加約束條件，使其在各種屏幕上面的位置滿足以下要求：1、距離父視圖頂部的距離不變；2、寬高固定不變；3、水平居中。
解析：
其實，並不用做過多的解析，因爲問題本身已經告訴了我們該如何添加約束條件了。這裏主要是想引起大家的注意，在我們自己做項目的時候，並不會像上面這樣告訴你該怎麼設置。當你拿到設計師設計好的 UI 界面時，你首先應該知道每一個控件最終要在什麼地方，哪些條件是固定不變的，哪些是可變的，這對你下一步的使用 AutoLayout 是非常重要的。另外，在使用 AutoLayout 時，一定要先理解我上面介紹的約束條件的含義，很多人知道自己想要什麼樣的佈局，但是總是會忽略一些限定條件，以至於最終效果不盡人意。如何才能避免這樣的問題呢？我給的建議就是，像上面這個問題一樣，分析界面上面的每個控件的具體位置，然後，將其轉化爲每一個約束條件。
最終操作如下所示：
再不厭其煩的解釋一下上面的操作：
- 第一步：選中需要佈局的視圖（此處是
跟我學AutoLayout這個按鈕） - 第二步：選中
Pin這個選項，然後給跟我學AutoLayout這個按鈕添加距離父視圖頂部197 pts的約束條件。然後，勾選width、height這兩個項，並且你可以在後面的方框中看到168 pts和30 pts這兩個值，這樣操作就是限制了按鈕的寬度爲168 pts、高度爲30 pts，並且這兩個值是可以手動修改的。 - 第三步：點擊
Align這個選項，然後，點擊Horizontal Center in Container，此條件就是限制按鈕水平居中。 - 第四步：其實，這個算是一個高端的操作（瞎扯！這麼簡單，算什麼高端）。在大部分人操作的時候，肯定是先將試圖放在相應的位置，然後再添加約束，這樣做是對的。我這個操作，主要是想讓大家認識一下
Resolve Auto Layout Issues這個選項裏面的Update Frames的作用，因爲很多時候，你會一不小心就把某個控件給拖到其他的位置了，此時你可以利用此操作來處理，當然你可以使用command+z來撤銷操作，具體操作視情況而定。在前面三步操作完成的時候，我們可以看到在按鈕的左邊有個橙色的虛線框，他的意思是，在當前的約束條件下，視圖的位置應該在虛線框這裏。此時，我們使用Update Frames這個選項就可以將視圖移到虛線框的位置，並且此時橙色的虛線框消失，以及所有的約束條件都變爲藍色的了，這就說明約束條件添加完成（未完成的話，選中控件，會看到橙色的線）。
還是上面的問題，再介紹另一種操作方法，如下：
對於上面的操作，需要指出的是以下幾點：
Clear Constraints是清除選中控件的所有約束條件，這個很實用，不需要一個個的找了。- 在
Align這個選項裏面也有Update Frames這個選項，讀者可以回頭看看基礎知識裏面的兩張圖，兩張圖裏面都有Update Frames，含義圖上面已經介紹了。此操作是不是更方便，這纔是高端:)。
補充知識1：
其實，Update Frames更多的用處在於根據控件的內容來設置當前控件的尺寸，也許這句話比較難於理解。我舉個簡單的例子，如下所示：
這裏的操作主要是給UILabel添加上邊距、左邊距以及固定寬度的約束條件，顯然，這三個條件是不足以固定住這個UILabel的。此時，我們再使用Update
Frames這個操作，這時 AutoLayout 會自動根據UILabel裏面的內容“我是UILabel”來計算這個UILabel的尺寸，並且根據這個內容尺寸(intrinsicContentSize我的這篇文章《AutoLayout之純代碼佈局》有介紹)來調整UILabel的尺寸。
如果，在上面的操作中，省去第三步限制寬度的操作，直接執行Update Frames操作，你會看到UILabel的尺寸就是裏面文字內容的尺寸。另外，如果你沒有看過我的這篇文章《AutoLayout實用技巧》，你可能對此處的拖拽添加約束條件感到陌生，那麼還是建議你去看看那篇文章，此處不再解釋。
這對我們在動態佈局中是十分重要的信息。大家可以測試一下以下操作：
- 還是上面這個
UILabel，第一種操作是，不限定寬度條件，其他約束同上面的操作。然後，通過代碼給這個UILabel設置內容，內容的要求是至少15五個字，越多越好。然後，運行項目看看。 - 第二種操作是，限定寬度，並且設置
UILabel的numberOfLines屬性爲0，其他約束條件跟前面一樣。再設置內容，運行看看。
通過上面的操作，你會看到，UILabel已經可以根據內容自適應了，不再需要你去根據內容進行計算了。
補充知識2：
Update Frames跟Update
Constraints的區別
如下所示：
一圖勝千言，不用我多說了。
小結
以上就是Storyboard和XIB中的
AutoLayout 簡單使用。文章中的知識算是比較基礎的，但是掌握了的話，一般的佈局都不在話下。更多的操作讀者可以自己去嘗試，只有實際操作，你纔會更好的理解和記憶這些操作，並且能夠快速的實現複雜的佈局。
讀到這裏，如果你對本文所述觀點存在疑問或者質疑，歡迎在下面留言，我會在看到的時候回答你。