iOS使用SizeClasses进行不同型号、横竖屏下的不同布局适配(2018.7)

一、什么是SizeClasses

SizeClasses 是从iOS 8开始,Apple在应用界面的可视化设计上添加的一个新的特性。

SizeClasses认为:对于任何设备来说,界面的宽度和高度都只分为三种描述:紧凑,任意和宽松。这样开发者便可以无视设备具体的尺寸,而是对这两类和它们的组合进行适配。

Apple共推出了frame 、autoresizing、autolayout、SizeClasses等布局方式。

  • frame:直接写坐标。
  • autoresizing: 根据父控件frame发生改变,子控件跟着一起改变。
  • autolayout:自动布局。
  • size Classes:发现屏幕变的太多样化,界面不得不统一。

SizeClasses仅仅是对屏幕进行了分类, 真正排布UI元素还得使用autolayout。

使用了SizeClasses不再有横竖屏的概念, 只有屏幕尺寸的概念;不再有具体尺寸的概念, 只有抽象尺寸的概念。

二、SizeClasses的表示方法

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

  1. Compact : 紧凑(小)
  2. Any : 任意
  3. Regular : 宽松(大)

SizeClasses表示与设备屏幕对应关系

  1. iPhone4S,iPhone5/5s,iPhone6
  • 竖屏:(w:Compact h:Regular)
  • 横屏:(w:Compact h:Compact)
  1. iPhone6 Plus
  • 竖屏:(w:Compact h:Regular)
  • 横屏:(w:Regular h:Compact)
  1. iPad
  • 竖屏:(w:Regular h:Regular)
  • 横屏:(w:Regular h:Regular)
  1. Apple Watch(猜测)
  • 竖屏:(w:Compact h:Compact)
  • 横屏:(w:Compact h:Compact)

以上关系不必记住,打开底部的编辑器通,过点击各手机、屏幕方向,就能查看横竖屏情况下w和h的表示方法。
比如在iPhone8 plus的横屏下是w:R h:C。


w:R h:C

三、SizeClasses的使用方法

一般情况下,一个IB(xib/storyboard)文件会是一个竖屏显示的某机型显示效果,你所添加的约束,会是所有机型所有屏幕方向上的约束。你可以通过底部的view as进行切换机型和屏幕方向进行效果预览。

想要添加其他机型或者屏幕方向上的约束,需要先进去编辑模式,点击view as后,出现如下图的面板


编辑面板

点击Vary for Traits进入编辑模式,弹出了Width和Height选项,前面打对号就锁定当前的这个属性。

Vary for Traits

通过点击“❓”可以查看Apple的文档,用白话来讲,步骤就是

  1. 在view as选择当前的模式
  2. 点击Vary for Traits选择编辑模式
  3. 查看受影响的模式
  4. 进入编辑模式进行编辑,然后结束编辑

这个时候就可以对约束进行编辑了。
选取确定之后整个SizeClasses选项框就变成蓝色的,也就是进入了编辑模式。点击任意位置能让弹窗消失。

蓝色表示进入了编辑模式

注意:
只有当您进入了编辑模式,才能对特殊模式下的约束进行增删改等操作,否则约束将添加到所有的模式下。

在view as里切换效果后,可在约束里通过点选切换Constrats选项,看到当前模式或者所有模式的约束。
但是通过切换只是查看此模式的约束,而不是进入当前模式的编辑状态

切换模式查看约束

四、Vary for Traits 怎么选

通过点击Vary for Traits进入编辑模式,弹出了Width和Height选项,前面打对号就锁定当前的这个属性。
锁定模式后,就可以开始编辑约束,这些约束就会在当前受影响的显示模式下生效。

比如已经锁定了当前模式为w:Regular h:Compact:
根据本文[二、SizeClasses的表示方法][SizeClasses表示与设备屏幕对应关系]可知,
锁定了w:Regular h:Compact模式后编辑的约束,将会对iphone的Plus机型横屏模式生效。

举几个例子来说明Vary for Traits 该怎么选:

1. 什么都不选

默认

什么都不选的时候,默认为(),即通用界面,所有尺寸设备通用。我们通过Device和Orientation可以组合出所有尺寸设备的横竖屏情况。

2. 在view as选择显示wC的时候选择Width

即竖屏模式下,选择Width,表示锁定当前Width的模式,即表示(C,*)。

wC时锁定Width

(C,*)的显示模式有(C,C)和(C,R),通过Size Class类型判断可以得到是20种:

  1. iPhone竖屏 (C,R)5种
  2. iPhone横屏 (C,C)4种
  3. iPad splitView下,显示区域小于2/3的,(C,R)11种

当然,编辑面板中的显示,受影响的模式确实为20种,可以通过点击查看受影响的模式有哪些。

3. 在view as上显示hC的时候选择Height

即横屏模式下,选择Height,表示锁定当前Height的模式,表示(*,C)。

hC时锁定Height

(*,C)的显示模式有(C,C)和(R,C),通过Size Class类型判断可以得到是26种:
原理一样,不再列举,自行动手查看结果。

自己动手,丰衣足食,其他情况不再列举...... 😊

UIStackView中的SizeClasse

在iOS9之后,Apple推出了UIStackView ,一个更方便的布局方式。UIStackView会管理其子视图的布局,并帮我们自动布局约束。也就是说,这些子视图能够适应不同的屏幕尺寸。
我们在这里不进行讨论UIStackView的用法。

UIStackView既然自动布局其子视图,那么是不是有关于SizeClasse的属性呢?

当然有了,比如最常见的需求,想竖屏的时候竖着显示,横屏的时候横着显示,只需要在UIStackView设置Axis点击左侧“+”添加一个SizeClasse的模式即可。

image.png

您是否发现了,在本文的截图里,在横竖屏模式下,除了布局不同,图片也是不同的,更多关于SizeClasse的操作秀,请移步:
iOS使用Assets配合SizeClasses横竖屏显示不同图片

DEMO代码下载:https://github.com/xueyongwei/SizeClassesDemo

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 197,099评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,846评论 2 374
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 144,146评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,789评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,656评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,467评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,870评论 3 389
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,500评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,790评论 1 293
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,828评论 2 314
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,628评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,449评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,881评论 3 300
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,077评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,376评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,879评论 2 343
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,089评论 2 338