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

15710 ワード
iOS library Swift3.0 Xcode8 CocoaPods iOS テキストリンク

はじめに

こんにちは。
XLPagerTabStripという素晴らしいSwift製のiOSライブラリを見つけたので使い方などを共有してみたいと思います。
至らぬ点など多々あると思いますが、コメントなど頂けたら幸いです。

※画像のリンクはGitHubから引用させていただきました

https://github.com/xmartlabs/XLPagerTabStrip


導入について

実行環境は(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を配置します。

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

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

実行してみる

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

カスタマイズについて

BarViewは色などを自由に変更することができます
注意点なのですが、設定はViewDidLoadの中で行いsuper.viewDidLoad()よりも前に記述します。

設定例

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()
}

色の設定プロパティ

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

マージンやスペースなどの設定プロパティ

コード 説明
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を指定して遷移します

参考にさせていただいた記事

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