美文网首页
Size Classes的理解和使用

Size Classes的理解和使用

作者: GShining | 来源:发表于2016-09-11 10:34 被阅读0次

据说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同理

相关文章

  • Size Classes的理解和使用

    据说Size Classes这项技能是iOS 8在应用界面的可视化设计上添加的一个新的特性。个人认为此项特性主要是...

  • Size Classes自我理解

    自己看过网上的一些资料有一些理解,这几天看了一本电子书重新有了自己的理解,就想着写下来。size class可以对...

  • iOS 8 Size Classes初探

    iOS 8 Size Classes初探 iOS 8 Size Classes初探

  • 面试 (四) : UI篇

    Size Classes 具体使用 • 对屏幕进行分类 UIView和CALayer是什么关系? • UIView...

  • Xcode 13 Vary For Traits

    一、Size class 什么是Size Classes? size classes也是出现在iOS8的功能,.x...

  • (四) : 基础篇-4

    Size Classes 具体使用• 对屏幕进行分类UIView和CALayer是什么关系?• UIView显示在...

  • Size Classes

    目录 1 SizeClasses简介2 SizeClasses与AutoLayout3 SizeClasses与设...

  • Size Classes

  • OCUI部分

    Size Classes 具体使用 对屏幕进行分类 UIView和CALayer是什么关系? UIView显示在屏...

  • iOS知识UI篇

    Size Classes 具体使用 对屏幕进行分类 UIView和CALayer是什么关系? UIView显示在屏...

网友评论

      本文标题:Size Classes的理解和使用

      本文链接:https://www.haomeiwen.com/subject/gzruettx.html