【Swift】PageViewControllerで画面遷移する

15887 ワード
iOS Swift プログラミング 画面遷移 Xcode Xcode テキストリンク

はじめに

今回はPageViewControllerを使ってスワイプした時に画面遷移をさせてみます。

GitHub

実装


一番左がPageViewControllerで、赤色がFirstViewController, 青色がSecondViewController, 緑色がThirdViewControllerです。

そして、PageViewControllerというUIPageViewControllerを継承したクラスを作ります。

final class PageViewController: UIPageViewController

色のついたViewControllrにStoryboardIDとSwiftファイルを用意してください。
全体のコードは以下の通りです。

final class PageViewController: UIPageViewController {

    private var controllers = [UIViewController]()

    override func viewDidLoad() {
        super.viewDidLoad()

        setupPageViewController()

    }

    private func setupPageViewController() {
        let firstVC = storyboard?.instantiateViewController(
            withIdentifier: "FirstViewController"
        ) as! FirstViewController
        let secondVC = storyboard?.instantiateViewController(
            withIdentifier: "SecondViewController"
        ) as! SecondViewController
        let thirdVC = storyboard?.instantiateViewController(
            withIdentifier: "ThirdViewController"
        ) as! ThirdViewController
        controllers = [firstVC, secondVC, thirdVC]
        setViewControllers([controllers[0]], direction: .forward, animated: true, completion: nil)
        self.dataSource = self
    }

}

extension PageViewController: UIPageViewControllerDataSource {

    func presentationCount(for pageViewController: UIPageViewController) -> Int {
        return controllers.count
    }

    func pageViewController(_ pageViewController: UIPageViewController,
                            viewControllerBefore viewController: UIViewController) -> UIViewController? {
        if let index = controllers.firstIndex(of: viewController),
           index < controllers.count - 1 {
            return controllers[index + 1]
        }
        return nil
    }

    func pageViewController(_ pageViewController: UIPageViewController,
                            viewControllerAfter viewController: UIViewController) -> UIViewController? {
        if let index = controllers.firstIndex(of: viewController),
           index > 0 {
            return controllers[index - 1]
        }
        return nil
    }

}

解説

表示するためのViewControllerを配列に格納して管理します。

    let firstVC = storyboard?.instantiateViewController(
        withIdentifier: "FirstViewController"
    ) as! FirstViewController
    let secondVC = storyboard?.instantiateViewController(
        withIdentifier: "SecondViewController"
    ) as! SecondViewController
    let thirdVC = storyboard?.instantiateViewController(
        withIdentifier: "ThirdViewController"
    ) as! ThirdViewController
    controllers = [firstVC, secondVC, thirdVC]
    // 最初の画面を設定
    setViewControllers([controllers[0]], direction: .forward, animated: true, completion: nil)
    // ここでデリゲートも設定しておく
    self.dataSource = self

setViewControllers(...)を使い、最初に表示する画面を設定します。 setViewControllers

setViewControllers([controllers[0]], direction: .forward, animated: true, completion: nil)

UIPageViewControllerDataSourceを見ていきます。

ページ数を返します。

func presentationCount(for pageViewController: UIPageViewController) -> Int {
    return self.controllers.count
}

左スワイプ（Before）した時の表示する画面を返します。

func pageViewController(_ pageViewController: UIPageViewController,
                        viewControllerBefore viewController: UIViewController) -> UIViewController? {
    if let index = controllers.firstIndex(of: viewController),
       index < controllers.count - 1 {
        return controllers[index + 1]
    }
    return nil
}

右スワイプ（After）した時の表示する画面を返します。

func pageViewController(_ pageViewController: UIPageViewController,
                        viewControllerAfter viewController: UIViewController) -> UIViewController? {
    if let index = controllers.firstIndex(of: viewController),
       index > 0 {
        return controllers[index - 1]
    }
    return nil
}

おわりに

PageViewController
PageViewControllerを使った画面遷移をしてみました。