iOS 11 之后 iPad 分屏适配探究
2018-04-24 本文已影响574人
居然是村长
[toc]
体验分屏
分屏方式就是：打开第一个程序，上滑展示程序坞，按住第二个程序拖入屏幕（此时是悬浮模式），悬浮模式顶部‘-’长按拖动可以实现分屏模式（也可以用于切换）
分屏模式与悬浮模式可以共存，也就是可以同时开 3 个程序，在一个屏幕上
mac 分屏，长按左上角绿色那个就行（按一下是全屏）
开发问题
- 需要使用 launch Screen File 才行，使用 Launch Images Sourc 是不行的（坑了好久，网上也搜不到什么答案）
- 如果要用到这个分屏，自动布局就要求很牛逼了（关于自动布局，又可以进一步提升）
- iOS 11 之前的分屏（悬浮分屏），宽度基本是定死的（320 或 375）
- iOS 11 之后，有 2种分屏，一种就是悬浮分屏；另一种是真分屏，同时使用 APP，会存在 3 中分配方式（小+大、大+小、平分）（注：并不是平分屏幕，因为中间有个分割线，实测为 10pt）
竖屏时，只有左右分屏，小的部分为 320 或者 375（就是塞了个 5s 或者 8 的屏幕宽度）
横屏时，存在平分，除去分割线之后平分
xcode 9.3 已经在 sb 中体现了，分屏预览，直接用 sb 开发也是很有好处啊，为啥都不喜欢呢，不觉得冲突很多啊
- 分屏得注意（不要以 pad 的尺寸，写死了一些约束值）（以前都是以屏幕尺寸来判断屏幕尺寸的，在分屏的情况下可能不适用了，得想办法根据当前视图大小来适配了）
- 如果开发 iPhone，不支持 iPad 的话，APP 在 iPad 上依旧可以打开，但是不能使用分屏的，那么就不用仔细适配（至少保证能用，不然审核还是不过）
初探
分辨率表
- iPhone
| 设备 | 开发尺寸 | 倍数 | sizeClass |
|---|---|---|---|
| 竖屏 | |||
| iPhone4/4s | 320x480 | @2x | CR |
| iPhone5/5s/se | 320x568 | @2x | CR |
| iPhone6/7/8 | 375x667 | @2x | CR |
| iPhone6+/7+/8+ | 414x736 | @3x | CR |
| iPhoneX | 375x812 | @3x | CR |
| 横屏 | |||
| iPhone4/4s | 480x320 | @2x | CC |
| iPhone5/5s/se | 568x320 | @2x | CC |
| iPhone6/7/8 | 667x375 | @2x | CC |
| iPhone6+/7+/8+ | 736x414 | @3x | RC |
| iPhoneX | 812x375 | @3x | CC |
- iPad
| 设备 | 开发尺寸 | 倍数 | sizeClass |
|---|---|---|---|
| 竖屏 | |||
| iPad 7.9/9.7 | 768x1024 | @2x | RR |
| iPad 10.5 | 834x1112 | @2x | RR |
| iPad 12.9 | 1024x1366 | @2x | RR |
| 横屏 | |||
| iPad 7.9/9.7 | 768x1024 | @2x | RR |
| iPad 10.5 | 834x1112 | @2x | RR |
| iPad 12.9 | 1024x1366 | @2x | RR |
- iPad 分屏
| 设备 | 开发尺寸 | 倍数 | sizeClass |
|---|---|---|---|
| iPad 7.9/9.7 横屏 大 | 694x768 | @2x | RR |
| iPad 7.9/9.7 横屏 中 | 507x768 | @2x | CR |
| iPad 7.9/9.7 横屏 小 | 320x768 | @2x | CR |
| iPad 7.9/9.7 竖屏 大 | 438x1024 | @2x | CR |
| iPad 7.9/9.7 竖屏 小 | 320x1024 | @2x | CR |
| iPad 10.5 横屏 大 | 782x834 | @2x | RR |
| iPad 10.5 横屏 中 | 551x834 | @2x | CR |
| iPad 10.5 横屏 小 | 320x834 | @2x | CR |
| iPad 10.5 竖屏 大 | 504x1112 | @2x | CR |
| iPad 10.5 竖屏 小 | 320x1112 | @2x | CR |
| iPad 12.9 横屏 大 | 981x1024 | @2x | RR |
| iPad 12.9 横屏 中 | 678x1024 | @2x | RR |
| iPad 12.9 横屏 小 | 375x1024 | @2x | CR |
| iPad 12.9 竖屏 大 | 639x1366 | @2x | CR |
| iPad 12.9 竖屏 小 | 375x1366 | @2x | CR |
100% 使用自动布局 ？
- 想要针对性布局肯定不靠谱啊
- 参考 h5 使用流动布局
宽：完全按比例，包括间隔，使用容器百分制宽度
高：从上往下堆叠，下面留白，适当使用 footer
字体
- 不方便，只能特殊设置，很难受，考虑别的办法
使用 sizeClass
- iOS 8 就开始有了，现在用很舒服，以前基本没用过啊
- width：compact，regular，any
- height：compact，regular，any
苹果的分类
- 按分类补充了上面的分辨率表
- 简单理解：
类似手机：CR
类似平板：RR
手机横屏：CC
特殊 plus 横屏：RC
代码实现
- 纯代码：使用
UITraitCollection类即可，已经更新在 UIKit API 部分 - sb：很方便，大部分属性边上就可以
+，跟按钮一样设置状态即可
相关思考
- 根据苹果的分类，compact，regular，any
- 组合后就是 4 种
- 那么不论是 UI 适配，还是 字体 适配等， 都使用统一的分类适配方案即可
- 如果 iPhone 仅竖屏，iPad 4 周旋转，只需要 2 套 适配方案 CR 和 RR
总结
- iOS 11 之后，iPad 有完全分屏之后，sizeClass 就十分有用，仅 iPad 上就需要 2 中布局，仅使用设备判断的方式，肯定不满足适配要求
- 使用 iPhone 竖屏，iPad 4 周旋转，适配 CR 和 RR 2 套方案即可适配 iPhone 和 iPad，而且支持 分屏
- 针对 iPhone 内部 5、6、6p、X 的特殊适配另讲
后续问题
- iPad 横版的话，宽度特别大，跟竖屏的用一个排版得难看，一般会变成左右排版
- 仅根据 sizeClass 又不好判断，再根据设备旋转方向适配，又是一条不归路
- 如果 iPad 版统一搞成横版好像效果也还不错，具体情况再说
- 或者与浏览器一样 2 边留白
