PageMenuでページ型のメニューを実現

PageMenuというライブラリを試してみました。

github.com

インストール

CocoaPodsでインストールします。

pod 'PageMenu'

使い方

pageMenuにUIViewControllerを渡してpageMenuをviewに貼り付ければ完了です。

import UIKit
import PageMenu

class ViewController: UIViewController {
    var pageMenu: CAPSPageMenu?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let vc1 = UIViewController()
        vc1.title = "VC1"
        vc1.view.backgroundColor = UIColor.blue
        let vc2 = UIViewController()
        vc2.title = "VC2"
        vc2.view.backgroundColor = UIColor.green
        
        let parameters: [CAPSPageMenuOption] = [
            .menuItemSeparatorWidth(4.3),
            .useMenuLikeSegmentedControl(true),
            .menuItemSeparatorPercentageHeight(0.1)
        ]
        pageMenu = CAPSPageMenu(viewControllers: [vc1, vc2], frame: view.bounds, pageMenuOptions: parameters)
        view.addSubview(pageMenu!.view)
    }
}

以下のように複数ViewControllerをスワイプで切り替えできるようになります。

CAPSPageMenuはdelegateをセットする事もできます。
delegateのメソッドは以下の2つになります。

@objc public protocol CAPSPageMenuDelegate {
    // MARK: - Delegate functions
    
    optional func willMoveToPage(controller: UIViewController, index: Int)
    optional func didMoveToPage(controller: UIViewController, index: Int)
}

各ViewControllerライフサイクル

ViewControllerのviewWillAppearはスワイプ開始した時(そのViewControllerが表示される時)に呼ばれます。

class ViewController: UIViewController {
    var pageMenu: CAPSPageMenu?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let vc1 = ViewController1()
        vc1.title = "VC1"
        vc1.view.backgroundColor = UIColor.blue
        let vc2 = ViewController2()
        vc2.title = "VC2"
        vc2.view.backgroundColor = UIColor.green
        let vc3 = ViewController3()
        vc3.title = "VC3"
        vc3.view.backgroundColor = UIColor.brown
        
        let parameters: [CAPSPageMenuOption] = [
            .menuItemSeparatorWidth(4.3),
            .useMenuLikeSegmentedControl(true),
            .menuItemSeparatorPercentageHeight(0.1)
        ]
        pageMenu = CAPSPageMenu(viewControllers: [vc1, vc2, vc3], frame: view.bounds, pageMenuOptions: parameters)
        view.addSubview(pageMenu!.view)
    }
}

class ViewController1: UIViewController {
    override func viewWillAppear(_ animated: Bool) {
        print("ViewController1")
    }
}

class ViewController2: UIViewController {
    override func viewWillAppear(_ animated: Bool) {
        print("ViewController2")
    }
}

class ViewController3: UIViewController {
    override func viewWillAppear(_ animated: Bool) {
        print("ViewController3")
    }
}

カスタマイズ

他にもCAPSPageMenuはとても多くのプロパティーを持っているため、デザインも色々カスタマイズできそうです。

public class CAPSPageMenu: UIViewController, UIScrollViewDelegate, UIGestureRecognizerDelegate {
    public var menuHeight : CGFloat = 34.0
    public var menuMargin : CGFloat = 15.0
    public var menuItemWidth : CGFloat = 111.0
    public var selectionIndicatorHeight : CGFloat = 3.0
    public var selectionIndicatorColor : UIColor = UIColor.whiteColor()
    public var selectedMenuItemLabelColor : UIColor = UIColor.whiteColor()
    public var unselectedMenuItemLabelColor : UIColor = UIColor.lightGrayColor()
    public var scrollMenuBackgroundColor : UIColor = UIColor.blackColor()
    public var viewBackgroundColor : UIColor = UIColor.whiteColor()
    public var bottomMenuHairlineColor : UIColor = UIColor.whiteColor()
    public var menuItemSeparatorColor : UIColor = UIColor.lightGrayColor()
    public var scrollAnimationDurationOnMenuItemTap : Int = 500 // Millisecons
    
    public var menuItemFont : UIFont = UIFont.systemFontOfSize(15.0)
    public var menuItemSeparatorPercentageHeight : CGFloat = 0.2
    public var menuItemSeparatorWidth : CGFloat = 0.5
    public var menuItemSeparatorRoundEdges : Bool = false
    
    public var addBottomMenuHairline : Bool = true
    public var menuItemWidthBasedOnTitleTextWidth : Bool = false
    public var titleTextSizeBasedOnMenuItemWidth : Bool = false
    public var useMenuLikeSegmentedControl : Bool = false
    public var centerMenuItems : Bool = false
    public var enableHorizontalBounce : Bool = true
    public var hideTopMenuBar : Bool = false
}