[Swift 3] Swift 3に対応したPagingMenuControllerを使ってみる

iOS 10

#iPhone

#iOS

#Swift

加藤潤

2016.10.17

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

PagingMenuControllerとは

PagingMenuControllerとはスワイプしたり、タブをタップすることで画面を切り替えることができるUIライブラリです。リリースノートによると、バージョン1.3.0からSwift 3.0に対応したとのことなので試してみました。ちなみにMITライセンスで公開されています。

本記事執筆時点の最新バージョンは2.0.0で使用するには以下の環境が必要です。

iOS9+
Swift 3.0+
Xcode 8.0+

ライブラリの導入

CocoaPodsで簡単に導入できます。
※ Carthageにも対応しているようです。詳しくはこちらをご覧ください。
筆者はCocoaPodsバージョン1.0.1で試しました。

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

pod "PagingMenuController"

post_install do |installer|
 installer.pods_project.targets.each do |target|
   target.build_configurations.each do |config|
     config.build_settings['SWIFT_VERSION'] = '3.0'
   end
 end
end

Podfileに上記内容を記述してpod installしたところ、以下のようなエラーになってしまいました。

[!] The dependency `PagingMenuController` is not used in any concrete target.

こちらによると、どうやらライブラリを導入するターゲートを明記しなければいけないとのことなので、以下の記述を追記して再度pod installしたところ、うまくいきました。

target "PagingMenuViewControllerSample" do
  pod "PagingMenuController"
end

使ってみる

インストールできたのでxcworkspaceファイルを開いて使ってみます。サンプルを元に少しだけカスタマイズしてみました。
ページ数を3として表示してみます。各ページに相当するViewControllerクラスのファイルを作成し、下記のようにビューの背景色を設定しました。

class ViewController1: UIViewController {

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        view.backgroundColor = UIColor.red
    }
}

同様にViewController2の背景色をgreen、ViewController3の背景色をblueに設定しました。

次に、PagingMenuControllerCustomizableに準拠したstructを作成します。
ハイライト部分がサンプルからの変更点です。

private struct PagingMenuOptions: PagingMenuControllerCustomizable {
    fileprivate var componentType: ComponentType {
        return .all(menuOptions: MenuOptions(), pagingControllers: pagingControllers)
    }

    fileprivate var pagingControllers: [UIViewController] {
        let vc1 = ViewController1()
        let vc2 = ViewController2()
        let vc3 = ViewController3()
        return [vc1, vc2, vc3]
    }

    fileprivate struct MenuOptions: MenuViewCustomizable {
        var displayMode: MenuDisplayMode {
            return .segmentedControl
        }
        var itemsOptions: [MenuItemViewCustomizable] {
            return [MenuItem1(), MenuItem2(), MenuItem3()]
        }

        var focusMode: MenuFocusMode {
            return .underline(height: 4.0, color: UIColor.black, horizontalPadding: 0.0, verticalPadding: 0.0)
        }
    }

    fileprivate struct MenuItem1: MenuItemViewCustomizable {
        var displayMode: MenuItemDisplayMode {
            return .text(title: MenuItemText(text: "First Menu"))
        }
    }
    fileprivate struct MenuItem2: MenuItemViewCustomizable {
        var displayMode: MenuItemDisplayMode {
            return .text(title: MenuItemText(text: "Second Menu"))
        }
    }
    fileprivate struct MenuItem3: MenuItemViewCustomizable {
        var displayMode: MenuItemDisplayMode {
            return .text(title: MenuItemText(text: "Third Menu"))
        }
    }
}

最後に、各ページの親となるビューコントローラーを以下のように実装します。

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let options = PagingMenuOptions()
        let pagingMenuController = PagingMenuController(options: options)

        addChildViewController(pagingMenuController)
        view.addSubview(pagingMenuController.view)
        pagingMenuController.didMove(toParentViewController: self)
    }
}