码迷,mamicode.com
首页 > 移动开发 > 详细

iOS 8 AutoLayout与Size Class自悟

时间:2015-10-29 12:41:46      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:

storyboard中可以进行所有尺寸屏幕的适配(iphone和ipad),它抛弃了传统意义上我们适配时所谓的具体宽高,把屏幕的宽和高分别分成两种情况:紧凑-compact,正常-regular(any-任意,其实就是这2种的组合,所以没分成3种情况)。所以就是9种。

w:Any h:Any 是我们刚建立工程时候默认选择的,算是一切描述的父类.其他的种类描述都是在此基础上变化的,比如:如果weight设为Any,height设置为Regular,那么在该状态下的界面元素在只要height为Regular,无论weight是Regular还是Compact的状态中都会存在.

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 

iOS 8 AutoLayout与Size Class自悟

标签:

原文地址:http://www.cnblogs.com/fanjing/p/4919738.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!