XLPagerTabScriptの使い方 - Goalist Developers Blog

こんちは。渡部です。
最近はOSSのライブラリが豊富でありがたいですよね。
UIの参考にもなるし、実際に使用すると工数の削減になります。

今回はXLPagerTabScriptというライブラリの使い方を紹介します。
どんどこやっていきます。(パクリ)

f:id:watabe1028:20170430235401p:plain

こんな感じでやっていきます
・XLPagerTabScriptってなに？うまいの？
・どうやって使うのよ？
・XLPagerTabScriptをプロジェクトに追加する
・遷移するViewControllerを用意する
・Storyboardを設定する
・ガリガリ書く

れっつらゴー！

XLPagerTabScriptってなに？うまいの？

XLPagerTabScript github.com

一言で例えると、「カスタマイズしやすいタブ遷移ライブラリ」です。
カスタマイズしやすい点としてはUIViewControllerがそのまま使えることです。
よくライブラリを使うと、よくわからないクラスを継承していて
結局Wiki通りに使うことしかできないものが多々あります。(未熟なので)

また、今も頻繁に更新されているのでOSが上がった際にも安心です。

どうやって使うのよ？

GitHubで落としてゴー！

XLPagerTabScriptをプロジェクトに追加する

CocoaPodsで落とします。
使い方がわからない人はこちら。

プロジェクトを作ったらPodsでXLPagerTabScriptをinstallします。
サンプルとして「TabTestApp」を作ります。

作ったらターミナルでアプリ直下まで行き、Podsを作成します。

pod init

作成したらXLPagerTabScriptを落とすため編集モードで追記し、installします。
編集モードにして、

vi Podfile

これを追記する。

  # Pods for TestApp
  pod ‘XLPagerTabStrip’
end

「:wq」で保存、終了。

インストール！

pod install

これで下準備おけ！

遷移するViewControllerを用意する

まんまです。
UIViewControllerを３つ追加します。
今回はわかりやすく
「RedViewController」
「BlueViewController」
「GreenViewController」
の３つを追加し、それぞれviewに色を設定します。
Storyboardにも追加し、関連付けてください。

Storyboardを設定する

まず、ベースとなる(デフォルトで入っている)ViewControllerに
Collection ViewとScroll Viewを追加します。
ついでにAutoLayoutもつけちゃってください。

Scroll VIewを設定します。
ます、追加したScroll Viewの上で右クリックし、
「 New Referencing Outlet」をViewControllerに繋ぎます。
その際に「containerView」と「view」の選択肢が出るので、「containerView」を選択します。

Collection Viewはclassを「ButtonBarView」、Moduleを「XLPagerTabStrip」を選択します。

f:id:watabe1028:20170430234311p:plain

その後、ScrollViewと同様に
「 New Referencing Outlet」をViewControllerに繋ぎ、
出てくる選択肢の「buttonBarView」を選択します。

これで準備ができました。

ガリガリ書く

もちろん、ソース無しでは動きません。
が、結構簡単にかけます。コピペでできるように最低限のコードのみ記載します。

まずはベースとなるViewControllerに以下を記述します。

import XLPagerTabStrip　// インポートする

class ViewController: ButtonBarPagerTabStripViewController {    // 「ButtonBarPagerTabStripViewController」に変更する

    override func viewDidLoad() {
        
        // もしタブのカスタマイズをするなら
        // ここに追記する

        super.viewDidLoad()
    }
    
    /// ViewControllers
    override func viewControllers(for pagerTabStripController: PagerTabStripViewController) -> [UIViewController] {
        
        // 追加したViewControllerを指定
        let firstVC = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "redViewController")
        let secondVC = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "blueViewController")
        let thirdVC = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "greenViewController")
        
        // ViewControllersに入れる
        let childViewControllers:[UIViewController] = [firstVC, secondVC, thirdVC]
        return childViewControllers
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

次に追加した各ViewControllerに以下を記述します。
RedViewControllerを例にしてます。

import XLPagerTabStrip  //インポートして

class RedViewController: UIViewController, IndicatorInfoProvider {    // 「IndicatorInfoProvider」を追加
    
    // タブのタイトルを設定
    var itemInfo: IndicatorInfo = "RED"

    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    // これはお約束。コピペでおけ！
    func indicatorInfo(for pagerTabStripController: PagerTabStripViewController) -> IndicatorInfo {
        return itemInfo
    }
}

これで実行してください。

タブでスルスル遷移します。
スワイプでも遷移するので試してみてください。