iOS8开发～UI布局（二）storyboard中autolayout和size class的使用具体解释

1、概要：前一篇初步的描写叙述了size class的概念，那么实际中怎样使用呢，如下两个问题是咱们必定会遇到的：

一、Xcode6中添加了size class，在storyboard中怎样使用？

二、auto layout该怎样与size class配合来进行UI布局？

2、了解一件新事物的最好的办法就是实践，让咱们揭开那神奇的面纱：

样例一、新建一个Single View Application template项目Demo1，拖拽一个newView到rootView上，并设置背景色为绿色， 而后不作不论什么其它改动，执行项目，模拟器选择iPhone6，执行效果如图：

横屏：

竖屏：

把模拟器更改成iPad、iPhone4s等，而后再旋转屏幕，发现绿色的newView的位置差点儿没有变化。查看Document Outline发现没有不论什么constraint（约束）做用于绿色view上，理论上假设一个view没有不论什么constraint，那么view将没有位置及大小，但眼下来看是没问题的，何解？

查看view的size inspector，发现秘密了：

原来假设不给一个view加入不论什么constraint，系统会本身主动给view加入左、上、宽、高四个约束，就是说新绿色的view会有固定的宽和高，而后以屏幕左上角为參考点，有一个系统加入的默认位置。（假设咱们向绿色view加入不论什么其它约束，那么系统本身主动加入的约束将实效）

另外一个问题是，刚刚切换了很是多不一样类型的模拟器，至关于切换了不一样的size class，但显示绿色view都正常，而size class的存在的目的就是为了区分不一样的size class（好比：iPhone4s横屏wCompact/hCompact，iPhone4s竖屏wCompact/hRegular，iPad横竖屏都是wRegular/hRegular），而后来作不一样的UI布局，何解？

查看当前的size class:

当前的size class为wAny/hAny，也就是说在size class为wAny/hAny的时候加入constraint，在其它size class的时候也生效。事实上从字面上也可以看出，Any就是不论什么的意思，Compact和Regular是Any的子类。

样例二、基于iPhone适配界面，加入三个view到rootView上，而后无论横屏仍是竖屏，新加入的三个view之间及与屏幕边框的距离都保持不变的间距20点宽，效果如图：

       

新建一个Single View Application template项目Demo2，因为要适配iPhone横竖屏，因此改动size class为wCompact/hRegular来适配竖屏：

拖拽3个view到rootView上，并设置其背景颜色

为了知足设计要求，要加入例如如下constraint：

（1）设定绿色view距离superview左边距和上边距；

（2）设定黄色view距离superview右边距和上边距，相对绿色view的的左边距；

（3）设定蓝色view的左边距和右边距和下边距，上边距离绿色view下边的距离；

（4）设定绿色view与黄色view等宽

（5）设定蓝色view与绿色view等高

现在開始动手吧：选中绿色view，Eidtor－>Pin－>Leading Space to Superview给绿色view加入相对其superview的左边距，而后选中constraint，改动约束的值为20，其它constraint以此类推：

加入完如图：

当中红色框部分清晰的表达了所加入的constraint；

蓝色框部分时加入的constraint，眼下为黄色线，代表当前的constraint还不能定位view，当一个view的constraint正确的时候，constraint的颜色会变为蓝色。

绿色线框的部分表达了constraint的数值，咱们想让边距为20，因此设置数值为20 。wC hR Installed代表当前constraint适用于wC hR这样的size class，不适合any any的size class。

加入绿色view与黄色view以前的距离时候，由于是设定两个子view的constraint，因此要选中两个view，而后Editor－>Pin ->Horizontal，设定值为20：

相同方法Editor－>Pin ->Width Equally，设定绿色view与黄色view等宽度，蓝色view与绿色view等高，结果如图：

但发现constraint颜色仍而后黄色，缘由是当前view的位置和constraint但愿的不一致，更新下frame（要选中3个view，因为constraint关联3个view）或者点击Document Outline中的黄色小箭头，而后会看到详细的constraint信息来一步步调试，这个也是Xcode6最有突破的地方：

而后效果如图：

而后执行下项目吧，发现确实和预期的同样。而后旋转屏幕，是否是发现横屏时候白了，屏幕什么都没有了？缘由是咱们只适配的竖屏，横屏尚未适配啊！

改动size class，iPhone4s横屏的size class为wCompact/hCompact，而iPhone6 plus为wReguage/hCompact，那咱们不如设置为wAny/hCompact吧！而后安装上边适配竖屏的方式适配横屏。适配好后再次执行，横竖屏都应该是咱们想要的了。

完整项目下载

样例三、新建一个Single View Application template项目Demo3，加入一个view，是这个view的宽度和高度都是100点宽，并且始终居中于superview，效果如图：

这个样例很是简单，也很是easy实现，目的是补充以上两个样例没有说起到的一些细节。

在rootView上加入一个view，设定背景色为绿色：

由于不打算区分是哪一种iOS设备，因此size class选择wAny/hAny，而后绿色的view随便放到superview上就可以，Auto Layout的理念就是不用去管详细view的frame，要注意的是这个view终于想怎样的显示，属于基于目的设计的范畴。

这个样例要完毕两件事情：

（1）设定约束使view的宽和高为100点宽

（2）设定约束使view始终居中于superview

先作第（1）件事：选中view，而后Editor－>Pin->Width，设定为100，相同方法设定Height

         

而后第（2）件是让view居中：仍是选中view，而后Editor －>Aligh －>Horizontal Center in Container，相同方法设定垂直居中对齐：

而后会发现Document Outline右上角有一个黄色小箭头：

点击黄色箭头进入structure页面，可以看到一些提示信息，可以了解当前布局存在问题，指导下一步该作什么。在view中看到一个黄色虚线框，这个框表明眼下约束获得的view，在structure页面有一个黄色的点，点击后会提示你怎样改动：

选择Update Frame就是依照当前的约束去更新view，选择Update Constains是依照拖拽进去view的frame更新约束。在这个样例中Update Frame是咱们需要的。而后执行项目看看是否是咱们想要的效果吧！

Demo3

本部分细节很是多，而且都是要动手练习才会明确，多多动手！