屏幕适配之Size Classes 2---分屏适配

欢迎加QQ群讨论:157672725

在上一期中我们了解了Size Classes的基本用法,这一期主要讲一下其在iOS9分屏适配中的作用。

  • iOS9分屏介绍
  • 项目如何开启分屏模式
  • Size Classes在分屏中的作用

iOS9分屏介绍

当初Surface分屏功能出现的时候,我就在想要是iPad也能分屏那该多好,所幸的是在iOS9上终于实现了。大家看看两家分屏的效果吧,是不是太像了呢,此处省略一些话。。。。。


surface分屏
iPad分屏

说实话,看到iOS的分屏那一刻我的心情是很复杂的。心里想着终于可以体验一下分屏了,但是又想了一下,啊啊啊啊啊,是不是又要重写很多代码了啊!废话有点多,那下面我们开始看看iOS的分屏吧。

首先是 Slide Over,简单来说,它是一个快速调用应用的功能。它能让你快速的从侧栏位置打开一个应用,进行操作,在完成后回到之前的应用,例如快速回复一条短信、或者记下一条备忘录等等。

Slide Over
Slide Over

接下来是 Split View 显然这是新功能中最有用的,因为他可以让你同时 “做两件事情”,虽然在这之前这招已经被 Windows 8.1 玩过了。它的操作方式与 Slide Over 类似,你仍需要先调用出 Slide Over,再通过滑动两个应用之间的空隙来完成分屏。

Split View
Split View

项目如何开启分屏模式

如果你是使用Xcode 7建立工程时,是默认支持Slide Over和Split View。
如果你从老的工程升级到iOS 9,需要通过以下的Xcode工程配置来支持Slide Over和Split View:

  • 设置BaseSDK 为 “Latest iOS ”

    BaseSDK

  • 提供LaunchScreen.storyboard 文件(不是在iOS 7以及更早版本中的.png图片文件)。

    LaunchScreen.storyboard

  • 设置支持所有朝向

    支持所有朝向


Size Classes在分屏中的作用

在上一期中,SizeClassDemo仅仅适配了iPhone。有读者问我那iPad怎么适配呢?那么下面我们就来谈谈iPad的适配。
首先,我们新建一个工程,然后在 w Compact h Regular的型下拖一个label,title设置为“宽:紧凑 高:常规”,在 w Regular h Regular的型下拖一个label,title设置为“宽:常规 高:常规",如下图所示。

宽:紧凑 高:常规
宽:常规 高:常规

这个时候,选择模拟器 iPad air2运行,会发现全屏状态下它显示“宽:常规 高:常规",我们分屏操作一下,可以发现,它显示成了“宽:紧凑 高:常规”,如下图所示。

全屏状态
分屏状态
分屏状态

由该Demo我们知道了iPad的适配、分屏适配与iPhone类似,关键在于型的选择。再此我补充一下型的选择的另一个知识点:
当我们在选择型的时候拖动鼠标会发现,有绿点在变化。其实该绿点表示我们选择的这个型能适应其他的型(继承关系),直接上图吧,看得比较清楚。
如下图,我选中w Compact h Any的时候有三个绿点【w Compact h Compact , w Compact h Any ,w Compact h Regular】这就表示该型同样支持另外两个型的适配,这也就是为什么叫Any的原因了。


型的选择

需要注意的是在选型的时候尽量避免"绿点冲突",举个例就是:不要适配了w Compact h Any型,再去适配w Compact h Regular型了,因为 h Any已经可以包括Regular了,用程序上去理解就是尽量不要override了。
比如,我们在demo的基础上在w Compact h Any的型下拖一个label,title设置为“宽:紧凑 高:Any”如下图


宽:紧凑 高:Any

这个时候运行一下,分屏操作可以发现如下图所示的问题
分屏

另外我们可以发现,在适配iPad的时候有一个问题,就是ipad的宽无论是在横屏还是竖屏下宽和高都是Regular的,如下图所示所有适应iPad的型都是同时适应横竖屏的。

iPad的型
iPad的型
iPad的型

那如果要适配iPad的旋转的时候布局不同应该怎么做呢?只能通过代码?希望知道的高手告知,有兴趣的朋友可以加群讨论。


小结一下

  • 分屏的适配的关键同样在于型的选择
  • 型的选择时注意绿点,尽量避免“绿点冲突 ”
  • 如果要适配iPad的旋转的时候布局不同应该怎么做呢?只能通过代码?
  • Demo地址:https://github.com/catchZeng/SizeClassDemo2
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容