# 簡介
曾經 iPhone 和 iPad 的屏幕的邏輯分辨率只有唯一的一個大小，所以在 iOS 上開發應用是非常幸福的，我們不需要面對大量的屏幕尺寸和分辨率，但是隨著 iPhone5，6，6 plus，iPad Pro 的出現，以及 iOS 上提供的分屏多任務的支持，應對不同分辨率的布局在現在 iOS 開發中已經變的非常重要，在 iOS 上常用的布局方式有下面幾種：
- 代碼布局，在 `- layoutSubview` 的時候調整每個元素的位置、大小實現 UI 的布局
- `UIViewAutoresizing` 通過設置一系列的開關決定每個 view 在父 view 發生變化時如何處理，這種方式一般會和代碼布局的方式相配和完成比較復雜的 UI 布局
- Autolayout，也是今天的主角，通過設置元素之間的關系來決定每個 view 的位置
# 布局解決的是什么問題
Autolayout 要解決的問題是布局的問題，也就是 UI 上面每個元素的位置問題，在使用代碼布局的時代我們在 `- viewDidLoad` 方法中設置每個元素的初始位置，在 `- layoutSubviews` 方法中，解決父 view 發生變化時界面上各個元素應該如何再次布局的問題，同時方便我們會配合 `UIViewAutoresizing` 的開關來簡化部分代碼。
布局，要解決的問題就是 UI 上每個元素應該如何放置，他們的大小，以及絕對的位置在哪里，并且在 UI 發生變化，屏幕發生變化時，應如何應對。不論是通過代碼布局，還是通過 Autolayout 布局，我們要做的都是告訴系統，每個元素在哪里，以及元素的寬和高。
Autolayout 和代碼布局的區別是，Autolayout 通過告訴布局引擎每個元素之間的相對位置（也就是元素之間的關系）讓布局引擎推斷出每個元素的絕對位置和元素大小并告訴系統如何顯示，代碼布局則是每次直接告訴系統每個元素的絕對位置和大小。
# Autolayout 基礎
## Interface Builder 上的 Autolayout 工具介紹
下面介紹下在 Xcode 的 Interface Builder 中怎么做一些基本的布局操作
上面截圖是 Interface Builder 界面右下角的四個按鈕，從左到右分別是：
- Stack：把 View 放到 Stack View 中（Stack View 是 iOS 9 中提供的新東西，這里暫時先不講）
- Align：設置 View 和 View 之間如何對齊（左對齊，右對齊）
- Pin：設置固定 View 的位置
- Resolve Auto Layout Issues：解決 Autolayout 中布局出現的問題
接著我們分別看看 Align，Pin，Resolve Auto Layout Issues 三個按鈕分別有些什么功能吧
Pin Menu 主要是提供功能讓我們去決定每個 View 和其他 View 之間的關系，上下左右之間的絕對距離，寬度和高度
Align Menu 提供了讓我們決定兩個 View 之間是如何對齊的
這里要注意的是 Baseline 是文字排版用的，在文字排版時使用 Baseline 對齊，可以讓文字看上去是寫在一行上，具體點這里->[Baseline 是什么][1]<-
Pin 和 Align 可以針對單個 View 也可以針對多個 View，如果選中了多個 View 并設置距離左邊是4時，那么所選中的所有 View 到左邊的距離都是4，并且在 Add Counstraint 按鈕上會顯示總共添加了多少個約束。
Resolve Auto Layout Issues 提供了在約束和 Interface Builder 中所顯示的 View 布局不一致時的一些解決工具
Resolve 工具中，實際上并不實用，畢竟 Interface Builder 也只是 Apple 給的一個界面布局工具，他并不能得到我們到底在想什么，所以想要布局完全按照我們想得方式來工作，建議使用手工添加布局，添加完成后使用 Update Frames 功能，查看我們的布局是否和我們想要的一致。
接下來我們來說說 Xcode 界面右邊的 Size Inspector 的功能
在選中一個 View 后，可以看到下面的界面：
在選中具體的一個 `NSLayoutConstraint` 對象（也就是上下文一直說的約束）后，可以看到下面的界面：
在 Interface Builder 中出現黃色的警告，表示約束和 View 設計上的位置大小不一致，可以通過檢查相關布局來發現是否添加的約束有問題，也可以直接使用 Resolve Auto Layout Issues 菜單中的 Update Frames 選項來調整 View 的大小，觀察是否和期待一致。
在 Interface Builder 中出現紅色警告的時候，表示存在約束沖突，或是缺少了約束，這兩個問題的真實原因是因為我們提供的約束，無法讓 Interface Builder 根據整個 View Controller 中的所有約束計算得到有問題的 View 的具體位置和大小，這個時候要檢查有問題的 View 或者約束，看是否無法決定 View 的位置或是大小。
對于類似 `UILabel`，`UIImageView` 等有內容的 View 可以通過設置 Hugging 和 Compression 約束的優先級來解決某一個方向上如果父 View 不足的情況下，哪些 View 會被壓縮或是不被壓縮的問題。例如下圖的 QQ 聊天界面，聊天內容在很長的時候壓縮了聊天內容的預覽，讓未讀消息數量能夠完整的顯示。
## 下一步做什么
有了上面的內容，大家基本可以很愉快的在 Interface Builder 上和 Autolayout 玩耍了。
最后注意：Autolayout **沒有魔法**，只是幫我們從另一個角度（View 之間的關系）來確定所有 View 的位置，以及適應父 View 的變化，我們要做的是教會 Interface Builder 如何確定每個 View 的絕對位置，Autolayout 有它方便的地方，自然也有不足之處，解決一個問題并不能只過分依賴于某一項特定的技術，而是需要根據實際情況來選擇自己用什么。
[1]:https://en.wikipedia.org/wiki/Baseline_(typography)
