参考文章
xcode6中自动布局autolayout和sizeclass的使用
SizeClass介绍
由于苹果手持设备屏幕尺寸的差异化,我们基本上已经不可能用一套设计,使之在所有设备上看起来尽善尽美(除非设计超简单,比如只有一个button,但这应该很少见),所以,仅仅Autolayout还是不够用的(如果仅用Autolayout,它能保持UI在所有设备上的相对位置是固定的,但是,它不能发挥出相应设备的特色,比如,iPad和iPhone,横屏和竖屏,如果,我们想让所有UI在对应的屏幕上,都能使用户体验最棒,苹果和我们都必须想点办法),SizeClass应运而生(iOS8)。
SizeClass把屏幕的宽和高分成三种情况:
(Compact, Regular, Any),也即紧凑、正常和任意
。这样宽和高三三一整合,一共9种
情况。如下图所示,针对每一种情况,如果需要的话,我们可以单独在storyboard或xib中设置UIView的自动布局约束,甚至某一个button是否显示都是能轻松实现。
下面我们以一个简单的布局场景为例进行说明:
假设,我们想实现下面这个效果:横屏和竖屏头像和label都能正常的现实,且在“比较恰当”的位置:显然横屏的时候,高度处于压缩的状态,(height: compact),我们需要先对正常的布局之外,还要添加一种(wAny, hCompact)size class的布局:
首先,我们对默认的sizeclass进行布局,确定头像和label的位置和尺寸:
设置完(wAny hAny)之后,点击wAny hAny文字(上图底部),选择(wAny hCompact):注意点击后弹出一个九宫格浮框,拖动鼠标即可选择响应的size class,注意在右下角(红色方框表示),还可以选择是否install,如果取消勾选,则这个头像在当前size class下就不会被加载(自然也就不显示出来)。
布局完毕,运行起来,即可达到我们想要的效果!
SizeClass归纳
通过在模拟器上测试,我得出SizeClass各模式下的适配情况:
宽高
任意
(WAHA):任意设备宽
任意
高正常
(WAHR): 3.5寸竖屏,4寸竖屏,4.7寸竖屏,5.5寸竖屏,iPad竖屏、iPad横屏宽
任意
高紧凑
(WAHC):3.5寸横屏 ,4寸横屏,4.7寸横屏,5.5寸横屏宽
正常
高任意
(WRHA):5.5寸横屏,iPad竖屏、iPad横屏宽
正常
高正常
(WRHR): iPad竖屏、iPad横屏宽
正常
高紧凑
(WRHC): 5.5寸横屏宽
紧凑
高任意
(WCHA):3.5寸竖屏、3.5寸横屏,4寸竖屏、4寸横屏,4.7寸竖屏、4.7寸横屏,5.5寸竖屏宽
紧凑
高正常
(WCHR):3.5寸竖屏,4寸竖屏,4.7寸竖屏,5.5寸竖屏宽
紧凑
高紧凑
(WCHC):3.5寸横屏,4寸横屏,4.7寸横屏
我们可以很容易的发现,他们之间存在集合关系
,例如WCHC是WCHA、WAHC的交集,WRHC是WAHC、WRHA的交集。我们可以根据自己的需求来作设计,比如,我们想适配所有的竖屏,那么我们应该选择WAHR,如果我们只想适配iPhone,那么可以选择WCHR。而且,我们可以依稀推测,苹果是根据宽高比来确定SizeClass的。
结果,我的推测是错的……
屏幕 | 像素 | 宽比高 | 高比宽 |
---|---|---|---|
3.5寸 | 320*480 | 0.67 | 1.5 |
4寸 | 320*568 | 0.56 | 1.78 |
4.7寸 | 375*667 | 0.56 | 1.78 |
5.5寸 | 414*736 | 0.56 | 1.78 |
iPad | 384*512 | 0.75 | 1.3 |
看来苹果是根据屏幕宽高各自尺寸
来分类的
3.5寸竖屏:宽紧凑高正常
3.5寸横屏:宽紧凑高紧凑
4寸竖屏:宽紧凑高正常
4寸横屏:宽紧凑高紧凑
4.7寸竖屏:宽紧凑高正常
4.7寸横屏:宽紧凑高紧凑
5.5寸竖屏:宽紧凑高正常
5.5寸横屏:宽正常高紧凑
iPad竖屏:宽正常高正常
iPad横屏:宽正常高正常
看来,高度超过3.5寸竖屏的高度,高就算正常,宽度超过5.5寸竖屏的高度(或者说5.5寸横屏的宽度),宽就算正常。
SizeClass注意
SizeClass针对的是各个控件,而不是scene(view controller),要想让你的控件多适应几种屏幕,有两种方法:
一是选择“任意”,比如宽任意高正常,那么我们就适配了所有竖屏以及iPad,如图:
二是选择一个控件,增加它的适配范围,如图: