マネーフォワードのような横スワイプでタブを切り替えできるライブラリXLPagerTabStripを使ってみた

横スワイプで画面を切り替えれるかっこいいアニメーションを導入したくてライブラリを導入したのでメモとして残しておきます。

今回導入するのはこちらです。

f:id:jesus9387:20171010123242g:plain

かっこいいですね。

Install

Cocoapodsから導入できます。 Cocoapodsを入れてない場合は導入してください。 (導入方法はググればたくさんでてきます)

Podfileに下記を追加

pod 'XLPagerTabStrip'

追加したPodFileを保存し、下記を実行

pod install

管理元ViewControllerと切り替えるViewControllerを作成する

ルートのViewControllerと切り替え用のViewControllerを作成する

f:id:jesus9387:20171010124851p:plain

次に、切り替え用のViewControllerそれぞれにStoryboardIDを設定してください

f:id:jesus9387:20171011093245p:plain

(もうひとつのstoryboardには別のIDを設定してください)

ソースコード設定

下記のように設定する

管理するルートViewController

import UIKit
import XLPagerTabStrip


class ViewController: ButtonBarPagerTabStripViewController{

    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()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    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 childViewControllers:[UIViewController] = [firstVC, secondVC ]
        return childViewControllers
    }


}

管理されるViewController 管理されるViewControllerの数だけViewControlerを下記のように編集してください。

import UIKit
import XLPagerTabStrip


class Chenge1ViewController: UIViewController, IndicatorInfoProvider {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    

    //必須
    func indicatorInfo(for pagerTabStripController: PagerTabStripViewController) -> IndicatorInfo {
        return "First"
    }

}

ルートのViewControllerにCollectionViewとScrollViewを追加する

管理するViewControllerにCollectionViewとScrollViewを追加してください。

f:id:jesus9387:20171011093439p:plain

CollectionView：切り替えタブ表示エリア ScrollView：表示するViewエリア

となります。

Storyboardの設定

CollectionView、ScrollViewそれぞれに下記の操作をおこなってください。

CollectionViewもしくはScrollViewを右クリック→Referencing outletのNew Reference outletをドラッグして親のViewControllerにカーソルを当てる→containerViewを選択

f:id:jesus9387:20171011093650p:plain

実行してみる

f:id:jesus9387:20171011125624g:plain

カスタマイズ

下記の部分を変更することでタブをカスタマイズすることができます。

 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()
        // Do any additional setup after loading the view, typically from a nib.
    }