在學(xué)習(xí)AutoLayout時(shí)看過很多小技巧，但是很少有介紹基礎(chǔ)的教程，最近總結(jié)這類文章，看到一篇國外的文章極佳，特翻譯過來以供參考。
AutoLayout的初級教程翻譯，原文地址：
http://code.tutsplus.com/tutorials/getting-started-with-auto-layout-in-xcode-5--cms-21016
1.什么是Auto Layout
這是在iOS6時(shí)為了減少不同設(shè)備適配工作的一種UI搭建技術(shù)。
2.如何開啟Auto Layout
如圖，在Interface Builder中找到這個(gè)設(shè)置（自從iOS8以后這個(gè)設(shè)置界面又添加了些新功能，但Use Auto Layout依舊存在）。
Auto Layout支持iOS6以上的設(shè)備，當(dāng)然現(xiàn)在是iOS9時(shí)代，已經(jīng)很少有項(xiàng)目會支持iOS6以下的系統(tǒng)了。
讓我們打開項(xiàng)目中的main storyboard，添加一個(gè)text view到View Controller中，如下圖所示。
這里我們不添加任何約束直接運(yùn)行一下，看看效果。如圖所示。
3.添加約束（重點(diǎn)）
以下是幾種可以添加約束的方法。
Control + Drag（也可以是右鍵拖動）
按住Control并拖動要添加約束的View到另一個(gè)View，放開鼠標(biāo)，會出現(xiàn)一個(gè)選項(xiàng)框，具體的選項(xiàng)不盡相同，會根據(jù)你拖動的方向和你想和哪個(gè)view建立約束關(guān)系而改變。
為了說明這個(gè)原理，我們實(shí)際操作一下：
1. 拖動這個(gè)text view到view controller的右側(cè)
2.?Xcode會顯示一個(gè)高亮的預(yù)選中狀態(tài)
3.?松開鼠標(biāo)，出現(xiàn)相關(guān)的約束條件
4.?為了保證view在水平居中，選中Center Horizontally In Container。
Auto Layout Menu自動布局功能按鈕
當(dāng)然，你也可以使用相關(guān)的功能按鍵。他們分別是Align，Pin，resolve Auto Layout issues
Align?約束你的view在它容器的中央位置，或者對準(zhǔn)其他2個(gè)view的邊緣。
Pin?設(shè)置view的寬高，或者和其他view的相對距離。
The?Resolving Auto Layout Issues?添加view自動布局的原則，比如更新約束，或者自動添加相關(guān)約束。
Stack是iOS9才開始使用的，相關(guān)內(nèi)容將在另一篇文章介紹。
Editor 選項(xiàng)
以上提到的每一個(gè)內(nèi)容都可以在Editor選項(xiàng)中找到。
添加約束
當(dāng)我們添加了水平居中的約束后，我們的text view就可以一直水平居中，無視設(shè)備是豎屏還是橫屏狀態(tài)。
你應(yīng)該看到了text view有一條橘黃色的提示線，這是Xcode在提示我們約束并不完整，我們只是讓text view水平居中，但并沒有規(guī)定它在垂直方向的位置，所以系統(tǒng)還不能夠判斷如何擺放text view。
Note：你可以無視這些經(jīng)過并且運(yùn)行程序，但是你不應(yīng)該忽略這些含糊不清的約束，因?yàn)檫@會導(dǎo)致在不同大小的設(shè)備中，view的顯示效果不會按照我們所想的那樣擺放。
用類似我們剛才的操作，選中view，通過Control-Drag的方法鏈接到 view controller的頂部，選擇 Top Space to Top Layout Guide，這個(gè)是設(shè)置view到頂部的垂直距離。
然后，Control-Drag 這個(gè)text view到view controller的左側(cè)，選擇Leading Space to Container（設(shè)定text view到view Controller左側(cè)的距離）。同樣，Control-Drag 這個(gè)view到view controller的底部，選擇Bottom Space to Bottom Layout Guide（設(shè)定text view到view Controller底部的距離）。
這時(shí)，text view的距離提示線應(yīng)該顯示藍(lán)色了，因?yàn)槲覀兊募s束已經(jīng)足夠系統(tǒng)確認(rèn)它的擺放方式了?，F(xiàn)在可以運(yùn)行一下模擬器，看一下展示效果了，別忘了轉(zhuǎn)換屏幕方向，看看它在不同狀態(tài)下是否按照我們想要的方式展示了。
Note：我們不必特意的設(shè)定水平距離的約束，因?yàn)槲覀冊O(shè)定了text view在水平居中，系統(tǒng)會自動的算好它出現(xiàn)的位置，這點(diǎn)十分方便。同樣，我們也可以設(shè)定垂直居中，這里就不再一一贅述。
這個(gè)例子已經(jīng)展示了如何在parent view中設(shè)置view的約束?，F(xiàn)在我們看一下如何對兩個(gè)同級的view進(jìn)行約束。
刪除這個(gè)text view，可以看到我們添加的約束也一起被刪掉了。我們添加一個(gè)text field, 一個(gè) slider, 和一個(gè)segmented，如下圖所示。
在不添加約束的前提下，運(yùn)行一下，調(diào)整一下屏幕，我們可以看到下面的效果。
展現(xiàn)一下我們的想象力，我們其實(shí)應(yīng)該讓它們橫向延展。也就是如下的效果。
選中text field，單擊Pin，在section-Spacing to nearest neighbor?中，點(diǎn)擊top、right、left周圍的紅線（固定和周圍view的距離）。然后點(diǎn)擊底部“Add 3 Constraints”的按鈕，添加這幾個(gè)約束。其中：
top的值是text field距離屏幕頂部的距離
left的值是text field距離屏幕左側(cè)的距離
right的值是text field距離屏幕右側(cè)的距離
如下圖。
選中slider，重復(fù)上面的操作，其中：
top的值是slider和text field的上下間距
left的值是slider距離屏幕左側(cè)的距離
right的值是slider和segmented的間距
單擊segmented control,重復(fù)以上的操作，但這次只選中top，right的紅線，同時(shí)選中“Width”：
top的值是segmented control和text field的上下間距
right的值是segmented control距離屏幕左側(cè)的距離
選中Width是為了固定segmented control的寬度，因?yàn)槲覀儾幌雜egmented control跟著屏幕size的不同而變化。
如下圖所示：
4. 修復(fù) Auto Layout 的Issues
當(dāng)我們的約束出現(xiàn)警告或者錯誤時(shí)，Xcode會在界面上給出相應(yīng)的提示，我們點(diǎn)擊這些提示，可以看到詳細(xì)信息。
你可以通過Resolve Auto Layout Issues按鈕添加自己遺忘的約束，或者自動重設(shè)約束，或者清空約束。這些功能可以省下大量的時(shí)間，但是效果可能并不是我們想要的。解決這類問題需要經(jīng)驗(yàn)的積累，這里只是初步教程，不做過多的贅述。
Misplaced View
如果你添加了約束，而且你還改變了它的大小或者位置，系統(tǒng)會給你一個(gè)黃色的警告線。如果你在不修改的前提下編譯運(yùn)行app，你將會看到Auto Layout 系統(tǒng)會忽略你在后面對view的更改（很好理解，系統(tǒng)會以約束條件為標(biāo)準(zhǔn)處理界面）。我們稱這種情況為Misplaced View
為了修復(fù)這個(gè)問題，你可以刪掉原來的約束條件，重設(shè)新的約束，或者讓Xcode為你自動修復(fù)這個(gè)問題。系統(tǒng)給了我們兩個(gè)自動修復(fù)的選擇。
? 你可以移動修改view的位置和大小，適應(yīng)原來的約束，然后通過選擇Resolve Auto Layout Issues > Update Frames來通知系統(tǒng)我們不更改約束的前提下修改了控件。
? Issues > Update Constraints from Xcode's?Editor menu.或者我們可以自動讓系統(tǒng)更改約束，去適應(yīng)我們現(xiàn)在button的位置和大小。這時(shí)我們可以選擇Resolve Auto Layout Issues > Update Constraints。
（完）
