版本记录
| 版本号 | 时间 |
|---|---|
| V1.0 | 2018.04.15 |
前言
iOS中的视图加载可以有两种方式，一种是通过xib加载，另外一种就是通过纯代码加载。它们各有优点和好处，xib比较直观简单，代码比较灵活但是看着很多很乱，上一家公司主要风格就是用纯代码，这一家用的就是xib用的比较多。这几篇我们就详细的介绍一个xib相关知识。感兴趣的可以看上面写的几篇。
1. xib相关（一） —— 基本知识（一）
2. xib相关（二） —— 文件冲突问题（一）
3. xib相关（三） —— xib右侧标签介绍（一）
4. xib相关（四） —— 连线问题（一）
5. xib相关（五） —— 利用layout进行约束之界面（一）
6. xib相关（六） —— 利用layout进行约束之说明和注意事项（二）
7. xib相关（七） —— Storyboard中的segue （一）
认识一下Size Classes
什么是Size Classes？
size classes也是出现在iOS8的功能，.xib文件也是可以使用的，但大部分情况还是基于SB来使用，从xcode6开始我们新建的xib或SB文件中对应的View下方显示wAny hAny，点击后发现是可以选择的，选择不同的情况，View又变成了不同的形状，这就是size classes。
也可以这么理解，size classes就是对设备的屏幕尺寸进行了抽象，宽高都分别用Regular、Compact来表示，我们其实不用太在意名称，只知道，以后不同的设备或者不同的状态（横竖屏）可以由这种描述来表示即可。
1. 模型
下面我们看一下Size Classes模型。
其中，竖屏模型Width Compact(C) Height Regular(R)对应下面
竖屏模型
横屏不带Plus是Width Compact(C) Height Compact(C)。
横屏不带Plus
横屏带Plus为Width Regular(R) Height Compact(C)。
横屏带Plus
2. 继承性
- 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)
不同设备的Size Classes的表示
下面我们就看一下不同设备的size classes的表示。
-
iPhone4S、iPhone5/5s、iPhone6、iPhone6s、iPhoneSE、iPhone X、iPhone7、iPhone8- 竖屏：
(w:Compact h:Regular) - 横屏：
(w:Compact h:Compact)
- 竖屏：
-
iPhone6P、iPhone6sP、iPhone8P、iPhone7P -
竖屏：
(w:Compact h:Regular) -
横屏：
(w:Regular h:Compact) -
iPad- 竖屏：
(w:Regular h:Regular) - 横屏：
(w:Regular h:Regular)
- 竖屏：
这里就会发现：
- 竖屏手机都是
(w:Compact h:Regular)，如果我们不适配横屏，或者iPad，只做竖屏iPhone显示的话，size classes并没有什么用。 - 根据w和h不同的搭配，是不能确定具体的机型的。
利用Size Classes进行横竖屏适配
1. Size Classes功能开启
xcode9.2以后，点击SB面板看一下下面
可以看见默认就是竖屏的，点击红色边框位置，弹出下面的操作面板。默认不做任何操作就是全屏幕做的适配，也就是屏幕的竖屏和横屏都存在约束。
点击Vary for Traits，弹出下面对话框
可以看见这里width和height是没有勾选的状态，它们是做什么用的呢？
width和height前面打对号就以为这这个属性为Compact，也就是说你选取Width不选取Height 就是竖屏，选取Height不选取Width就是Plus横屏，两个都选取就是不带Plus横屏。
这里两个我都选择了，也就是非Plus手机的竖屏。
下面就是非Plus手机的横屏。
需要注意的一点是，如果想要在横竖屏之间空间拥有不同的位置摆放的话，一定要先进入编辑模式也是是选择框变蓝，然后在添加约束。
2. 适配过程
首先，我们在面板上拖进去一个控件，方便观察设置个背景色。
然后我们选择竖屏，点击Vary for Traits。
在弹出的框中选择width
下面就给这个界面的元素设置约束，如下所示。
设置好了以后就点击Done Varying按钮，完成了竖屏的界面的适配。
在iPhoneX模拟器上运行，可以发现，适配的可以，如下图所示。
竖屏
下面我们command + 左箭头，看一下横屏情况。
横屏
可以，横批适配的不对，这就需要我们在横屏上进行适配。
点击Done Varying按钮，选择height。
下面就对横屏进行约束和适配
运行模拟器，观察横屏情况
可见，横屏也实现了适配。
参考文章
1. 关于iOS10 SizeClasses应用横屏各型号适配
2. iOS 10可视化编程之sizeclass(Vary for Traits)(3)
后记
本篇主要介绍了Size Classes相关，感兴趣的给个赞或者关注~~~
网友评论