iOS 8 AutoLayout与Size Class

iOS 8 AutoLayout与Size Class

• 
  

前言

iOS8和iPhone6发布已通过去蛮久了,广大的果粉终于迎来了大屏iPhone,不再用纠结为大屏买三星舍苹果了…可是对于iOS开发人员来讲,迎来了和Android开发开发同样的问题—>各类屏幕的适配(是否是能够要求加工资的节奏).对于适配,网传各类有关Size Class的论点,前段时间太忙,一直没去研究,套用+总的话,苹果在适配方面提供的方法作的比安卓好太多了.本身实测以后,确实很方便0.0(不过,仍是想说,适配的核心始终是AutoLayout)

概念初探

iOS8以前,公司在开发项目时,先作的iPhone版,而后要求开发iPad版本,其实内容是彻底同样的,只是UI变化了,可是咱们就须要创建2个工程来分别对应实现.iOS8推出的Size Class,可让咱们在一个工程的storyboard中进行全部尺寸屏幕的适配,不只是iPhone 4s-5/5s-6-6 Plus,还包括iPad界面.它引入了一种新的概念,抛弃传统意义上咱们适配时所谓的具体宽高尺寸,把屏幕的宽和高分别分红两种状况:Compact-紧凑, Regular-正常(Any-任意,其实就是这2种的组合,因此我没分红3种状况).搭配起来是3*3,也就是不管如何变化,加起来也就9种,如上图. 

1.实际应用中,这Compact,Any,Regular如何运用呢?

w:Any h: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) 

2. 再来看一组数据和一张图(国外一位博主给出的,很形象):

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)

3.能够总结为: 

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

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

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

• iPad同理

因此,我以为Size Class最大的帮助是,解决横屏适配和iPhone iPad共享一个设计板…(我的意见) 

试验反馈一

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