XLPagerTabStripの使い方とカスタマイズ

# はじめに
こんにちは。
[XLPagerTabStrip](https://github.com/xmartlabs/XLPagerTabStrip)という素晴らしいSwift製のiOSライブラリを見つけたので使い方などを共有してみたいと思います。
至らぬ点など多々あると思いますが、コメントなど頂けたら幸いです。

※画像のリンクはGitHubから引用させていただきました
> https://github.com/xmartlabs/XLPagerTabStrip

![](https://github.com/xmartlabs/XLPagerTabStrip/raw/master/Example/barButton.gif)![](https://github.com/xmartlabs/XLPagerTabStrip/raw/master/Example/bar.gif)
![](https://github.com/xmartlabs/XLPagerTabStrip/raw/master/Example/twitter.gif)![](https://github.com/xmartlabs/XLPagerTabStrip/raw/master/Example/segmented.gif)

# 導入について
実行環境は(Swift3.0.2)(Xcode8.2.1)で、CocoaPodsを利用し、
今回は基本的なgifの左上の**Button Bar**をサンプルにしてみたいと思います。

```Podfile.rb
use_frameworks!

pod 'XLPagerTabStrip'
```

# クラスの準備
## 管理元クラス(ButtonBarPagerTabStripViewController)
ViewControllerたちを管理するButtonBarPagerTabStripViewControllerを継承したクラスを用意します。

```MainViewController.swift
import UIKit
import XLPagerTabStrip

class MainViewController: ButtonBarPagerTabStripViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    override func viewControllers(for pagerTabStripController: PagerTabStripViewController) -> [UIViewController] {
        //管理されるViewControllerを返す処理
        let firstVC = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "First")
        let secondVC = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "Second")
        let thirdVC = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "Third")
        let childViewControllers:[UIViewController] = [firstVC, secondVC, thirdVC]
        return childViewControllers
    }
}
```

## 管理されるViewControllerたち(IndicatorInfoProviderプロトコルを実装したUIViewController)
スワイプやボタンを押されて遷移するViewControllerのクラスを用意します。
今回の例ではFirst(紫色),Second(緑色),Third(水色)を用意しましたが、FirstとなっているところをSecond,Thirdとしてあるだけです。

```FirstViewController.swift
import UIKit
import XLPagerTabStrip

class FirstViewController: UIViewController, IndicatorInfoProvider {

    //ここがボタンのタイトルに利用されます
    var itemInfo: IndicatorInfo = "First"
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    //必須
    func indicatorInfo(for pagerTabStripController: PagerTabStripViewController) -> IndicatorInfo {
        return itemInfo
    }
}
```

# Storyboardの準備
- ViewControllerたちを管理するViewController **1つ** (黒色)
- スワイプで切り替わるViewController **3つ** (紫色,緑色,水色)

を用意し、StoryboardIDをFirst(紫色),Second(緑色),Third(水色)とそれぞれ設定し、それぞれのクラスの接続も行なっています。
黒色のViewControllerに対して切り替え部分になる**Scroll View**とボタン部分になる**Collection View**を配置します。

![storyboard_001.png](https://qiita-image-store.s3.amazonaws.com/0/128250/0549b55c-51ca-faa8-affe-72c405c11a86.png)

黒色のViewControllerの**Scroll View**を選択して右クリックし、以下のように設定します。

![storyboard_002.png](https://qiita-image-store.s3.amazonaws.com/0/128250/f3da13ad-44c6-8054-7d79-fd5d59a64af0.png)

また、黒色のViewControllerの**Collection View**のクラスを「ButtonBarView」と結びつけ、Moduleを「XLPagerTabStrip」とします。そして、同じく以下のように設定します。

![storyboard_003.png](https://qiita-image-store.s3.amazonaws.com/0/128250/f8c56906-a053-f9c9-727e-afde1f9e1f2a.png)

# 実行してみる
ここで1度実行してみます。今回の例では設置場所が自由であることを明示したくて、**BarView**を下側に設置してみました。

![8.gif](https://qiita-image-store.s3.amazonaws.com/0/128250/4092f72e-f67e-a492-fc55-59ce7bfef439.gif)

# カスタマイズについて
**BarView**は色などを自由に変更することができます
注意点なのですが、設定はViewDidLoadの中で行い`super.viewDidLoad()`よりも前に記述します。
## 設定例
![Bar_example.png](https://qiita-image-store.s3.amazonaws.com/0/128250/cd313d5b-085a-4f06-2cd6-427255067805.png)

```MainViewController.swift
override func viewDidLoad() {
    //バーの色
    settings.style.buttonBarBackgroundColor = UIColor(red: 73/255, green: 72/255, blue: 62/255, alpha: 1)
    //ボタンの色
    settings.style.buttonBarItemBackgroundColor = UIColor(red: 73/255, green: 72/255, blue: 62/255, alpha: 1)
    //セルの文字色
    settings.style.buttonBarItemTitleColor = UIColor.white
    //セレクトバーの色
    settings.style.selectedBarBackgroundColor = UIColor(red: 254/255, green: 0, blue: 124/255, alpha: 1)
    super.viewDidLoad()
}
```

## 色の設定プロパティ
![color_0.png](https://qiita-image-store.s3.amazonaws.com/0/128250/59ae2fbd-ba12-b54d-7efd-7d7b0eed9908.png)

|コード|説明|
|:-:|:-:|
|buttonBarBackgroundColor: UIColor?|BarViewの背景色|
|buttonBarItemBackgroundColor: UIColor?|ボタンの背景色|
|buttonBarItemTitleColor: UIColor?|ボタンの文字色|
|selectedBarBackgroundColor: UIColor|セレクトバーの色|

## マージンやスペースなどの設定プロパティ
![Space_0.png](https://qiita-image-store.s3.amazonaws.com/0/128250/e0d211d8-4cf6-907f-17e9-9e1b199020ea.png)

|コード|説明|
|:-:|:-:|
|buttonBarMinimumLineSpacing: CGFloat?|ボタンの間隔|
|buttonBarLeftContentInset: CGFloat?|ボタンの左側のマージン|
|buttonBarRightContentInset: CGFloat?|ボタンの右側のマージン|
|selectedBarHeight: CGFloat|セレクトバーの高さ|

# コードによる遷移や現在のViewController取得など
管理する**ButtonBarPagerTabStripViewController(黒色)**では、以下のプロパティやメソッドなどがあります。
初期位置もこれで設定することができますね。

|コード|説明|
|:-:|:-:|
|viewControllers: [UIViewController]|管理するViewControllerの配列|
|currentIndex: Int|現在のViewControllerのIndexを示します|
|func moveToViewController(at index: Int, animated: Bool = true)|Indexを指定して遷移します|

# 参考にさせていただいた記事
- [iOSでタブデザインを実現するXLPagerTabStripが素晴らしい Hatena Blog](http://animane.hatenablog.com/entry/2016/03/22/161644)

- [XLPagerTabStrip GitHub](https://github.com/xmartlabs/XLPagerTabStrip)

- [How to implement Android-Like Tab Layouts in iOS using swift 3](https://medium.com/michaeladeyeri/how-to-implement-android-like-tab-layouts-in-ios-using-swift-3-578516c3aa9#.ev9ia9ah0)

見て頂いてありがとうございます。