【iOS】PagingMenuController使ってみた

田中賢治

2016.05.06

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

おばんです、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) {
}