アニマネ開発日誌

アニメアプリのアニマネの開発日誌です。

SmartNewsのようなUIを実現するライブラリ3つを比較してみた

アプリ開発 Objective-C Swift UI

スマートニュースのようなフリックでページを移動したり、タブをスクロールしてページを選ぶような感じのUI。 最近はかなり増えているので今更な感はありますが、アニマネ の次期バージョンでも導入を検討中です。

一から実装せずともいくつかライブラリがあるようなので、試してみました。

比較したライブラリ

はじめにざっくりとした比較表を。

2015年9月前半に比較していたので、今はまた状況が変わっているかも知れません。 あくまで参考程度に見て頂ければと思います。

※追記

下記のライブラリもオススメです。

言語

ライブラリ 言語
RMPScrollingMenuBarController Objective-C
PageMenu Objective-C,Swift
PagingMenuController Swift

対応OSバージョン

ライブラリ バージョン
RMPScrollingMenuBarController iOS7〜
PageMenu iOS8〜
PagingMenuController iOS8〜

組み込みやすさ

ライブラリ 評価
RMPScrollingMenuBarController ◎
PageMenu △
PagingMenuController ◯

デザイン性

ライブラリ 評価
RMPScrollingMenuBarController △
PageMenu ◎
PagingMenuController ◯

※デフォルトデザインの比較です。
※主観が入っています。

カスタマイズ性

ライブラリ 評価
RMPScrollingMenuBarController ◎
PageMenu ◯
PagingMenuController ◯

RMPScrollingMenuBarController

https://github.com/recruit-mp/RMPScrollingMenuBarController/raw/master/docs/rmpscrollingmenubarcontroller.gif

GitHub - recruit-mp/RMPScrollingMenuBarController: RMPScrollingMenuBarController has a scrollable menu bar, and multiple view controllers.

詳しいソースの説明は下記にもあります。

【iOS】スクロール可能なメニューバーを持つViewControllerをオープンソースとして公開しました – NET BIZ DIV. TECH BLOG

Objective-Cですが、ソースは一番しっかりしていると思います。

他のライブラリと違って、スクロール時の処理にUIViewControllerInteractiveTransitioningが使われているので、 既存のUIViewControllerを追加するだけでほぼ動くと思います。

クラス分けもきっちりされていて継承も可能なので、カスタマイズ性も高いです。

唯一残念なのが、メニューをタップしたあとの画面移動にワンテンポ遅れがあること。

タップしたらさっと動いて欲しいのですが、ここだけが残念です。 クラスを継承したらいけるんじゃないかと思いましたが、なかなか時間が掛かりそうなため、一先ず後回しにしました。

今後のバージョンアップで改善されるといいなぁ。

2015年10月5日追記

追加したViewControllerのviewDidLoadで色々やっていると、最初のスクロール時に引っ掛かりが生まれます。

その場合はdidMoveToParentViewController()で事前処理をしておいてあげると、いくらかマシになります。

ただ、最初のスクロールで移動してから画面表示もワンテンポタイムラグがあるのが悩ましい。

事前にViewControllerを描画しておくのが理想なんだけど、調べた限りでは実現できそうになかったので、 現状はそのままで組み込んでます。

PageMenu

https://raw.githubusercontent.com/uacaps/ResourceRepo/master/PageMenu/PageMenuDemo.gif

GitHub - HighBay/PageMenu: A paging menu controller built from other view controllers placed inside a scroll view (like Spotify, Windows Phone, Instagram)

見た目はとてもよいのですが、追加したUIViewControllerからself.navigationControllerを参照できないのが致命的。

深追いはしなかったけど、childViewControllerあたりの扱いに問題がありそう。

PagingMenuController

https://raw.githubusercontent.com/wiki/kitasuke/PagingMenuController/images/demo4.gif

GitHub - kitasuke/PagingMenuController: Paging view controller with customizable menu in Swift

こちらはメルカリの中の人が作成されたそうです。

オプションも豊富です。
PageMenuと違い、self.navigationControllerも参照できます。

RMPScrollingMenuBarControllerと違うのは、スクロール移動時にviewDidAppearなどのライフサイクルが呼ばれないこと。

スクロール時のdelegateは用意されているので、これを使ってゴニョゴニョしてみようとしましたが、 改修コストが大きかったため断念。

総評

既存プロジェクトに組み込むなら、RMPScrollingMenuBarControllerが素直に実装できるのでお勧めです。
現在アニマネでは、RMPScrollingMenuBarControllerを使ってメジャーバージョンアップに向けて開発を進めているところです。

新しく作り始めるならPagingMenuControllerもありと思います。

PageMenuは個人的には使えないですが、 navigationControlelrを使わなくても問題ないのであれば選択肢にいれてもよいかと思います。

今回調べて感じたのは、こういう複数のViewControllerを使う場合はUIViewControllerInteractiveTransitioningを使った実装がよいのだと勉強になりました。