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

 

版權全部，轉載須註明做者（金田）及原文出處（原文）。