Edited at

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

More than 1 year has passed since last update.


はじめに

こんにちは。

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を配置します。

storyboard_001.png

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

storyboard_002.png

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

storyboard_003.png


実行してみる

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

8.gif


カスタマイズについて

BarViewは色などを自由に変更することができます

注意点なのですが、設定はViewDidLoadの中で行いsuper.viewDidLoad()よりも前に記述します。


設定例

Bar_example.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

コード
説明

buttonBarBackgroundColor: UIColor?
BarViewの背景色

buttonBarItemBackgroundColor: UIColor?
ボタンの背景色

buttonBarItemTitleColor: UIColor?
ボタンの文字色

selectedBarBackgroundColor: UIColor
セレクトバーの色


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

Space_0.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を指定して遷移します


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

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