iOS 8 AutoLayout与Size Class
2016-05-06 18:34
471 查看
概念初探
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)
![](http://cc.cocimg.com/api/uploads/20141217/1418795540826221.png)
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.首先,先建立一个工程,展开如下页面
![](http://cc.cocimg.com/api/uploads/20141217/1418795619564332.png)
PS:这是iOS8的新特性,真的用到项目里需要等放弃兼容iOS7 。。。显然,目前还是不行的
2.在Any Any情况下,放置一个Label,并设置约束上-左-下-右为0-0-20-0
![](http://cc.cocimg.com/api/uploads/20141217/1418795649852495.png)
![](http://cc.cocimg.com/api/uploads/20141217/1418795676961340.png)
3.在Compact Any情况下,又放置一个Label,并设置约束上为20
![](http://cc.cocimg.com/api/uploads/20141217/1418795705149952.png)
4.继续在Compact Any情况下,来看看横屏状态下的变化
![](http://cc.cocimg.com/api/uploads/20141217/1418795785522114.png)
5.最后切换到Regular Any下,完成6 Plus 的横屏显示
![](http://cc.cocimg.com/api/uploads/20141217/1418795810496572.png)
试验反馈二
试验一里面,验证了一下概念中所列举的各个屏幕适用的组合,接下来,算是Size Class 解决横屏的妙用
![](http://cc.cocimg.com/api/uploads/20141217/1418795836776193.png)
![](http://cc.cocimg.com/api/uploads/20141217/1418796024741244.png)
![](http://cc.cocimg.com/api/uploads/20141217/1418796024510371.png)
![](http://cc.cocimg.com/api/uploads/20141217/1418796063111839.png)
PS:运用于,横屏适配,重新排版竖屏时候的UI布局
除了改动不同组合下约束,也能改动控件在不同组合下是否显示
![](http://cc.cocimg.com/api/uploads/20141217/1418796117706089.png)
![](http://cc.cocimg.com/api/uploads/20141217/1418796117427802.png)
试验反馈三
AutoLayout这里不给具体如何设置,因为不知道如何写,感觉还是大家多动手去写,去试,最有效了
下面给出AutoLayout设置的图解
![](http://cc.cocimg.com/api/uploads/20141217/1418796203135811.png)
![](http://cc.cocimg.com/api/uploads/20141217/1418796203676119.png)
简答测试Demo结果图:
![](http://cc.cocimg.com/api/uploads/20141217/1418796267535492.png)
如果不横屏,也可以直接取消Size Classes(图不一样,不同时间写的…囧)
![](http://cc.cocimg.com/api/uploads/20141217/1418796274163824.png)
最终Demo
Demo的Github地址:https://github.com/ConanMTHu/Size-Classes-Demo/tree/master
![](http://cc.cocimg.com/api/uploads/20141217/1418796310127465.gif)
![](http://cc.cocimg.com/api/uploads/20141217/1418796435255360.png)
![](http://cc.cocimg.com/api/uploads/20141217/1418796435901113.png)
总结
直接说以后都应该使用storyboard+autolayout感觉是不负责的说法,但是深入思考autolayout是很有必要的!
如下情况使用autolayout会有帮助:
当需要展示的内容很多并且尺寸不固定;
程序需支持屏幕旋转(主要是iPad程序,iPhone程序横屏的场景有点非主流,也不排除..手游..);
程序通用于iPhone和iPad(最重要的吧).
但storyboard中使用autolayout有利有弊,好处当然是可视化,实现简单功能很节省时间,但也有弊端,例如不小心移动一个控件就会让弄乱那些约束或者控件一多加上自定义的XXXXXXXX
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)
![](http://cc.cocimg.com/api/uploads/20141217/1418795540826221.png)
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.首先,先建立一个工程,展开如下页面
![](http://cc.cocimg.com/api/uploads/20141217/1418795619564332.png)
PS:这是iOS8的新特性,真的用到项目里需要等放弃兼容iOS7 。。。显然,目前还是不行的
2.在Any Any情况下,放置一个Label,并设置约束上-左-下-右为0-0-20-0
![](http://cc.cocimg.com/api/uploads/20141217/1418795649852495.png)
![](http://cc.cocimg.com/api/uploads/20141217/1418795676961340.png)
3.在Compact Any情况下,又放置一个Label,并设置约束上为20
![](http://cc.cocimg.com/api/uploads/20141217/1418795705149952.png)
4.继续在Compact Any情况下,来看看横屏状态下的变化
![](http://cc.cocimg.com/api/uploads/20141217/1418795785522114.png)
5.最后切换到Regular Any下,完成6 Plus 的横屏显示
![](http://cc.cocimg.com/api/uploads/20141217/1418795810496572.png)
试验反馈二
试验一里面,验证了一下概念中所列举的各个屏幕适用的组合,接下来,算是Size Class 解决横屏的妙用
![](http://cc.cocimg.com/api/uploads/20141217/1418795836776193.png)
![](http://cc.cocimg.com/api/uploads/20141217/1418796024741244.png)
![](http://cc.cocimg.com/api/uploads/20141217/1418796024510371.png)
![](http://cc.cocimg.com/api/uploads/20141217/1418796063111839.png)
PS:运用于,横屏适配,重新排版竖屏时候的UI布局
除了改动不同组合下约束,也能改动控件在不同组合下是否显示
![](http://cc.cocimg.com/api/uploads/20141217/1418796117706089.png)
![](http://cc.cocimg.com/api/uploads/20141217/1418796117427802.png)
试验反馈三
AutoLayout这里不给具体如何设置,因为不知道如何写,感觉还是大家多动手去写,去试,最有效了
下面给出AutoLayout设置的图解
![](http://cc.cocimg.com/api/uploads/20141217/1418796203135811.png)
![](http://cc.cocimg.com/api/uploads/20141217/1418796203676119.png)
简答测试Demo结果图:
![](http://cc.cocimg.com/api/uploads/20141217/1418796267535492.png)
如果不横屏,也可以直接取消Size Classes(图不一样,不同时间写的…囧)
![](http://cc.cocimg.com/api/uploads/20141217/1418796274163824.png)
最终Demo
Demo的Github地址:https://github.com/ConanMTHu/Size-Classes-Demo/tree/master
![](http://cc.cocimg.com/api/uploads/20141217/1418796310127465.gif)
![](http://cc.cocimg.com/api/uploads/20141217/1418796435255360.png)
![](http://cc.cocimg.com/api/uploads/20141217/1418796435901113.png)
总结
直接说以后都应该使用storyboard+autolayout感觉是不负责的说法,但是深入思考autolayout是很有必要的!
如下情况使用autolayout会有帮助:
当需要展示的内容很多并且尺寸不固定;
程序需支持屏幕旋转(主要是iPad程序,iPhone程序横屏的场景有点非主流,也不排除..手游..);
程序通用于iPhone和iPad(最重要的吧).
但storyboard中使用autolayout有利有弊,好处当然是可视化,实现简单功能很节省时间,但也有弊端,例如不小心移动一个控件就会让弄乱那些约束或者控件一多加上自定义的XXXXXXXX
相关文章推荐
- iOS内存管理(一)
- iOS开发——创建你自己的Framework
- iOS NSDecimalNumber--货币计算
- iOS开发:音频播放、录音、视频播放、拍照、视频录制
- iOS RunLoop
- iOS 归档、解档
- iOS 中KVC、KVO、NSNotificat…
- iOS开发 引用第三方库出现duplicat…
- iOS KVC和KVO开发模式
- iOS各种权限状态获取
- iOS 多线程 - NSOperation
- iOS-键盘弹出的类型
- ios中常用数据类型相互转换
- iOS block的简单说明
- iOS中几种数据持久化方案
- iOS实现表格(非TableView)
- iOS7.0导航栏设置
- iOS 页面间几种传值方式(属性,代理,block,单例,通知)
- iOS开发AFNetworking的使用
- iOS 集成环信(三)