アニマネ開発日誌

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

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

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

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

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

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

XLPagerTabStripの特徴

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

必須条件

iOS 8.0以上
Xcode 7.2以上

豊富な表示方法

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

通常のタブ

f:id:animane:20160322160309g:plain

バーのみ

f:id:animane:20160322160332g:plain

Twitter風

f:id:animane:20160322160352g:plain

Segmented

f:id:animane:20160322160411g:plain

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

使い方は簡単です。

TabStripViewControllerのサブクラスを継承したUIViewControllerを用意する。
1のクラスをStoryBoardで用意したUIViewControllerに設置する。
2のViewにはメニュー領域とコンテンツ領域をそれぞれ設置して、IBOutletで接続する。
1のクラスでviewControllersForPagerTabStripメソッドを使ってタブに表示するViewControllerを返却する。
実際に表示を行うクラスで、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をそのまま渡すだけなので、既存プロジェクトにも導入しやすいのは利点になりそうです。

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

久しぶりのiOSの開発ネタです。

設定画面でUIPickerを使ってみようと思ったのですが、意外と面倒だったのでライブラリを探ました。

ActionSheetPickerというライブラリが中々良かったので紹介します。

f:id:animane:20160311161914g:plain

やりたかったこと

UITableViewCellをタップして、UIPickerを表示する。
UIPickerで項目を選択して閉じる

できること

UIPickerの動的追加が簡単にできる
完了ボタンとキャンセルボタンの表示
完了/キャンセルボタンが押された時はブロックで受け取り処理が書ける

サンプルコード

// Inside a IBAction method:

// Create an array of strings you want to show in the picker:
NSArray *colors = [NSArray arrayWithObjects:@"Red", @"Green", @"Blue", @"Orange", nil];

[ActionSheetStringPicker showPickerWithTitle:@"Select a Color"
                                        rows:colors
                            initialSelection:0
                                   doneBlock:^(ActionSheetStringPicker *picker, NSInteger selectedIndex, id selectedValue) {
                                      NSLog(@"Picker: %@, Index: %@, value: %@", 
                                      picker, selectedIndex, selectedValue);
                                    }
                                 cancelBlock:^(ActionSheetStringPicker *picker) {
                                      NSLog(@"Block Picker Canceled");
                                    }
                                      origin:sender];
// You can also use self.view if you don't have a sender

githubのコードそのままですが、これだけで簡単に実装できます。