Size Classes的理解和使用

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

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

默认状态

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


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




可以总结为:

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

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

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

iPad同理

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容