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 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代碼,這樣可以減少很多代碼,例如MasonryPureLayout等。本文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

 

版權所有,轉載須注明作者(金田)及原文出處(原文)。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM