[特斯拉組件]ios高性能PageController

来源:http://www.cnblogs.com/bugly/archive/2017/12/04/7976264.html
-Advertisement-
Play Games

本文來自於騰訊Bugly公眾號(weixinBugly),作者:sparrowchen,未經作者同意,請勿轉載,原文地址: http://mp.weixin.qq.com/s/hBgvPBP12IQ1s65ru paWw 1.組件介紹 Page是企鵝FM研發的分頁組件,包括支持分頁非交互切換(通過方 ...


本文來自於騰訊Bugly公眾號(weixinBugly),作者:sparrowchen,未經作者同意,請勿轉載,原文地址:
http://mp.weixin.qq.com/s/hBgvPBP12IQ1s65ru-paWw

1.組件介紹

Page是企鵝FM研發的分頁組件,包括支持分頁非交互切換(通過方法調用導航切換)和交互切換(屏幕的手勢滑動),多個分頁Controller和View的管理。

1.1需求背景

為什麼棄用UIPageViewController,首先介紹一下UIPageViewController,這是系統為開發者定製的分頁組件,提供了兩種分頁切換的效果,一是滑動 二是翻頁。且提供了前後切換的回調。

a) UIPageViewController在iOS8以下的系統運行是有問題的,可以參考stackFlow上的癥狀描述https://stackoverflow.com/questions/12939280/uipageviewcontroller-navigates-to-wrong-page-with-scroll-transition-style/12939384#12939384

This is actually a bug in UIPageViewController. It occurs only with the scroll style (.Scroll) and only after calling setViewControllers:direction:animated:completion: with animated:YES. Thus there are two workarounds:

Don't use UIPageViewControllerTransitionStyleScroll.

Or, if you call setViewControllers:direction:animated:completion:, use animated:NO.

To see the bug clearly, call setViewControllers:direction:animated:completion: and then, in the interface (as user), navigate left (back) to the preceding page manually. You will navigate back to the wrong page: not the preceding page at all, but the page you were on when setViewControllers:direction:animated:completion: was called.

The reason for the bug appears to be that, when using the scroll style, UIPageViewController does some sort of internal caching. Thus, after the call to setViewControllers:direction:animated:completion:, it fails to clear its internal cache. It thinks it knows what the preceding page is. Thus, when the user navigates leftward to the preceding page, UIPageViewController fails to call the dataSource method pageViewController:viewControllerBeforeViewController:, or calls it with the wrong current view controller.

大意是說使用.Scroll的時候,UIPageViewController做了內部緩存的排序,當調用

setViewControllers:direction:animated:completion:

時 它認為自己知道了前一個的分頁存在,當調用前一個頁面的時候,就不會去調用dataSource的方法。

b) UIPageViewController的DataSource和Delegate的介面過於簡單,對於比較複雜的情況(比如除了分頁以外還有其他View的情況下)無法處理。參照下麵的例圖,我有一個tab下麵有小黃條,跟著手勢橫向滑動的同時也橫向滑動,這裡系統的UIPageViewController無法支持。其外,我還需要子頁面縱向滑動時候去修改Cover和Tab的frame。所以UIPageViewController無法滿足比較複雜的需求。

c) 低配的機器會產生卡頓問題,因為系統的UIPageViewController,在快速切換的時候,會釋放掉不用的頁面,所以在快速回切的時候會造成卡頓,可以參考下麵的性能測試。

綜上所述,棄用了系統的UIPageViewController。

1.2使用說明

使用非常簡單,繼承組件的類,實現相應的delegate和datasourc就可以了。

Page的例圖如下:
Alt text

頁面層次關係如下:
Alt text

圖中由一個圖片,3個欄目 (詳情,節目,評論)和一個List組成。可以分為三個層次,Cover,Tab和Page。

Page組件層次關係如下,
Alt text
圖中的ShowListController是節目分頁,AlbumListController是專輯分頁.

2.組件架構設計

2.1 架構介紹

類圖如下:
Alt text

簡要說明下各個協議的作用:

FMPageDataSource, 提供子頁面,子頁面的個數,子頁面展示的frame給PageController。

FMPageDelegate, 提供頁面交互切換和非交互切換的回調給上層以及頁面的縱向滑動和橫向滑動的contentoffset給上層。

FMTabDataSource, 提供TabView的具體展示效果。

FMTabDelegate, 提供TabView的點擊響應給上層。

FMCoverController, 提供CoverView給CoverController.

其中,FMTabController預設遵循FMTabDataSource,FMTabDelegateSource,FMPageDataSource,FMPageDelegate協議。FMCoverController遵循FMCoverDatasource協議。

2.2 介面設計

介面遵循高內聚和低耦合的特性,只把Delegate和DataSource開放給上層,同時做介面分離,把Page,Tab,Cover特性的分離。 代碼如下:

@interface FMTabController : FMBusinessViewController <FMPageControllerDataSource, FMPageControllerDelegate, FMTabDataSource, FMTabDelegate>

@interface FMCoverController : FMTabController <FMCoverDataSource>

2.3 Child頁面的生命周期管理和切換。

1.UIScrollView支持分頁效果,手勢處理及交互操作多個回調方法可以實現頁面的切換效果。

2.生命周期管理有兩種方式 a.頻繁地add/remove ChildController b.使用下麵的代碼實現生命周期的管理:

1)shouldAutomaticallyForwardAppearanceMethods
2)beginAppearanceTransition: animated:
3)endAppearanceTransition

a.會產生一個重大缺陷,就是頻繁切換的卡頓問題。

b.不需要頻繁地去調用add/remove,1)方法避免了 add/remove產生的生命周期,2)和3)保證了開發者可以自己控制ChildController的生命周期。

Page的生命周期圖如下:
這裡寫圖片描述

初次或者reloadPage
這裡寫圖片描述

交互切換和非交互切換

2.4 性能問題擴展

以下通過Iphone5 模擬器 10.3系統,與UIPageViewController做了性能上的對比。
UIPageViewController 快速切換記憶體占用情況
圖1 UIPageViewController 快速切換記憶體占用情況

UIPageViewController 快速切換GPU占用情況
圖2 UIPageViewController 快速切換GPU占用情況

Page組件快速切換記憶體占用情況
圖3 Page組件快速切換記憶體占用情況

Page組件快速切換GPU占用情況
圖4 Page組件快速切換GPU占用情況

從上圖中記憶體占用圖標的波動情況可以看出UIPageViewController在快速切換的時,會儘可能快地釋放掉不用的controller及其view(主要是view)以保證記憶體占用較小,所以圖標指標先才會頻繁的波動,與UIPageViewController作對比,Page組件用空間換時間的策略避免頁面卡頓。

3.技術實現的難點

從技術上看,可以分為以下四個點

3.1 介面的設計。

介面的設計,是整個架構的核心,如果開始設計不好,會導致後續的擴展就是加屬性和加方法,導致代碼越來越龐大,以致無法維護,所以儘量保證簡潔,職能單一,可擴展。

起初為了讓delegate和datasource可以從Controller分離出去,把delegate和datasource都暴露了出去,但這樣相當於多了5個屬性,對於上層來說並不便於理解這些介面,仿照UITableViewController,由繼承的方式實現這些協議,讓介面更加簡潔。

3.2 頁面縱向滑動跟隨Tab和Cover一起滑動。

通過上面的動態圖,可以知道,Page組件有這樣一個功能,子頁面縱向滑動會跟隨Tab和Cover一起向上滑動,其中cover的滑動的實現是監聽ChildController的ScrollView的contentOffset,修改Tab的height或y。Scrollview的滑動有一個難點,怎樣保證ScrollView的向下滑動的反彈處緊貼Tab,而Scrollview又可以向上滑動到導航欄。

首先Scrollview的可見範圍是整屏的,也就是設置frame為整屏,Scrollview滑動的範圍,就由ContentInset,ContentOffset 共同決定。因為我們知道UIScrollView的滑動範圍會緊貼scrollView的bounds。所以首先,修改ContentInset的Top為-tabH-tabY,可以保證向下滑動到Tab的下邊緣處反彈,又由於frame是整屏的,向上滑動時候就可以滑動導航欄,代碼如下:

scrollView.contentInset =  UIEdgeInsetsMake([self.dataSource pageTop], contentInset.left, contentInset.bottom, contentInset.right);

scrollView.frame = CGRectMake(0,0,Screen_Width,Screen_Height)

其中的pageTop就是tab的下邊緣處。

3.3不相鄰頁面切換的問題

這裡寫圖片描述

不相鄰頁面的非交互切換會閃過中間的頁面,產生不好的用戶體驗,本組件的解決方法是

非交互切換,模擬切換的動畫,這裡需要考慮的一個複雜情況是第一次動畫還未結束就開始第二次,這時候需要提前結束第一次動畫。修改後的效果圖如下,
這裡寫圖片描述

3.4平衡性能的問題。

因為Page要管理多個controller和view,如果子頁面到1000,甚至10000個怎樣去處理。比如微信閱讀的一本書就可能有10000頁。所以這裡如果全部都保存就可能產生一個問題,記憶體會不會過大。

觀察UIPageViewController,它到一定的記憶體限制,會主動去釋放很久沒翻過的頁面。所以這裡,可以使用LRUCache的機制,只保存一定數量的頁面。由於本應用並不涉及到過多的子頁面,考慮的時間花銷和記憶體,全部保存了所有頁面。


demo地址:https://github.com/xichen744/SPPage


本文來自於騰訊Bugly公眾號(weixinBugly),未經作者同意,請勿轉載,原文地址:
http://mp.weixin.qq.com/s/hBgvPBP12IQ1s65ru-paWw


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 觸發器是一種特殊的存儲過程,和存儲過程和存儲函數一樣是一個pl/sql程式塊,觸發器是不能接受參數,不能顯示調用,只是隨著事件觸發隱式運行的存儲過程程式塊。 ...
  • 一、背景 由於項目的業務是不斷往前跑的,所以難免資料庫的表的量會越來越龐大,不斷的擠占硬碟空間。即使再大的空間也支撐不起業務的增長,所以定期刪除不必要的數據是很有必要的。在我們項目中由於不清理數據,一個表占的空間竟然達到了4G之多。想想有多可怕... 這裡介紹的是用MySQL 建立一個定時器Even ...
  • iOS UILabel控制項預設文字位置是居中的,如圖所示: 但是我們經常碰到這樣的需求,希望文字向上置頂,或者向下置底,但是很遺憾,iOS API中並沒有提供相應的屬性和方法,需要我們手動設置。 利用 分類(category)為UILabel添加屬性 isTop 和 isBottom來控制文字是否置 ...
  • 一,工程圖。 二,代碼。 ...
  • Android文件操作 私有文件 備註 因為手機內部存儲的根目錄是只讀的,所以需要根據規範(/data/data/報名/... )創建文件到APP私有文件夾 filesDir (data/data/包名/files) 用來保存重要的配置文件 cacheDir (data/data/包名/cache) ...
  • iOS-CYLTabBarController【好用的TabbarController】 用TabbarController進行模塊分類和管理,這裡推薦一個CYLTabBarController,只需兩個數組就可以使用和管理; 1.導入CYLTabBarController 使用cocoapods導 ...
  • 針對屏幕上的一個View組件,Android是如何區分應當觸發onTouch事件還是onClick事件? ...
  • 本文來自於騰訊Bugly公眾號(weixinBugly),作者:sonialiu,未經作者同意,請勿轉載,原文地址:http://mp.weixin.qq.com/s/W1_0VrchCO50owhJNmJnuQ | 導語 本文主要是對iOS 11下企鵝 FM APP中tableView內容下移20 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...