【iOS】PagingMenuController使ってみた

おばんです、GW後半は自然と温泉を楽しみ坊主頭になった田中です。

GWなか日は就業日<シーズン２>となる今日はPagingMenuControllerというライブラリを紹介します。

どんなライブラリ？

ニュースアプリやショッピングアプリなんかでよく見るタブとスクロールビューを組み合わせたUIライブラリです。
詳しくは元のGitHubを見ていただくとわかりますが、実装例として以下を上げておきます。

使い方

インストール

CocoaPodsでインストールできます。 Podfileを以下のように編集して、

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'
use_frameworks!

pod "PagingMenuController"

pod installしましょう。

Carthageも対応しているようです。

導入

今回は無限スクロールモードを実装してみました。

import UIKit
import PagingMenuController

class ViewController: UIViewController {

    override func viewDidAppear(animated: Bool) {
        super.viewDidAppear(animated)
        
        let viewController1 = UIViewController()
        let viewController2 = UIViewController()
        let viewController3 = UIViewController()
        
        viewController1.view.backgroundColor = UIColor.redColor()
        viewController2.view.backgroundColor = UIColor.greenColor()
        viewController3.view.backgroundColor = UIColor.blueColor()
        
        viewController1.title = "VC1"
        viewController2.title = "VC2"
        viewController3.title = "VC3"
        let viewControllers = [viewController1, viewController2, viewController3]
        
        let options = PagingMenuOptions()
        options.menuHeight = 60
        options.menuDisplayMode = .Infinite(widthMode: .Flexible, scrollingMode: .ScrollEnabled)
        
        let pagingMenuController = PagingMenuController(viewControllers: viewControllers, options: options)
        
        addChildViewController(pagingMenuController)
        view.addSubview(pagingMenuController.view)
        pagingMenuController.didMoveToParentViewController(self)
    }
    
}

簡単に解説をしていきます。

タブの中身となるViewControllerをインスタンス化して配列に入れます。

let viewController1 = UIViewController()
let viewController2 = UIViewController()
let viewController3 = UIViewController()
        
viewController1.view.backgroundColor = UIColor.redColor()
viewController2.view.backgroundColor = UIColor.greenColor()
viewController3.view.backgroundColor = UIColor.blueColor()
        
viewController1.title = "VC1"
viewController2.title = "VC2"
viewController3.title = "VC3"
let viewControllers = [viewController1, viewController2, viewController3]

PagingMenuControllerの設定を用意します。

let options = PagingMenuOptions()
options.menuHeight = 60
options.menuDisplayMode = .Infinite(widthMode: .Flexible, scrollingMode: .ScrollEnabled)

用意したViewControllerの配列と設定を引数として、PagingMenuControllerを生成します。

let pagingMenuController = PagingMenuController(viewControllers: viewControllers, options: options)

生成したpagingMenuControllerの追加処理を行います。

addChildViewController(pagingMenuController)
view.addSubview(pagingMenuController.view)
pagingMenuController.didMoveToParentViewController(self)

これでソースコードのみからのpagingMenuControllerを使うことができます。

おまけ

設定できる項目もちゃんと用意されているので扱いやすくなっています。
PagingMenuController/Customization

delegateも用意されているのでハンドリングも可能。

func willMoveToPageMenuController(menuController: UIViewController, previousMenuController: UIViewController) {
}
func didMoveToPageMenuController(menuController: UIViewController, previousMenuController: UIViewController) {
}

.Infinite時の注意

無限スクロールの実装時にひとつだけ気をつけるポイントがあります。
先述したCustomizationのMenuDisplayModeの項目にも書いてありますが、Infiniteモードを利用する際は表示する要素数が3つ以上必要とのこと。

2つ以下で実行すると、下記のようなエラーで落ちます。
'the number of view controllers should be more than three with Infinite display mode'

まとめ

無限スクロールのタブはいざ実装しようとすると面倒だったりするのでとてもありがたいです！
必要になりそうな設定項目も抑えてあるので、有効活用していこうと思います。