[Swift4]PagingMenuControllerを使って、スマートニュース風のタブを表示する

2018年9月6日ITSwift

UIライブラリ PagingMenuControllerを使って、スマートニュース風のタブのサンプルを作成したのですが、その簡単な導入手順です
参考:kitasuke/PagingMenuController

こちらの記事を主に参考にさせていただき、、
参考:Swift4 PagingMenuControllerでタブを実装する

下記手順を追加しております
・Main.storyboard で idを振り付け
・ステータスバーと PagingMenuController の高さ調整

[完成動画]

[環境]
Xcode 9.2
Swift 4.0.3
PagingMenuController 2.2.0 (CocoaPodsで導入)
参考:初心者向け CocoaPods の使い方 [導入編]

Main.storyboardにViewControllerを置く

(サンプルはPagingMenuViewController1, 2, 3 と3つ置きました)

swift4-pagingmenu1

Main.storyboard と それぞれのViewController を紐付ける

(StroryBoard ID は それぞれ PagingMenuVC1, 2, 3 としました)

swift4-pagingmenu2

ビルドエラーを、補正機能で Fix する

(Swift 4 でビルドエラーになる件はまだ対応されてないようです)

参考:Swift 4 Version?

swift4-pagingmenu3

PagingMenuController と PagingMenu のオプションを作成する

ViewController.swift

import UIKit
import PagingMenuController

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // PagingMenuController追加
        let options = PagingMenuOptions()
        let pagingMenuController = PagingMenuController(options: options)
        
        self.addChildViewController(pagingMenuController)
        self.view.addSubview(pagingMenuController.view)
        pagingMenuController.didMove(toParentViewController: self)
    }

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

}

private struct PagingMenuOptions: PagingMenuControllerCustomizable {
    let pv1 = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "PagingMenuVC1") as! PagingMenuViewController1
    let pv2 = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "PagingMenuVC2") as! PagingMenuViewController2
    let pv3 = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "PagingMenuVC3") as! PagingMenuViewController3
    
    fileprivate var componentType: ComponentType {
        return .all(menuOptions: MenuOptions(), pagingControllers: pagingControllers)
    }
    
    fileprivate var pagingControllers: [UIViewController] {
        return [pv1, pv2, pv3]
    }
    
    fileprivate struct MenuOptions: MenuViewCustomizable {
        var displayMode: MenuDisplayMode {
            return .infinite(widthMode: .flexible, scrollingMode: .scrollEnabled)
        }
        var height: CGFloat {
            return 40
        }
        var backgroundColor: UIColor {
            return UIColor.lightGray
        }
        var selectedBackgroundColor: UIColor {
            return UIColor.gray
        }
        var focusMode: MenuFocusMode {
            return .roundRect(radius: 4, horizontalPadding: 4, verticalPadding: 4, selectedColor: UIColor.black)
        }
        var itemsOptions: [MenuItemViewCustomizable] {
            return [MenuItem1(), MenuItem2(), MenuItem3()]
        }
    }
    
    fileprivate struct MenuItem1: MenuItemViewCustomizable {
        var displayMode: MenuItemDisplayMode {
            return .text(title: MenuItemText(text: "赤い画面", color: UIColor.red, selectedColor: UIColor.white))
        }
    }
    
    fileprivate struct MenuItem2: MenuItemViewCustomizable {
        var displayMode: MenuItemDisplayMode {
            return .text(title: MenuItemText(text: "青い画面", color: UIColor.blue, selectedColor: UIColor.white))
        }
    }
    
    fileprivate struct MenuItem3: MenuItemViewCustomizable {
        var displayMode: MenuItemDisplayMode {
            return .text(title: MenuItemText(text: "黄色い画面", color: UIColor.yellow, selectedColor: UIColor.white))
        }
    }
    
}

ステータスバーと PagingMenuController がかぶっているので、高さを調節

swift4-pagingmenu4

override func viewDidLoad() {
        super.viewDidLoad()
        // PagingMenuController追加
        let options = PagingMenuOptions()
        let pagingMenuController = PagingMenuController(options: options)

        // 高さ調整。この2行を追加
        pagingMenuController.view.frame.origin.y += 20
        pagingMenuController.view.frame.size.height -= 20
        
        self.addChildViewController(pagingMenuController)
        self.view.addSubview(pagingMenuController.view)
        pagingMenuController.didMove(toParentViewController: self)
}

完成

以上になります。

ひとこと

Swift 2 から 3 で大幅に変わって、3 から 4 へも後方互換性がないようで、、、Xcode の補正機能がなかったらと思うとぞっとします。

スポンサーリンク

Posted by nobuhiro harada