一,、關(guān)于自動布局（Autolayout）

在Xcode中,，自動布局看似是一個很復(fù)雜的系統(tǒng)，在真正使用它之前,，我也是這么認(rèn)為的,，不過事實(shí)并非如此。

我們知道,，一款iOS應(yīng)用,，其主要UI組件是由一個個相對獨(dú)立的可視單元構(gòu)成，這些可視單元有的主要負(fù)責(zé)向用戶輸出有用的信息,，有些則負(fù)責(zé)信息的輸入（交互）,，交互的過程中往往還伴隨有動畫的效果，已達(dá)到整個信息傳遞的連貫性以及用戶體驗(yàn)的細(xì)膩感,?？梢晢卧趯?shí)際開發(fā)中主要是view,、button等,，那么這些可視單元的關(guān)系由兩個基本的關(guān)系構(gòu)成：兄弟關(guān)系和父子關(guān)系，整個視圖單元就是一個樹形結(jié)構(gòu)：

對于任何一個UI組件,，確定了它的（相對于父view）位置、大小也就確定了它在整個UI視圖中的展示效果,。

Autolayout（以及iOS8中新增的sizeclass）是為了解決這些UI可視單元或者元素是怎樣布局,、排列的問題。在過去只有iPhone4的時候,，我們可以在代碼里將沒一個可視單元的位置寫死,，這樣是沒問題的，但隨著iPhone5,、6的發(fā)布,，屏幕尺寸有了越來越多中可能，未來不排除更多尺寸的iPhone發(fā)布出來,，這就要求我們的APP的UI元素具有在屏幕尺寸不同的設(shè)備上具有一定動態(tài)的可調(diào)性,，已實(shí)現(xiàn)較好的UI展示效果。從目前蘋果提供的技術(shù)來看，有下,、中,、上三種實(shí)現(xiàn)方法：

下策是，代碼中判斷當(dāng)前設(shè)備的尺寸,，對UI元素進(jìn)行手工的調(diào)整,，其缺點(diǎn)是顯而易見的：代碼復(fù)雜、容易出錯,、且維護(hù)難度大,、靈活性極差；

中策是,，通過設(shè)置可視單元（UIView UIButton...）的autoresizing屬性,，預(yù)設(shè)當(dāng)該view所在的環(huán)境（父view）發(fā)生變化時它的尺寸和位置應(yīng)該如何調(diào)整，該方法可以在Xcode的interface builder中（storyboard 或者 xib）設(shè)置完成,，但其只能針對父子關(guān)系進(jìn)行有限的調(diào)整,，比如左邊距是否固定，尺寸是否可變等,，而對于兄弟關(guān)系的調(diào)整則無法實(shí)現(xiàn),，對于UI比較固定的APP這種調(diào)節(jié)方式也算基本滿足需求；

上策就是結(jié)合使用autolayout和sizeclass對UI可視單元的父子關(guān)系,、兄弟關(guān)系進(jìn)行全方位的調(diào)整,，而且調(diào)節(jié)精度更高：不僅能確定一個view的位置尺寸的變化依據(jù)是什么，還能對這些依據(jù)加以不同的優(yōu)先級,，先滿足什么條件,，再滿足什么條件，對于重要的位置尺寸可以優(yōu)先保證,，這樣整個APP就具有極強(qiáng)的動態(tài)可調(diào)性,，滿足不同設(shè)備、不同應(yīng)用場景下的需求,。

在目前蘋果手機(jī)蘋果尺寸多達(dá)四種的情況下,，顯然新的APP必須要采用上策來解決視圖組件的布局問題。

Autolayout的作用非常明確：幫我們確定在不同設(shè)備,、不同（父view）環(huán)境下,，同一個可視單元所應(yīng)具有合適的位置和尺寸，因此,，當(dāng)一個UIView上所施加的約束能夠唯一確定它的frame（x, y, width, height）的時候我們的自動布局的使用才是正確的,。而新手通常犯的兩類錯誤就是約束不足（約束太少）和約束沖突兩種（約束太多）。如果你給出的約束只能夠確定這個view的大小,，或者位置或者位置中的某一個項(xiàng)（比如x）的時候,，就會出現(xiàn)約束不足的情況，在xib或者storyboard中，會以黃色的警告出現(xiàn)在左側(cè)提示框內(nèi),；如果你給出的約束推導(dǎo)出了兩個甚至多個互相矛盾的位置尺寸結(jié)果的時候,，就產(chǎn)生了布局錯誤，在編譯的時候直接就build不過,。

二,、關(guān)于iOS8新增的sizeclass屬性

在iOS8中，新增了Size Classes特性,，它是對當(dāng)前所有iOS設(shè)備尺寸的一個抽象,，也是該抽象了，想想現(xiàn)在多少種iOS尺寸的設(shè)備吧：iPhone4-5-6-6plus,、iPad,、iPad mini、iWatch,，如何還是按照以前那針對種特定設(shè)備來編寫不同的布局的話,，一定是很糟糕的一件事情。

現(xiàn)在有了sizeclass,，事情就好辦多了：你不是設(shè)備多嗎,，那我們就只把屏幕的寬和高分別分成三種情況：（Compact, Regular, Any），也即緊湊,、正常和任意,。這樣寬和高三三一整合，一共9中情況,。如下圖所示,，針對每一種情況，如果需要的話,，我們可以單獨(dú)在storyboard或xib中設(shè)置UIView的自動布局約束,，甚至某一個button是否顯示都是能輕松實(shí)現(xiàn)。

關(guān)于size class的詳細(xì)解析,，參考蘋果文檔和wwdc2014視:點(diǎn)擊打開鏈接 (What's New in Interface Builder),。

三、storyboard中autolayout和size class的無敵配合

對Xcode的interface builder比較熟悉的童鞋應(yīng)該對UIButton的超強(qiáng)定制性映像深刻：通過選擇button的不同狀態(tài)（normal,、height,、disabled...）,，我們可以單獨(dú)設(shè)置每一種狀態(tài),，button的background image、image,、text color等屬性,，見下圖：

和設(shè)置UIButton的不同狀態(tài)的不同屬性類似，我們首先選擇一種size class,，然后針對該種size class進(jìn)行自動布局,。下面我們以一個簡單的布局場景為例進(jìn)行說明：

假設(shè)，我們想實(shí)現(xiàn)下面這個效果：橫屏和豎屏頭像和label都能正常的現(xiàn)實(shí),，且在“比較恰當(dāng)”的位置：顯然橫屏的時候,，高度處于壓縮的狀態(tài)，（height: compact）,，我們需要先對正常的布局之外,，還要添加一種（wAny, hCompact）size class的布局：

首先，我們對默認(rèn)的sizeclass進(jìn)行布局,，確定頭像和label的位置和尺寸：

設(shè)置完（wAny hAny）之后,，點(diǎn)擊wAny hAny文字（上圖底部），選擇（wAny hCompact）：注意點(diǎn)擊后彈出一個九宮格浮框,，拖動鼠標(biāo)即可選擇響應(yīng)的size class,，注意在右下角（紅色方框表示），還可以選擇是否install,，如果取消勾選,，則這個頭像在當(dāng)前size class下就不會被加載（自然也就不顯示出來）。

在新的size class下我們開始添加新的布局,，注意,，這里并沒有覆蓋上一種size class我們定義好了得布局，知識針對當(dāng)前的size class添加新的,、獨(dú)立的布局信息,，狡兔三窟，Xcode6這下子一口氣給了我們九個窟窿,，爽,！

布局完畢，運(yùn)行起來,，即可達(dá)到我們想要的效果,！

Awesome, isn't it ?