iOS 9之分屏多任务（Split View）

金田（github 示例源码）

      多任务（multitasking）算是iOS9中最引人瞩目的核心新特性了，以前越狱版用户就用过相似的插件，微软的 苏菲 （Windows Surface）系列也有分屏多任务的特性，可让用户能够同时运行2个或者多个App。iOS 9 中的多任务目前支持三种表现形式：临时出现和交互的滑动覆盖 (Slide Over)；真正的分屏同时操做两个 App 的分割视图 (Split View)；以及在其余 App 中能够进行视频播放的画中画 (Picture in Picture) 模式。

      在官网关于多任务的开发文档中，Apple有明确指出：绝大部分 App 都应当适配 Slide Over 和 Split View。且最新的XCode 7 Beta版新建立的Project，默认就是支持多任务滴~固然若是你的App只须要全屏体验（例如游戏类，或者实在不想维护适配更新老项目的代码 J），你能够在Info.plist 中添加 UIRequiresFullScreen 项并将其设为YES，从而禁止分屏功能。就是这么简单~~

图1 App 设置示意图

      目前只有支持iOS 9的部分设备可使用多任务功能，其中支持分割视图 (Split View)的设备只有目前性能最好的iPad Air 2 （& 以后的新发布设备）。而支持支持滑动覆盖和画中画两种模式的设备则较多，例如iPad mini 二、iPad mini 3 以及 iPad Air、iPad Air 2等。这个也比较好理解，毕竟是移动设备，仍是得考虑性能及用户体验。这里咱们暂时不讲画中画模式（实际上是项目中暂时没用到~）

      Slide Over功能默认是被激活的，用户可经过该功能调出屏幕右侧的悬浮视图（在从右到左的语言环境下位于屏幕的左侧），从而查看次要应用程序并与其进行交互。若是不能滑出悬浮视图，请确认”设置->通用->多任务->容许多个应用”选项是否开启。

图2 Setting 设置示意图

      在Slide Over区域以外靠近屏幕中间的位置有一个按钮，拖拽这个按钮就会进入分割视图 (Split View)模式。在Split View模式中，会呈现为两个并行的应用，用户能够查看、调整其大小，并与其进行交互。左侧的App是主要App，右侧的是次要App，将次要App拖动到最左边时，次要App变成主要App，而原先的主要App退出前台。目前 Split View支持的分屏比例有三个，分别为  1/二、1/三、2/3。妾觉得，Split View 才是真正的多任务，至少是2个能够并行运行&操做的App；而Slide Over则看上去有点假，是一个App覆盖在另一个App上面的。

图3 分割视图模式示意图

图4 分割视图模式示意图

 

      好，如今再回到扣腚过程当中~~

      若是是用XCode 7新建立的项目，那么恭喜你，按照Apple推荐的标准流程开始走吧，你会感恩的。若是须要作老项目升级适配的，而且Code中的坐标定位是写死的，那么请准备好湿巾纸，能够一边抹吐沫星子一边抹泪一边适配了，一想到咱们的PDF Reader系列要作适配，就以为心塞··，38度的暖夏也是寒冷的说·好，若是要激活多任务，你须要

1. 配置一个启动XIB做为启动页面，例如LaunchScreen.xib，配置给UILaunchStoryboardName就行了
2. App支持全部方向（UISupportedInterfaceOrientations），UIInterfaceOrientationPortrait, UIInterfaceOrientationPortraitUpsideDown, UIInterfaceOrientationLandscapeRight UIInterfaceOrientationLandscapeLeft，通通都配置上去吧
3. 尽情使用 自动布局（Auto Layout）吧
4. 尽情使用 Adaptive UI吧，像 Size Class，Dynamic Type神马的，通通来吧

 

Info.plist列子:

     <key>UILaunchStoryboardName</key>

     <string> LaunchScreen </string>

     <key>UISupportedInterfaceOrientations</key>

     <array>

           <string>UIInterfaceOrientationPortrait</string>

           <string>UIInterfaceOrientationPortraitUpsideDown</string>

           <string>UIInterfaceOrientationLandscapeLeft</string>

           <string>UIInterfaceOrientationLandscapeRight</string>

     </array>

 

      这里的Size Class有个部分须要注意，此前iPad的水平和垂直Size Classes老是“Regular”。随着分屏出现，这些会发生改变。下图显示了你的App会遇到用户操做iPad屏幕后不一样的Size Classes。从图中能够看出在垂直方向上不管横竖屏都是Regular布局，在水平方向上有Regular布局和Compact布局两种；所以在作界面适配时，要处理的Size Classes有w:Regular h: Regular和w:Compact h:Regular两种。

图5 视图分割布局种类示意图

      iOS 9分屏功能最麻烦的地方就是界面的自适应，须要使用Auto Layout和Size Classes来处理。若是你的App彻底作到自适应UI，那么实现分屏功能几乎不用作太多处理，用Xcode7从新编译下就OK。我写了一个iOS9分屏Demo，用XIB和纯代码两种方式实现自适应UI，你们能够参考下。至于项目开发用XIB仍是用纯代码，各有利弊，看你们我的习惯及项目状况来选择了。我比较同意唐巧在这篇文章中说到的作法。因为咱们公司项目大多都是协同开发，考虑到代码版本管理冲突的几率比较大以及代码复用问题，我本身项目中不多用到XIB / Storyboard。

     这里大概介绍下XIB的实现方式，先在XIB界面下方选择w:Regular h: Regular这种SizeClass，而后经过拖拽控件以及为这些控件添加合适约束和布局；接着选择w:Compact h:Regular这种SizeClass，添加新的约束和布局调整界面，这样就实现了界面的自适应，效果以下图。这里不详述SizeClass和AutoLayout处理方式，若是你对SizeClass和AutoLayout不太了解，能够看下这篇文章。

图6 Demo App界面设计

图7 Demo App界面设计

      用代码处理界面自适应的话，咱们能够根据当前的UIView 的 traitCollection 属性来获取当前的SizeClass类型，而后根据SizeClass类型来作UI布局。而且能够在UIViewController的 -willTransitionToTraitCollection:withTransitionCoordinator: 和 -viewWillTransitionToSize:withTransitionCoordinator: 被调用时获取新的SizeClass类型，而后调整为新的UI布局。UI布局主要是处理Views之间的约束关系来实现AutoLayout，若使用Apple原生的API来写Views的约束条件，代码量会比较多，界面布局的代码也会有些杂乱；你能够借助第三方库来写AutoLayout代码，这样能够减小不少代码，例如Masonry，PureLayout等。本文Demo中布局的代码大体以下：

- (void)willTransitionToTraitCollection:(nonnull UITraitCollection *)newCollection withTransitionCoordinator:(nonnull id<UIViewControllerTransitionCoordinator>)coordinator {

   

    if (UIUserInterfaceSizeClassCompact == newCollection.horizontalSizeClass) {

        [self layoutAllSubviews:YES];

    } else {

        [self layoutAllSubviews:NO];

    }

}

 

- (void) layoutAllSubviews:(BOOL)isCompactLayout {

    int padding = 20;

    if (isCompactLayout) {

        [self.greenView mas_remakeConstraints:^(MASConstraintMaker *make) {

            make.top.equalTo(superview.mas_top).offset(padding);

        }];

    } else {

        [self.greenView mas_remakeConstraints:^(MASConstraintMaker *make) {

            make.top.greaterThanOrEqualTo(superview.mas_top).offset(padding);

        }];

    }

}

 

      本文Demo运行的效果以下，在w:Compact h:Regular这种SizeClass状况下显示3排，每排一个View，在w: Regularh:Regular这种SizeClass状况下显示2排，第一排显示两个Views

图8 Demo视图分割示意图

图9 Demo视图分割示意图

 

几个小细节

1. UIScreen.bounds 和 UIWindow.bounds 的尺寸大小再也不相同，UIWindow可能只有屏幕的 1/2 或 1/3了
2. Size Class 是会发生变化的，文章上面有提到。在开发时须要考虑用户体验部分（若是没有设计师的，就自动忽略吧··），包括 适配屏幕大小的UI设计和尺寸变化的切换效果。能够试试transitionCoordinator 的 -animateAlongsideTransition: 来进行布局动画，让切换更加天然。
3. 若是你的App不使用Slide Over和Split View功能，那么你的App也不能出如今Slide Over 区域中，尽管你的App 运行在多任务环境中。
4. 须要考虑App支持的版本，若是还须要支持 iOS 6 神马的，作好哭得准备吧，版本判断之类是少不了的
5. 留意合理分配使用内存，监听 Memory Warning以便于释放 Cache 和没必要要的 View Controller，避免循环引用等等
6. 即便是Split View模式，App也得继续在各自的沙河（Sandbox）中运行，要实现真正意义上的App间互动，还有很长路要走~~

 

 

参考连接

https://developer.apple.com/library/prerelease/ios/documentation/WindowsViews/Conceptual/AdoptingMultitaskingOniPad/index.html#//apple_ref/doc/uid/TP40015145

https://www.hackingwithswift.com/read/31/5/ipad-multitasking-in-ios-9

http://www.cocoachina.com/ios/20150714/12555.html

   http://onevcat.com/2014/07/ios-ui-unique/

http://blog.devtang.com/blog/2015/03/22/ios-dev-controversy-2/

https://github.com/SnapKit/Masonry

https://github.com/smileyborg/PureLayout

 

版权全部，转载须注明做者（金田）及原文出处（原文）。