曆史車輪滾滾向前，将autolayout配合sizeclass做布局的(de)方式推上(shàng)了(le／liǎo)主流，雖然有點晚，但最終還是(shì)進行了(le／liǎo)一次完整的(de)實踐，特此記錄一下：
因爲(wéi / wèi)網上(shàng)已經有很多博客介紹了(le／liǎo)autolayout配合sizeclass布局的(de)原理，所以(yǐ)我着重記錄一下自己實踐的(de)過程：（可能會有錯誤，大(dà)家多多指正）
先來(lái)看看最終效果：
[img]http://img.blog.csdn.net/20150107092133734?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
iPhone豎屏
[img]http://img.blog.csdn.net/20150107092407906?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
iPhone橫屏
[img]http://img.blog.csdn.net/20150107092603335?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
iPad豎屏
[img]http://img.blog.csdn.net/20150107092637687?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
iPad橫屏
首先我們對最終效果進行分析，得出(chū)如下結論：
1.該布局适應設備包括iPhone和(hé / huò)iPad。
2.iPhone橫屏，iPad橫屏和(hé / huò)豎屏的(de)布局是(shì)一緻的(de)（方式1），iPhone豎屏的(de)布局是(shì)單獨的(de)（方式2）。
3.方式1和(hé / huò)方式2邊距都是(shì)一緻的(de)（8px）；紅色方塊和(hé / huò)黃色方塊并排，紅色方塊寬高固定（100px）；黃色方塊高度固定（100px），寬度自适應屏幕；綠色方塊和(hé / huò)藍色方塊高度固定（160px）。
4.方式1紅色、黃色、綠色和(hé / huò)藍色方塊的(de)間距均爲(wéi / wèi)4px；綠色方塊和(hé / huò)藍色方塊并排，寬度相等且自适應屏幕。
5.方式2紅色方塊和(hé / huò)黃色方塊的(de)間距爲(wéi / wèi)0px，其他(tā)各方塊的(de)間距均爲(wéi / wèi)4px；藍色方塊在(zài)綠色方塊下方，寬度自适應屏幕。
分析完畢，我們開始一步步實現這(zhè)些效果：
第一步：創建一個(gè)single view application項目，注意Devices選項選擇Universal。
第二步：打開Main.stroyboard，創建相應的(de)View并調整它們的(de)位置如下圖（調整的(de)辦法用過storyboard的(de)人(rén)應該都知道(dào)）：
[img]http://img.blog.csdn.net/20150107104057329?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
注：紅框中的(de)部分是(shì)iOS8中新增的(de)sizeclass特性。點擊該區域會彈出(chū)如下的(de)界面：
[img]http://img.blog.csdn.net/20150107105145884?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

中間的(de)九宮格控制了(le／liǎo)布局适應哪些設備的(de)橫屏和(hé / huò)豎屏。具體原理參考這(zhè)個(gè)博客：http://blog.csdn.net/lihuiqwertyuiop/article/details/39271887（ps：我就(jiù)是(shì)看這(zhè)個(gè)看明白原理的(de)，所以(yǐ)我自己就(jiù)不(bù)廢話了(le／liǎo)）。
在(zài)之(zhī)前的(de)分析中我們得到(dào)了(le／liǎo)iPhone橫屏、iPhone豎屏、iPad橫屏和(hé / huò)iPad豎屏下布局的(de)幾個(gè)共性。對于(yú)這(zhè)些共性的(de)東西，我們在(zài)wAny hAny這(zhè)種模式下編輯，因爲(wéi / wèi)wAny hAny模式下的(de)布局對所有設備在(zài)橫屏和(hé / huò)豎屏的(de)情況下都有效。
首先設置紅色方塊的(de)屬性，如下圖：
[img]http://img.blog.csdn.net/20150107163546718?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
寬度和(hé / huò)高度約束爲(wéi / wèi)100px，居上(shàng)0px，居左-8px（截圖和(hé / huò)文字不(bù)一樣是(shì)因爲(wéi / wèi)博主傻逼了(le／liǎo)，忘了(le／liǎo)改……因爲(wéi / wèi)默認對齊邊界是(shì)-16px，所以(yǐ)如果需要(yào / yāo)邊距爲(wéi / wèi)8px則輸入-8px即可，至于(yú)爲(wéi / wèi)什麽默認對齊邊界是(shì)-16px，博主也(yě)不(bù)知道(dào)）。
然後設置黃色方塊的(de)屬性，如下圖：
[img]http://img.blog.csdn.net/20150107163855515?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
高度約束爲(wéi / wèi)100px，居上(shàng)0px，居左-8px（博主繼續傻逼）。
注：這(zhè)裏我們沒有設置紅色方塊和(hé / huò)黃色方塊的(de)間距，因爲(wéi / wèi)在(zài)iPhone豎屏的(de)情況下它們之(zhī)間的(de)間距爲(wéi / wèi)0px，其他(tā)情況爲(wéi / wèi)4px，所以(yǐ)我們需要(yào / yāo)在(zài)不(bù)同情況對應的(de)布局模式下面去設置間距。
然後設置綠色方塊和(hé / huò)藍色方塊的(de)屬性，如下圖：
[img]http://img.blog.csdn.net/20150107164416046?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
因爲(wéi / wèi)在(zài)iPhone豎屏情況下它們不(bù)是(shì)并排排列的(de)，所以(yǐ)這(zhè)兩個(gè)方塊在(zài)wAny hAny 模式下隻約束高度爲(wéi / wèi)160px。
接下來(lái)開始編輯iPad橫屏和(hé / huò)豎屏模式下的(de)布局，對九宮格的(de)模式進行切換，如下圖：
[img]http://img.blog.csdn.net/20150107165802298?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
wRegular hRegular模式，下面有提示：iPad橫屏和(hé / huò)豎屏下有效，剛好是(shì)我們需要(yào / yāo)的(de)。
但是(shì)你會發現布局有些問題，沒關系，我們在(zài)重新調整各個(gè)View的(de)位置和(hé / huò)寬度來(lái)達到(dào)下面這(zhè)個(gè)效果：
[img]http://img.blog.csdn.net/20150107170213662?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
然後繼續爲(wéi / wèi)各個(gè)View添加約束，首先是(shì)紅色和(hé / huò)黃色方塊的(de)間距，如下圖：
[img]http://img.blog.csdn.net/20150107171146775?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
在(zài)紅色方塊内按下鼠标右鍵并拖動鼠标到(dào)黃色方塊内，然後松開鼠标就(jiù)會彈出(chū)上(shàng)圖所示的(de)菜單，選擇Horizontal Spacing，然後在(zài)下圖所示的(de)界面内将間距修改爲(wéi / wèi)4px：
[img]http://img.blog.csdn.net/20150107171635641?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
同樣的(de)方式可以(yǐ)設置綠色方塊、藍色方塊和(hé / huò)黃色方塊互相的(de)間距。
然後我們來(lái)設置藍色方塊和(hé / huò)綠色方塊寬度相等，如下圖：
[img]http://img.blog.csdn.net/20150107171958941?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
同時(shí)選中藍色方塊和(hé / huò)綠色方塊，然後點擊下方的(de)按鈕，在(zài)彈出(chū)的(de)界面選擇Equal Widths即可（你會發現Equal Widths和(hé / huò)Equal Widths隻在(zài)選中兩個(gè)View的(de)情況下才可用，這(zhè)是(shì)很自然的(de)事情，一個(gè)View怎麽寬度相等…）。
最後我們設置綠色方塊居左-8px，藍色方塊居右-8px，如下圖：
[img]http://img.blog.csdn.net/20150107172953406?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[img]http://img.blog.csdn.net/20150107173038433?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
至此我們完成了(le／liǎo)iPad橫屏和(hé / huò)豎屏情況下的(de)布局。
然後是(shì)iPhone橫屏情況下的(de)布局，因爲(wéi / wèi)布局和(hé / huò)iPad豎屏、橫屏情況下是(shì)一緻的(de)，所以(yǐ)具體過程不(bù)在(zài)描述，隻需要(yào / yāo)将下方的(de)九宮格切換到(dào)wAny hCompact模式然後重複上(shàng)述過程即可。
最後是(shì)iPhone豎屏情況下的(de)布局，首先我們把九宮格切換到(dào)wCompact hRegular模式，然後調整各個(gè)View的(de)位置如下圖：
[img]http://img.blog.csdn.net/20150107173858250?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
然後用“右鍵拖線”的(de)方式我們設置紅色方塊和(hé / huò)黃色方塊的(de)間距爲(wéi / wèi)0px，綠色方塊和(hé / huò)紅色方塊的(de)間距爲(wéi / wèi)4px，藍色方塊和(hé / huò)綠色方塊的(de)間距爲(wéi / wèi)4px
最後再用下方的(de)[img]http://img.blog.csdn.net/20150107174250078?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center按鈕設定綠色方塊，藍色方塊的(de)左右邊距均爲(wéi / wèi)-8px，完成iPhone豎屏下的(de)布局。
至此目标成功達成。當然實現該布局的(de)方式還有很多，大(dà)家在(zài)理解之(zhī)後可以(yǐ)自由發揮。争取用最少的(de)約束來(lái)完成這(zhè)個(gè)布局。