［テスラコンポーネント］ios高性能PageController
6610 ワード
本稿は騰訊Bugly公衆号から来ました.作者:sparrowchen、作者の同意なしに転載しないでください.http://mp.weixin.qq.com/s/hBgvPBP12IQ1s65ru-paWw
1.コンポーネント紹介
PageはペンギンFMが開発した改ページコンポーネントで、改ページの非インタラクティブ切り替え(ナビゲーションの呼び出しによる切り替え)とインタラクティブ切り替え(画面のジェスチャースライド)をサポートし、複数の改ページControllerとViewの管理を含む.
1.1需要背景
なぜUAPPageView Controllerを使うのか、まずUAPPageView Controllerを紹介します.これはシステムが開発者のためにカスタマイズした改ページコンポーネントで、二つの改ページの効果を提供します.また、前後切り替えのコールバックが提供されています.
a)UAPPageView ControllerはiOS 8以下のシステム運行に問題があり、stackFlow上の症状を参照して説明することができる.https://stackoverflow.com/questions/12939280/uipageviewcontroller-navigates-to-wrong-page-with-scroll-transition-style/12939384#12939384
This is actually a bug in UPageView Controller.It occurs only with the scroll style(.Scrroll)and only after careling set View Controller:direction:animation:with animation:YES.Thus Careworlew
Don't use UAPPageView Controller TransitionStyle Scrroll.
Or,if you call set View Controlles:direction:animation:use animation:NO.
To see the bug clearly、cal set View Conttrtrollers:direction:animted:comppletion:and then、in the interface、naviate left(back)to the preceeedpaagmasully.You will navite gate back thethethethe attttparereree panese paree parereeeeetttttttttttttttttparerereree e e e e e e parerererererererererererererereree e e e e e e e e e e e e e e e e e e e parererererererere: completteion:was caled.
The reason for the bug apears to be that、when using the scroll stye、UUUPageView Conttrler does some some of internal caching.Thus、afterthe cal the cal to set ViewiwiwiwiConttrtrolrs:directctctctctctction:directctctctctctctctctctctctctctctction:anctction:anctctction:anction:anctction:anctctctctction:antititititititititititititititititititititititititititititict:ans:an: an: angates leftward to the preceding page,UPageView Controller fails to call the dataSource method pageViewint Controller:view Controller:vieBeforeve Viewiwiwiwiwiwith the wrong current view controler.
Screllを使用する場合、UAPPageView Controllerは内部キャッシュの並べ替えを行います.呼び出し時に
b)UAPPageViewControllerのDataSourceとDelegateのインターフェースは簡単すぎて、比較的複雑な場合(例えば、改ページ以外に他のViewがある場合)は処理できません.以下の例図を参照してください.tabの下に小さな黄色の条があります.ジェスチャーとともに横方向にスライドします.ここではUAPPageView Controllerはサポートできません.また、サブページを縦にスライドさせる時にカバーとTabのフレームを修正したいです.だからUAPPageView Controllerは複雑な需要を満たすことができません.
c)低配合のマシンはカートン問題が発生します.システムのUAPPageView Controllerは、急速に切り替わると、不要なページが解放されますので、クイックカットの際には、次の性能テストを参照してください.
以上のように、システムのUAPPageView Controllerを廃棄しました.
1.2使用説明
非常にシンプルで、コンポーネントのクラスを継承し、それぞれのdelegateとdatasourcを実現すればいいです.
Pageの例図は以下の通りです.
ページレベルの関係は以下の通りです.
図は1つの写真、3つのコラム(詳細、番組、コメント)と1つのListから構成されています.三つの階層に分けられます.カバー、Tab、Page.
Pageコンポーネントの階層関係は以下の通りであり、図中のShow ListControllerは番組別ページであり、AlbumListControllerはアルバム別ページである.
2.コンポーネントアーキテクチャ設計
2.1アーキテクチャ紹介
クラス図は以下の通りです
各プロトコルの役割を簡単に説明します.
FMPage Data Sourceは、サブページ、サブページの個数、サブページに展示されているframeをPageControllerに提供します.
FMPage Delegateは、ページの相互交換と非インタラクティブ切り替えのフィードバックを上位層とページの縦スライドと横スライドのcontenttoffsetを上位層に提供します.
FMTabDataSourceはTabViewの具体的な展示効果を提供します.
FMTabDelegateは、TabViewのクリック応答を上位層に提供します.
FMCoverControllerは、CoverViewをCoverControllerに提供する.
ここで、FMT abControllerデフォルトはFMTabDataSource、FMTabDelegateSource、FMPage DataSource、FMPage Delegateプロトコルに従う.FMCoverControllerは、FMCover Datasourceプロトコルに従う.
2.2インターフェース設計
インターフェースは高い凝集と低い結合の特性に従って、DelegateとDataSourceだけを上層部に開放して、同時にインターフェースの分離をして、Page、Tab、Cover特性の分離をします.コードは以下の通りです
1.UScrrollViewは改ページ効果をサポートしています.ジェスチャー処理とインタラクティブ操作で複数のコールバック方法がページの切り替え効果を実現できます.
2.ライフサイクル管理には2つの方式があります.a.頻繁にadd/remove ChildController b.次のコードを使ってライフサイクルの管理を実現します.
b.頻繁にadd/removeを呼び出す必要はなく、1)方法はadd/removeによるライフサイクルを回避し、2)と3)開発者がChildControllerのライフサイクルを自分でコントロールできることを保証している.
Pageのライフサイクル図は以下の通りです.
初めてまたはreloadPage
インタラクティブ切り替えと非インタラクティブ切り替え
2.4性能問題拡張
以下はIphone 5シミュレータ10.3システムにより、UAPPageView Controllerと性能の比較を行った.UAPPageView Controllerは急速にメモリの占有状況を切り替えます.
UAPPageView ControllerはGPUの占有状況を素早く切り替えます.
Pageコンポーネントのメモリ占有率を素早く切り替えます.
PageコンポーネントのGPU占有状況を素早く切り替えます.
上の図のメモリ占有アイコンの変動状況から、UAPPageView Controllerは急速な切り替えの際に、必要でないcontrollerとviewをできるだけ速く解放して、メモリの占有率が小さいことを保証します.したがって、アイコンの指標は頻繁に変動します.UAPPageView Controllerと比較して、Pageコンポーネントは空間的に時間を換える戦略でページの詰まりを回避します.
3.技術実現の難しさ
技術的には、次の4つの点に分けることができます.
3.1インターフェースの設計.
インターフェースの設計は、全体の構造の核心であり、もし設計がよくないなら、後続の拡張は属性とプラス方法であり、コードがますます膨大になり、維持できなくなります.
最初はdelegateとdatasourceをControllerから分離するためにdelegateとdatasourceを暴露しましたが、これは5つの属性が多くなりました.上層にとってはこれらのインターフェースを理解するのが難しく、UItable Viewintrollerをまねて、継承方式によってこれらの協議を実現します.
3.2ページを縦方向にスライドさせ、Tabとカバーをフォローしてスライドさせる.
上の動態図を通じて、PageコンポーネントはTabとCoverと一緒に上にスライドする機能を持っています.ここで、カバーのスライドの実現はChildControllerのSrollViewのcontentOffsetを監督し、Tabのheightまたはyを修正します.Scrllviewのスライドには難しい点がありますが、ScrllViewの下方スライドのリバウンドをどのように保証しますか?
まずScrllviewの可視範囲はフルスクリーン、つまりフルスクリーン、Scrollviewスライドの範囲を設定することで、ContentInset、ContentOffsetが共同で決定します.UScrrollViewの滑り範囲はscrollViewのboundsにぴったりくっつくと知っています.まず、ContentInsetのTopを修正すると-tabH-tabYとなり、Tabの下縁に下にスライドしてバウンスすることができます.また、frameはフルスクリーンなので、上にスライドするとナビゲーションバーがスライドできます.コードは以下の通りです.
3.3隣接しないページ切り替えの問題
隣接していないページの非インタラクティブ切り替えは、中間ページをフラッシュして、よくないユーザー体験を生成します.
非インタラクティブ切り替え、アナログ切り替えの動画、ここで考慮しなければならない複雑な状況は初めてのアニメが終わっていないうちに二回目が始まります.修正後の効果図は以下の通りです.
3.4バランス性能の問題.
Pageは複数のcontrollerとviewを管理しますので、もしサブページが1000になるなら、さらに10000個はどう処理しますか?例えば、WeChatで読む本は一冊で10000ページあります.ここは全部保存すれば問題が発生します.メモリは大きすぎますか?
UAPPageView Controllerを観察して、それは一定のメモリの制限に着いて、自発的に長い間ひっくり返ったことがないページを釈放します.したがって、ここでは、LRUCacheの機構を使用して、ページ数だけを保存することができます.本アプリケーションはあまり多くのサブページには触れていないので、時間を考慮してメモリとメモリを使い、すべてのページを保存しています.
demo住所:https://github.com/xichen744/SPPage
この記事は騰訊Bugly公衆番号から来ています.作者の同意なしに転載しないでください.http://mp.weixin.qq.com/s/hBgvPBP12IQ1s65ru-paWw
1.コンポーネント紹介
PageはペンギンFMが開発した改ページコンポーネントで、改ページの非インタラクティブ切り替え(ナビゲーションの呼び出しによる切り替え)とインタラクティブ切り替え(画面のジェスチャースライド)をサポートし、複数の改ページControllerとViewの管理を含む.
1.1需要背景
なぜUAPPageView Controllerを使うのか、まずUAPPageView Controllerを紹介します.これはシステムが開発者のためにカスタマイズした改ページコンポーネントで、二つの改ページの効果を提供します.また、前後切り替えのコールバックが提供されています.
a)UAPPageView ControllerはiOS 8以下のシステム運行に問題があり、stackFlow上の症状を参照して説明することができる.https://stackoverflow.com/questions/12939280/uipageviewcontroller-navigates-to-wrong-page-with-scroll-transition-style/12939384#12939384
This is actually a bug in UPageView Controller.It occurs only with the scroll style(.Scrroll)and only after careling set View Controller:direction:animation:with animation:YES.Thus Careworlew
Don't use UAPPageView Controller TransitionStyle Scrroll.
Or,if you call set View Controlles:direction:animation:use animation:NO.
To see the bug clearly、cal set View Conttrtrollers:direction:animted:comppletion:and then、in the interface、naviate left(back)to the preceeedpaagmasully.You will navite gate back thethethethe attttparereree panese paree parereeeeetttttttttttttttttparerereree e e e e e e parerererererererererererererereree e e e e e e e e e e e e e e e e e e e parererererererere: completteion:was caled.
The reason for the bug apears to be that、when using the scroll stye、UUUPageView Conttrler does some some of internal caching.Thus、afterthe cal the cal to set ViewiwiwiwiConttrtrolrs:directctctctctctction:directctctctctctctctctctctctctctctction:anctction:anctctction:anction:anctction:anctctctctction:antititititititititititititititititititititititititititititict:ans:an: an: angates leftward to the preceding page,UPageView Controller fails to call the dataSource method pageViewint Controller:view Controller:vieBeforeve Viewiwiwiwiwiwith the wrong current view controler.
Screllを使用する場合、UAPPageView Controllerは内部キャッシュの並べ替えを行います.呼び出し時に
setViewControllers:direction:animated:completion:b)UAPPageViewControllerのDataSourceとDelegateのインターフェースは簡単すぎて、比較的複雑な場合(例えば、改ページ以外に他のViewがある場合)は処理できません.以下の例図を参照してください.tabの下に小さな黄色の条があります.ジェスチャーとともに横方向にスライドします.ここではUAPPageView Controllerはサポートできません.また、サブページを縦にスライドさせる時にカバーとTabのフレームを修正したいです.だからUAPPageView Controllerは複雑な需要を満たすことができません.
c)低配合のマシンはカートン問題が発生します.システムのUAPPageView Controllerは、急速に切り替わると、不要なページが解放されますので、クイックカットの際には、次の性能テストを参照してください.
以上のように、システムのUAPPageView Controllerを廃棄しました.
1.2使用説明
非常にシンプルで、コンポーネントのクラスを継承し、それぞれのdelegateとdatasourcを実現すればいいです.
Pageの例図は以下の通りです.
ページレベルの関係は以下の通りです.
図は1つの写真、3つのコラム(詳細、番組、コメント)と1つのListから構成されています.三つの階層に分けられます.カバー、Tab、Page.
Pageコンポーネントの階層関係は以下の通りであり、図中のShow ListControllerは番組別ページであり、AlbumListControllerはアルバム別ページである.
2.コンポーネントアーキテクチャ設計
2.1アーキテクチャ紹介
クラス図は以下の通りです
各プロトコルの役割を簡単に説明します.
FMPage Data Sourceは、サブページ、サブページの個数、サブページに展示されているframeをPageControllerに提供します.
FMPage Delegateは、ページの相互交換と非インタラクティブ切り替えのフィードバックを上位層とページの縦スライドと横スライドのcontenttoffsetを上位層に提供します.
FMTabDataSourceはTabViewの具体的な展示効果を提供します.
FMTabDelegateは、TabViewのクリック応答を上位層に提供します.
FMCoverControllerは、CoverViewをCoverControllerに提供する.
ここで、FMT abControllerデフォルトはFMTabDataSource、FMTabDelegateSource、FMPage DataSource、FMPage Delegateプロトコルに従う.FMCoverControllerは、FMCover Datasourceプロトコルに従う.
2.2インターフェース設計
インターフェースは高い凝集と低い結合の特性に従って、DelegateとDataSourceだけを上層部に開放して、同時にインターフェースの分離をして、Page、Tab、Cover特性の分離をします.コードは以下の通りです
@interface FMTabController : FMBusinessViewController
@interface FMCoverController : FMTabController 1.UScrrollViewは改ページ効果をサポートしています.ジェスチャー処理とインタラクティブ操作で複数のコールバック方法がページの切り替え効果を実現できます.
2.ライフサイクル管理には2つの方式があります.a.頻繁にadd/remove ChildController b.次のコードを使ってライフサイクルの管理を実現します.
1)shouldAutomaticallyForwardAppearanceMethods
2)beginAppearanceTransition: animated:
3)endAppearanceTransitionb.頻繁にadd/removeを呼び出す必要はなく、1)方法はadd/removeによるライフサイクルを回避し、2)と3)開発者がChildControllerのライフサイクルを自分でコントロールできることを保証している.
Pageのライフサイクル図は以下の通りです.
初めてまたはreloadPage
インタラクティブ切り替えと非インタラクティブ切り替え
2.4性能問題拡張
以下はIphone 5シミュレータ10.3システムにより、UAPPageView Controllerと性能の比較を行った.UAPPageView Controllerは急速にメモリの占有状況を切り替えます.
UAPPageView ControllerはGPUの占有状況を素早く切り替えます.
Pageコンポーネントのメモリ占有率を素早く切り替えます.
PageコンポーネントのGPU占有状況を素早く切り替えます.
上の図のメモリ占有アイコンの変動状況から、UAPPageView Controllerは急速な切り替えの際に、必要でないcontrollerとviewをできるだけ速く解放して、メモリの占有率が小さいことを保証します.したがって、アイコンの指標は頻繁に変動します.UAPPageView Controllerと比較して、Pageコンポーネントは空間的に時間を換える戦略でページの詰まりを回避します.
3.技術実現の難しさ
技術的には、次の4つの点に分けることができます.
3.1インターフェースの設計.
インターフェースの設計は、全体の構造の核心であり、もし設計がよくないなら、後続の拡張は属性とプラス方法であり、コードがますます膨大になり、維持できなくなります.
最初はdelegateとdatasourceをControllerから分離するためにdelegateとdatasourceを暴露しましたが、これは5つの属性が多くなりました.上層にとってはこれらのインターフェースを理解するのが難しく、UItable Viewintrollerをまねて、継承方式によってこれらの協議を実現します.
3.2ページを縦方向にスライドさせ、Tabとカバーをフォローしてスライドさせる.
上の動態図を通じて、PageコンポーネントはTabとCoverと一緒に上にスライドする機能を持っています.ここで、カバーのスライドの実現はChildControllerのSrollViewのcontentOffsetを監督し、Tabのheightまたはyを修正します.Scrllviewのスライドには難しい点がありますが、ScrllViewの下方スライドのリバウンドをどのように保証しますか?
まずScrllviewの可視範囲はフルスクリーン、つまりフルスクリーン、Scrollviewスライドの範囲を設定することで、ContentInset、ContentOffsetが共同で決定します.UScrrollViewの滑り範囲は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)3.3隣接しないページ切り替えの問題
隣接していないページの非インタラクティブ切り替えは、中間ページをフラッシュして、よくないユーザー体験を生成します.
非インタラクティブ切り替え、アナログ切り替えの動画、ここで考慮しなければならない複雑な状況は初めてのアニメが終わっていないうちに二回目が始まります.修正後の効果図は以下の通りです.
3.4バランス性能の問題.
Pageは複数のcontrollerとviewを管理しますので、もしサブページが1000になるなら、さらに10000個はどう処理しますか?例えば、WeChatで読む本は一冊で10000ページあります.ここは全部保存すれば問題が発生します.メモリは大きすぎますか?
UAPPageView Controllerを観察して、それは一定のメモリの制限に着いて、自発的に長い間ひっくり返ったことがないページを釈放します.したがって、ここでは、LRUCacheの機構を使用して、ページ数だけを保存することができます.本アプリケーションはあまり多くのサブページには触れていないので、時間を考慮してメモリとメモリを使い、すべてのページを保存しています.
demo住所:https://github.com/xichen744/SPPage
この記事は騰訊Bugly公衆番号から来ています.作者の同意なしに転載しないでください.http://mp.weixin.qq.com/s/hBgvPBP12IQ1s65ru-paWw