历史车轮滚滚向前，将autolayout配合sizeclass做布局的方式推上了主流，虽然有点晚，但最终还是进行了一次完整的实践，特此记录一下：
因为网上已经有很多博客介绍了autolayout配合sizeclass布局的原理，所以我着重记录一下自己实践的过程：（可能会有错误，大家多多指正）
先来看看最终效果：
[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横屏
首先我们对最终效果进行分析，得出如下结论：
1.该布局适应设备包括iPhone和iPad。
2.iPhone横屏，iPad横屏和竖屏的布局是一致的（方式1），iPhone竖屏的布局是单独的（方式2）。
3.方式1和方式2边距都是一致的（8px）；红色方块和黄色方块并排，红色方块宽高固定（100px）；黄色方块高度固定（100px），宽度自适应屏幕；绿色方块和蓝色方块高度固定（160px）。
4.方式1红色、黄色、绿色和蓝色方块的间距均为4px；绿色方块和蓝色方块并排，宽度相等且自适应屏幕。
5.方式2红色方块和黄色方块的间距为0px，其他各方块的间距均为4px；蓝色方块在绿色方块下方，宽度自适应屏幕。
分析完毕，我们开始一步步实现这些效果：
第一步：创建一个single view application项目，注意Devices选项选择Universal。
第二步：打开Main.stroyboard，创建相应的View并调整它们的位置如下图（调整的办法用过storyboard的人应该都知道）：
[img]http://img.blog.csdn.net/20150107104057329?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
注：红框中的部分是iOS8中新增的sizeclass特性。点击该区域会弹出如下的界面：
[img]http://img.blog.csdn.net/20150107105145884?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

中间的九宫格控制了布局适应哪些设备的横屏和竖屏。具体原理参考这个博客：http://blog.csdn.net/lihuiqwertyuiop/article/details/39271887（ps：我就是看这个看明白原理的，所以我自己就不废话了）。
在之前的分析中我们得到了iPhone横屏、iPhone竖屏、iPad横屏和iPad竖屏下布局的几个共性。对于这些共性的东西，我们在wAny hAny这种模式下编辑，因为wAny hAny模式下的布局对所有设备在横屏和竖屏的情况下都有效。
首先设置红色方块的属性，如下图：
[img]http://img.blog.csdn.net/20150107163546718?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
宽度和高度约束为100px，居上0px，居左-8px（截图和文字不一样是因为博主傻逼了，忘了改……因为默认对齐边界是-16px，所以如果需要边距为8px则输入-8px即可，至于为什么默认对齐边界是-16px，博主也不知道）。
然后设置黄色方块的属性，如下图：
[img]http://img.blog.csdn.net/20150107163855515?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
高度约束为100px，居上0px，居左-8px（博主继续傻逼）。
注：这里我们没有设置红色方块和黄色方块的间距，因为在iPhone竖屏的情况下它们之间的间距为0px，其他情况为4px，所以我们需要在不同情况对应的布局模式下面去设置间距。
然后设置绿色方块和蓝色方块的属性，如下图：
[img]http://img.blog.csdn.net/20150107164416046?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
因为在iPhone竖屏情况下它们不是并排排列的，所以这两个方块在wAny hAny 模式下只约束高度为160px。
接下来开始编辑iPad横屏和竖屏模式下的布局，对九宫格的模式进行切换，如下图：
[img]http://img.blog.csdn.net/20150107165802298?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
wRegular hRegular模式，下面有提示：iPad横屏和竖屏下有效，刚好是我们需要的。
但是你会发现布局有些问题，没关系，我们在重新调整各个View的位置和宽度来达到下面这个效果：
[img]http://img.blog.csdn.net/20150107170213662?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
然后继续为各个View添加约束，首先是红色和黄色方块的间距，如下图：
[img]http://img.blog.csdn.net/20150107171146775?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
在红色方块内按下鼠标右键并拖动鼠标到黄色方块内，然后松开鼠标就会弹出上图所示的菜单，选择Horizontal Spacing，然后在下图所示的界面内将间距修改为4px：
[img]http://img.blog.csdn.net/20150107171635641?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
同样的方式可以设置绿色方块、蓝色方块和黄色方块互相的间距。
然后我们来设置蓝色方块和绿色方块宽度相等，如下图：
[img]http://img.blog.csdn.net/20150107171958941?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
同时选中蓝色方块和绿色方块，然后点击下方的按钮，在弹出的界面选择Equal Widths即可（你会发现Equal Widths和Equal Widths只在选中两个View的情况下才可用，这是很自然的事情，一个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
至此我们完成了iPad横屏和竖屏情况下的布局。
然后是iPhone横屏情况下的布局，因为布局和iPad竖屏、横屏情况下是一致的，所以具体过程不在描述，只需要将下方的九宫格切换到wAny hCompact模式然后重复上述过程即可。
最后是iPhone竖屏情况下的布局，首先我们把九宫格切换到wCompact hRegular模式，然后调整各个View的位置如下图：
[img]http://img.blog.csdn.net/20150107173858250?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
然后用“右键拖线”的方式我们设置红色方块和黄色方块的间距为0px，绿色方块和红色方块的间距为4px，蓝色方块和绿色方块的间距为4px
最后再用下方的[img]http://img.blog.csdn.net/20150107174250078?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbW1vYWF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center按钮设定绿色方块，蓝色方块的左右边距均为-8px，完成iPhone竖屏下的布局。
至此目标成功达成。当然实现该布局的方式还有很多，大家在理解之后可以自由发挥。争取用最少的约束来完成这个布局。