iOS 11 之后 iPad 分屏适配探究

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

推荐阅读更多精彩内容