iOS 9之分屏多任務（multitasking）

標籤：

金田（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 2、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/2、1/3、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

 

著作權，轉載須註明作者（金田）及原文出處（原文）。

iOS 9之分屏多任務（multitasking）