IOS SizeClasses 详解

SizeClasses 详解

---

iOS 8在应用界面的可视化设计上添加了一个新的特性-Size Classes。对于任何设备来说，界面的宽度和高度都只分为三种描述：紧凑，任意和宽松。这样开发者便可以无视设备具体的尺寸，而是对这两类和它们的组合进行适配。

为什么苹果推出SizeClasses

• iPhone3gs-4s : frame直接写死。
• iPad : autoresizing —> 根据父控件frame发生改变,子控件跟着一起改变。
• iPhone5-iPhone5s : autolayout —>自动布局。
• iPhone6和iPhone6p : size Classes—>发现屏幕变的太多样化,界面不得不统一。

sizeclass

• 仅仅是对屏幕进行了分类, 真正排布UI元素还得使用autolayout
• 不再有横竖屏的概念, 只有屏幕尺寸的概念
• 不再有具体尺寸的概念, 只有抽象尺寸的概念

sizeclass把宽度和高度各分为3种情况

• Compact : 紧凑(小)
• Any : 任意
• Regular : 宽松(大)

sizeclass中的符号代表

• Compact: -
• Any: ＊
• Regular: +

继承性

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

竖屏：(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)

Apple Watch(猜测)

竖屏：(w:Compact h:Compact)

横屏：(w:Compact h:Compact)

sizeclass和autolayout的作用

sizeclass:仅仅是对屏幕进行了分类

autolayout:对屏幕中各种元素进行约束(位置\尺寸)

 

以上是对SizeClasses的简单概念介绍。

下面将会对其使用进行介绍（较多的图文介绍）

图一（整体工程）

 

图二（我们按照图一的指向点击后就可以进入到其操作界面）

图三（看到图二我想你会想这是什么和上面的文字有什么关系吗？那么图三会让他们联系起来）

通过图三可以让我们使图与文字相连接，但是该如何使用还不是很清楚，下面通过实例让我们对其进行了解。

实例一：让一个view竖屏时显示，横屏时不显示。（图解如下）

在竖屏时显示（在竖屏时添加view）

横屏不显示（因为我们是在竖屏时添加的，在横屏时不做操作即可）

让我们看看实例结果：

结果一：

结果二（不要怀疑你的眼睛就是白色的😄）

注意：在使用sizeclasses的时候要记得使用约束。

通过这个实例我们可以学到sizeclasses最基本的使用。

实例二：iPad与iPhone上显示的不一样

如下图设置即可

根据前文介绍的对应符号即可理解图片。

下面是测试结果

iPad测试结果

iPhone测试结果