iOS 8 AutoLayout与Size Class

一、Autolayout

二、Size Class

iOS 8在应用界面的可视化设计上添加了一个新的特性-Size Classes，对于任何设备来说，界面的宽度和高度都只分为两种描述：正常和紧凑。这样开发者便可以无视设备具体的尺寸，而是对这两类和它们的组合进行适配。这样不论在设计时还是代码上，我们都可以不再受限于具体的尺寸，而是变成遵循尺寸的视觉感官来进行适配。在Xcode中的具体体现如下图：

但是我们看到图中的宽度和高度都是Any,Any是什么意思呢？如果weight设为Any，height设置为Regular，那么在该状态下的界面元素在只要height为Regular，无论weight是Regular还是Compact的状态中都会存在。这种关系应该叫做继承关系，具体的四种界面描述与可继承的界面描述如下：

• w:Compact h:Compact 继承 (w:Any h:Compact , w:Compact h:Any , w:Any h:Any)
• w:Regular h:Compact 继承 (w:Any h:Compact , w:Regular h:Any , w:Any h:Any)
• w:Compact h:Regular 继承 (w:Any h:Regular , w:Compact h:Any , w:Any h:Any)
• w:Regular h:Regular 继承 (w:Any h:Regular , w:Regular h:Any , w:Any h:Any)

我们知道了iOS 8下面设备界面可以描述为4种，但是这么多设备(iPhone4S,iPhone5/5s,iPhone6,iPhone6 Plus,iPad,Apple Watch)具体对应什么描述呢？经过查看官方文档和具体实践得知具体对应关系如下:

• iPhone4S,iPhone5/5s,iPhone6
  • 竖屏：(w:Compact h:Regular)
  • 横屏：(w:Compact h:Compact)
• iPhone6 Plus
  • 竖屏：(w:Compact h:Regular)
  • 横屏：(w:Regular h:Compact)
• iPad
  • 竖屏：(w:Regular h:Regular)
  • 横屏：(w:Regular h:Regular)
• Apple Watch(猜测)
  • 竖屏：(w:Compact h:Compact)
  • 横屏：(w:Compact h:Compact)

3.可以总结为: 

• 如果项目不支持横屏显示,使用w:Compact h:Regular(或者直接取消使用Size Class) 

• 如果项目支持横屏显示,使用w:Compact h:Regular+w:Any h:Compact 

• 对于一些公有的约束(任意组合中都适用),一般放在w:Any h:Any中设置 

• iPad同理

所以,我觉得Size Class最大的帮助是,解决横屏适配和iPhone iPad共享一个设计板

Size Classes手写代码

为了表征Size Classes，Apple在iOS8中引入了一个新的类，UITraitCollection。这个类封装了像水平和竖直方向的Size Class等信息。iOS8的UIKit中大多数UI的基础类(包括UIScreen,UIWindow,UIViewController和UIView)都实现了UITraitEnvironment这个接口，通过其中的traitCollection这个属性，我们可以拿到对应的UITraitCollection对象，从而得知当前的Size Class，并进一步确定界面的布局。和UIKit中的响应者链正好相反，traitCollection将会在view hierarchy中自上而下地进行传递。对于没有指定traitCollection的UI部件，将使用其父节点的traitCollection。这在布局包含childViewController的界面的时候会相当有用。在UITraitEnvironment这个接口中另一个非常有用的是-traitCollectionDidChange:。在traitCollection发生变化时，这个方法将被调用。在实际操作时，我们往往会在ViewController中重写-traitCollectionDidChange:或者-willTransitionToTraitCollection:withTransitionCoordinator:方法(对于ViewController来说的话，后者也许是更好的选择，因为提供了转场上下文方便进行动画；但是对于普通的View来说就只有前面一个方法了)，然后在其中对当前的traitCollection进行判断，并进行重新布局以及动画。代码看起来大概会是这个样子：

123456789101112131415

- (void)willTransitionToTraitCollection:(UITraitCollection *)newCollection               withTransitionCoordinator:(id <UIViewControllerTransitionCoordinator>)coordinator{    [super willTransitionToTraitCollection:newCollection                  withTransitionCoordinator:coordinator];    [coordinator animateAlongsideTransition:^(id <UIViewControllerTransitionCoordinatorContext> context)     {        if (newCollection.verticalSizeClass == UIUserInterfaceSizeClassCompact) {            //To Do: modify something for compact vertical size        } else {            //To Do: modify something for other vertical size        }        [self.view setNeedsLayout];    } completion:nil];}

在两个To Do处，我们要手写代码针对不同的状态做调整。

三、匹配

试验反馈一

1.首先,先建立一个工程,展开如下页面

PS:这是iOS8的新特性,真的用到项目里需要等放弃兼容iOS7 。。。显然,目前还是不行的 

2.在Any Any情况下,放置一个Label,并设置约束上-左-下-右为0-0-20-0

 

3.在Compact Any情况下,又放置一个Label,并设置约束上为20

 

4.继续在Compact Any情况下,来看看横屏状态下的变化

 

5.最后切换到Regular Any下,完成6 Plus 的横屏显示

 

试验反馈二

试验一里面,验证了一下概念中所列举的各个屏幕适用的组合,接下来,算是Size Class 解决横屏的妙用

 

PS:运用于,横屏适配,重新排版竖屏时候的UI布局 

除了改动不同组合下约束,也能改动控件在不同组合下是否显示

试验反馈三

AutoLayout这里不给具体如何设置,因为不知道如何写,感觉还是大家多动手去写,去试,最有效了

下面给出AutoLayout设置的图解

简答测试Demo结果图:

如果不横屏,也可以直接取消Size Classes(图不一样,不同时间写的…囧)

 

最终Demo

Demo的Github地址:https://github.com/ConanMTHu/Size-Classes-Demo/tree/master

 

总结

直接说以后都应该使用storyboard＋autolayout感觉是不负责的说法，但是深入思考autolayout是很有必要的!

如下情况使用autolayout会有帮助: 

• 当需要展示的内容很多并且尺寸不固定; 

• 程序需支持屏幕旋转（主要是iPad程序，iPhone程序横屏的场景有点非主流,也不排除..手游..); 

• 程序通用于iPhone和iPad(最重要的吧). 

但storyboard中使用autolayout有利有弊，好处当然是可视化，实现简单功能很节省时间，但也有弊端，例如不小心移动一个控件就会让弄乱那些约束或者控件一多加上自定义的XXXXXXXX