Storyboardを使ってContainerView+PageViewのサンプルを作ってみた

概要

横スクロールするメニュー＋メニューに連動してメインビューが切り替わる、
SmartNews等のアプリで見られるような、簡易なサンプルを作ってみました。
ポイントはこんな感じです。
・可能な限りStoryboadを使う（+Swift）
・横スクロールするメニュー⇒ScrollView+StackView
・メインビュー⇒ContainerView+PageView

このあたりの記事を参考にさせていただきました。
http://crossbridge-lab.hatenablog.com/entry/2015/12/26/210600
http://qiita.com/nofrmm/items/5cc122876b6c3af7a21e

ソース

ざっくりとした内容しか記載していないのでソース見たい方はこちらからどうぞ
https://github.com/koji-nishida/scrollmenu-container-pageview

完成イメージ

全体図

メニュー部の作成

ScrollView、StackView、Buttonを配置
Constraintsは下図のような感じ（Buttonは特に制約なし）
これで端末幅に合わせて横スクロールするメニューが完成

ScrollViewのConstraints

StackViewのConstraints

メインビュー部の作成

図のようにメニューの下にContainerViewを配置。
配置時点ではUIViewControllerがembedされているので、
UIViewControllerを消して、UIPaveViewControllerを配置しなおします。
ここでUIPaveViewControllerのCustom ClassにPageViewController.swiftを指定しておく。


ContainerViewのConstraints

実装部（PageViewにViewControllerをセット）

HomeViewController.swift

    var pageViewController: PageViewController!
    var menuViewControllers: Array<UIViewController> = []
    var selected: Int!

    override func viewDidLoad() {
        super.viewDidLoad()

        // PageViewControllerを取得する
        for vc in childViewControllers {
            if vc is PageViewController {
                pageViewController = vc as! PageViewController
            }

        }

        // PageViewにセットするViewControllerを生成して配列に入れる
        let storyboard = UIStoryboard(name: "Main", bundle: nil)
        let firstViewController = storyboard.instantiateViewControllerWithIdentifier("FirstViewController") as! FirstViewController
        let secondViewController = storyboard.instantiateViewControllerWithIdentifier("SecondViewController") as! SecondViewController
        let thirdViewController = storyboard.instantiateViewControllerWithIdentifier("ThirdViewController") as! ThirdViewController
        let fourthViewController = storyboard.instantiateViewControllerWithIdentifier("FourthViewController") as! FourthViewController
        menuViewControllers.append(firstViewController)
        menuViewControllers.append(secondViewController)
        menuViewControllers.append(thirdViewController)
        menuViewControllers.append(fourthViewController)

        // 初期表示をメニュー2(SecondViewController)にする
        pageViewController.setViewControllers([menuViewControllers[1]], direction: .Forward, animated: false, completion: nil)
        selected = 1
    }


puts 'The best way to log and share programmers knowledge.'

ポイント
・childViewControllersからPageViewControllerを探す
　もっといい方法があれば誰か教えて下さい
・各ViewControllerをStoryboardから生成して配列で保持しておく
・初期表示するViewControllerをセット

実装部（メニュー切り替え部）

HomeViewController.swift

@IBAction func actionMenu1(sender: AnyObject) {
        self.btnMenu1.enabled = false
        self.btnMenu2.enabled = true
        self.btnMenu3.enabled = true
        self.btnMenu4.enabled = true

        // 一番左までスクロール
        scrollViewMenu.setContentOffset(CGPointMake(0, 0), animated: true);

        // 表示切り替え
        pageViewController!.setViewControllers([menuViewControllers[0]], direction: .Reverse, animated: true, completion: nil)

        selected = 0

    }

    @IBAction func actionMenu2(sender: AnyObject) {
        self.btnMenu1.enabled = true
        self.btnMenu2.enabled = false
        self.btnMenu3.enabled = true
        self.btnMenu4.enabled = true

        // 一番左までスクロール
        scrollViewMenu.setContentOffset(CGPointMake(0, 0), animated: true);

        // 表示切り替え（前回選択していたメニューの位置に応じてアニメーションの向きを設定）
        if (selected < 1) {
            pageViewController!.setViewControllers([menuViewControllers[1]], direction: .Forward, animated: true, completion: nil)
        } else {
            pageViewController!.setViewControllers([menuViewControllers[1]], direction: .Reverse, animated: true, completion: nil)
        }

        selected = 1

    }

    @IBAction func actionMenu3(sender: AnyObject) {
        self.btnMenu1.enabled = true
        self.btnMenu2.enabled = true
        self.btnMenu3.enabled = false
        self.btnMenu4.enabled = true

        // 一番右までスクロール
        let scrollWidth = scrollViewMenu.contentSize.width - scrollViewMenu.frame.size.width
        scrollViewMenu.setContentOffset(CGPointMake(scrollWidth, 0), animated: true);

        // 表示切り替え（前回選択していたメニューの位置に応じてアニメーションの向きを設定）
        if (selected < 2) {
            pageViewController!.setViewControllers([menuViewControllers[2]], direction: .Forward, animated: true, completion: nil)
        } else {
            pageViewController!.setViewControllers([menuViewControllers[2]], direction: .Reverse, animated: true, completion: nil)
        }

        selected = 2

    }

    @IBAction func actionMenu4(sender: AnyObject) {
        self.btnMenu1.enabled = true
        self.btnMenu2.enabled = true
        self.btnMenu3.enabled = true
        self.btnMenu4.enabled = false

        // 一番右までスクロール
        let scrollWidth = scrollViewMenu.contentSize.width - scrollViewMenu.frame.size.width
        scrollViewMenu.setContentOffset(CGPointMake(scrollWidth, 0), animated: true);

        // 表示切り替え
        pageViewController!.setViewControllers([menuViewControllers[3]], direction: .Forward, animated: true, completion: nil)

        selected = 3

    }

ポイント
・特になし笑

最後に

Storyboardもずいぶん便利になったなーというのが一番の感想ですかね。
一昔前ではコードをがりがり書かないとできなかったようなことが、
Storyboardでこんなに簡単に作れるようになったなーという印象です。

今回は、メニューボタンのアクションによる画面切り替えしか対応していないので、
メインビュー部分をスクロールさせることでも画面がスライドするようにしないとですね。
ContainerViewのジェスチャーをとって、画面を切り替えるという感じでしょうか。

以上