読者です 読者をやめる 読者になる 読者になる

アニマネ開発日誌

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

iOSでタブデザインを実現するXLPagerTabStripが素晴らしい

よくある横スワイプで移動できるタブデザイン。 Androidは標準のUIライブラリに含まれていますが、iOSの場合は自作かライブラリを使うかのどちらかになります。

アニメアプリのアニマネ!ではいくつかのライブラリを比較した結果、RMPScrollingMenuBarControllerを採用しました。

当時の状況ではベストだと思っていたのですが、新しくとても良いライブラリを見つけました。

Xmartlabsというウルグアイの会社が作っています。

Githubのスターが2,231件(2016年3月現在)とかなりの人気ライブラリです。 アニマネで実装した時に見つけていればこちらを採用していたのに。。。

軽く触っただけですがこのライブラリは凄いと思ったので紹介してみます。

XLPagerTabStripの特徴

  • Swift
  • 活発に開発されている安心感(2016年3月現在)
  • 豊富な表示方法
  • 既存のUIViewControlerをそのまま利用可能
  • カスマイズが行いやすい

必須条件

豊富な表示方法

よくあるタブデザイン以外にもいくつかの表示方法がサポートされています。 Twitter風の実装は他には知らないので、貴重と思います。

通常のタブ

f:id:animane:20160322160309g:plain

バーのみ

f:id:animane:20160322160332g:plain

Twitter

f:id:animane:20160322160352g:plain

Segmented

f:id:animane:20160322160411g:plain

既存のUIViewControlerをそのまま利用可能

使い方は簡単です。

  1. TabStripViewControllerのサブクラスを継承したUIViewControllerを用意する。
  2. 1のクラスをStoryBoardで用意したUIViewControllerに設置する。
  3. 2のViewにはメニュー領域とコンテンツ領域をそれぞれ設置して、IBOutletで接続する。
  4. 1のクラスでviewControllersForPagerTabStripメソッドを使ってタブに表示するViewControllerを返却する。
  5. 実際に表示を行うクラスで、IndicatorInfoProviderプロトコルを実装する。これはメニュー部分にあたる情報を提供する処理です。

基本的な流れはこんな感じです。 2と3は付属のサンプルプロジェクトを見るとイメージしやすいです。

TabStripViewControllerを実装したクラスは表示方法によって分かれているので、 下記から実装したいクラスを選択します。

  • ButtonBarPagerTabStripViewController
  • BarPagerTabStripViewController
  • SegmentedPagerTabStripViewController
  • TwitterPagerTabStripViewController

TabStripViewControllerを継承したクラスのサンプル

Githubそのままですが、下記のような感じです。

class ButtonBarExampleViewController: ButtonBarPagerTabStripViewController {
    override public func viewControllersForPagerTabStrip(pagerTabStripController: PagerTabStripViewController) -> [UIViewController] {
      return [MyEmbeddedViewController(), MySecondEmbeddedViewController()]
    }
}

表示を行うUIViewControllerのサンプル

これもGithubから拝借。

class MyEmbeddedViewController: UITableViewController, IndicatorInfoProvider {

  func indicatorInfoForPagerTabStrip(pagerTabStripController: PagerTabStripViewController) -> IndicatorInfo {
    return IndicatorInfo(title: "My Child title")
  }
}

カスマイズが行いやすい

デザインのカスタマイズを行うオプションは豊富に用意されています。 DelegateやViewControllerを切り替える際に呼ばれるメソッドなども一通りあるので、 他のViewの調整も行いやすいです。

また、PagerTabStripViewControllerのサブクラスを実装すれば独自のUIも実現できそうなので、 デザインやアニメーションにはこだわりたい人にもオススメできそうです。

Githubと同じですが、サンプルプロジェクトでの例を少し紹介。

Instagram

f:id:animane:20160322160534g:plain

YouTube

f:id:animane:20160322160601g:plain

Spotify

f:id:animane:20160322160631g:plain

軽く触ってみた雑感

付属のサンプルプロジェクトを軽く触ってみました。

タブメニュー部分とコンテンツ部分にAutoLayoutが使われているので、 AutoLayoutを使っているプロジェクトとは相性がよさそうです。

逆に言えばAutoLayoutを使っていないとレイアウトを整えるコードを書く必要があり、少し大変になる気がします。

実装自体は特に難しいことはなく、UIViewControllerをそのまま渡すだけなので、 既存プロジェクトにも導入しやすいのは利点になりそうです。

同様のライブラリはいくつか試しましたが、個人的には現時点で一番扱いやすい感触を得ました。 アニマネでも次のリニューアル時には切り替える予定です。