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

中間的九宮格控制了布局適應(yīng)哪些設(shè)備的橫屏和豎屏。具體原理參考這個(gè)博客：http://blog.csdn.net/lihuiqwertyuiop/article/details/39271887（ps：我就是看這個(gè)看明白原理的，所以我自己就不廢話了）。
在之前的分析中我們得到了iPhone橫屏、iPhone豎屏、iPad橫屏和iPad豎屏下布局的幾個(gè)共性。對(duì)于這些共性的東西，我們?cè)趙Any hAny這種模式下編輯，因?yàn)閣Any hAny模式下的布局對(duì)所有設(shè)備在橫屏和豎屏的情況下都有效。
首先設(shè)置紅色方塊的屬性，如下圖：
[img]http://img.blog.csdn.net/20150107163546718?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
寬度和高度約束為100px，居上0px，居左-8px（截圖和文字不一樣是因?yàn)椴┲魃?#36924;了，忘了改……因?yàn)槟J(rèn)對(duì)齊邊界是-16px，所以如果需要邊距為8px則輸入-8px即可，至于為什么默認(rèn)對(duì)齊邊界是-16px，博主也不知道）。
然后設(shè)置黃色方塊的屬性，如下圖：
[img]http://img.blog.csdn.net/20150107163855515?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
高度約束為100px，居上0px，居左-8px（博主繼續(xù)傻逼）。
注：這里我們沒(méi)有設(shè)置紅色方塊和黃色方塊的間距，因?yàn)樵趇Phone豎屏的情況下它們之間的間距為0px，其他情況為4px，所以我們需要在不同情況對(duì)應(yīng)的布局模式下面去設(shè)置間距。
然后設(shè)置綠色方塊和藍(lán)色方塊的屬性，如下圖：
[img]http://img.blog.csdn.net/20150107164416046?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
因?yàn)樵趇Phone豎屏情況下它們不是并排排列的，所以這兩個(gè)方塊在wAny hAny 模式下只約束高度為160px。
接下來(lái)開(kāi)始編輯iPad橫屏和豎屏模式下的布局，對(duì)九宮格的模式進(jìn)行切換，如下圖：
[img]http://img.blog.csdn.net/20150107165802298?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
wRegular hRegular模式，下面有提示：iPad橫屏和豎屏下有效，剛好是我們需要的。
但是你會(huì)發(fā)現(xiàn)布局有些問(wèn)題，沒(méi)關(guān)系，我們?cè)谥匦抡{(diào)整各個(gè)View的位置和寬度來(lái)達(dá)到下面這個(gè)效果：
[img]http://img.blog.csdn.net/20150107170213662?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
然后繼續(xù)為各個(gè)View添加約束，首先是紅色和黃色方塊的間距，如下圖：
[img]http://img.blog.csdn.net/20150107171146775?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
在紅色方塊內(nèi)按下鼠標(biāo)右鍵并拖動(dòng)鼠標(biāo)到黃色方塊內(nèi)，然后松開(kāi)鼠標(biāo)就會(huì)彈出上圖所示的菜單，選擇Horizontal Spacing，然后在下圖所示的界面內(nèi)將間距修改為4px：
[img]http://img.blog.csdn.net/20150107171635641?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
同樣的方式可以設(shè)置綠色方塊、藍(lán)色方塊和黃色方塊互相的間距。
然后我們來(lái)設(shè)置藍(lán)色方塊和綠色方塊寬度相等，如下圖：
[img]http://img.blog.csdn.net/20150107171958941?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
同時(shí)選中藍(lán)色方塊和綠色方塊，然后點(diǎn)擊下方的按鈕，在彈出的界面選擇Equal Widths即可（你會(huì)發(fā)現(xiàn)Equal Widths和Equal Widths只在選中兩個(gè)View的情況下才可用，這是很自然的事情，一個(gè)View怎么寬度相等…）。
最后我們?cè)O(shè)置綠色方塊居左-8px，藍(lán)色方塊居右-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
至此我們完成了iPad橫屏和豎屏情況下的布局。
然后是iPhone橫屏情況下的布局，因?yàn)椴季趾蚷Pad豎屏、橫屏情況下是一致的，所以具體過(guò)程不在描述，只需要將下方的九宮格切換到wAny hCompact模式然后重復(fù)上述過(guò)程即可。
最后是iPhone豎屏情況下的布局，首先我們把九宮格切換到wCompact hRegular模式，然后調(diào)整各個(gè)View的位置如下圖：
[img]http://img.blog.csdn.net/20150107173858250?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
然后用“右鍵拖線”的方式我們?cè)O(shè)置紅色方塊和黃色方塊的間距為0px，綠色方塊和紅色方塊的間距為4px，藍(lán)色方塊和綠色方塊的間距為4px
最后再用下方的[img]http://img.blog.csdn.net/20150107174250078?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center按鈕設(shè)定綠色方塊，藍(lán)色方塊的左右邊距均為-8px，完成iPhone豎屏下的布局。
至此目標(biāo)成功達(dá)成。當(dāng)然實(shí)現(xiàn)該布局的方式還有很多，大家在理解之后可以自由發(fā)揮。爭(zhēng)取用最少的約束來(lái)完成這個(gè)布局。