読者です 読者をやめる 読者になる 読者になる

しめ鯖日記

swift, iPhoneアプリ開発, ruby on rails等のTipsや入門記事書いてます

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.blueColor()
        let vc2 = UIViewController()
        vc2.title = "VC2"
        vc2.view.backgroundColor = UIColor.greenColor()
        
        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をスワイプで切り替えできるようになります。

f:id:llcc:20160615233248p:plain

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)
}

他にも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
}