Size Classes的理解和使用

据说Size Classes这项技能是iOS 8在应用界面的可视化设计上添加的一个新的特性。个人认为此项特性主要是为了解决不同屏幕下(尺寸不同或者横竖屏)的页面展示问题。

新建一个工程,打开Main.storyboard,点击w:Any h:Any,会看到当前的view是处于width是任意的,height是任意的状态(默认的)。而我们想要达到不同屏幕下的展示不同,就是依靠改变w h 的值来改变的。

Size Classes的理解和使用_第1张图片
默认状态

但是我们看到图中的宽度和高度都是Any,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)


不同的设备,已经不同的横竖屏幕都对应不同的宽高描述

iPhone4S,iPhone5/5s,iPhone6/6s

竖屏:(w:Compact h:Regular)

横屏:(w:Compact h:Compact)

iPhone6 Plus/6s Plus

竖屏:(w:Compact h:Regular)

横屏:(w:Regular h:Compact)

iPad

竖屏:(w:Regular h:Regular)

横屏:(w:Regular h:Regular)

Apple Watch(猜测)

竖屏:(w:Compact h:Compact)

横屏:(w:Compact h:Compact)


使用:我们可以通过调整不同的w h 的描述来得到不同屏幕下想要得到的效果,如果已经在wAny hAny 状态下对控件进行了约束,那么我们在不同的描述下(w h)需要去删除之前的约束。在使用的时候还可以配和屏幕预览(preview)来实时查看不同屏幕下的效果�(默认只有4s的屏幕,点击左下角加号添加不同屏幕,包括ipad)

Size Classes的理解和使用_第2张图片


对于同一storyBoard里有很多界面,不同界面需要设置不同sizeClasses,我们可以逐一设置,xib可以点击右侧箭头下面的installed选项来选择安装或者不安装。



Size Classes的理解和使用_第3张图片


可以总结为:

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

如果项目支持横屏显示,使用w:Compact h:Regular+w:Any h:Compact

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

iPad同理

你可能感兴趣的:(Size Classes的理解和使用)