天天看点

AutoLayout与Size Class

前言

Autolayout(以及iOS8中新增的sizeclass)是为了解决这些UI可视单元或者元素是怎样布局、排列的问题。在过去只有iPhone4的时候,我们可以在代码里将没一个可视单元的位置写死,这样是没问题的,但随着iPhone5、6的发布,屏幕尺寸有了越来越多中可能,未来不排除更多尺寸的iPhone发布出来,这就要求我们的APP的UI元素具有在屏幕尺寸不同的设备上具有一定动态的可调性,已实现较好的UI展示效果。

AutoLayout与Size Class

概念初探

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)

AutoLayout与Size Class

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.首先,先建立一个工程,展开如下页面

AutoLayout与Size Class

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

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

AutoLayout与Size Class
AutoLayout与Size Class

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

AutoLayout与Size Class

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

AutoLayout与Size Class

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

AutoLayout与Size Class

试验反馈二

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

AutoLayout与Size Class
AutoLayout与Size Class
AutoLayout与Size Class
AutoLayout与Size Class

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

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

AutoLayout与Size Class
AutoLayout与Size Class

试验反馈三

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

下面给出AutoLayout设置的图解

AutoLayout与Size Class
AutoLayout与Size Class

简答测试Demo结果图:

AutoLayout与Size Class

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

AutoLayout与Size Class

最终Demo

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

AutoLayout与Size Class
AutoLayout与Size Class
AutoLayout与Size Class

继续阅读