[Swift]UIPageViewControllerを使ってみよう！

1 はじめに
- 1.1 前提条件
2 UIPageViewControllerとは
3 実装
4 さいごに

はじめに

こんにちはnukkyです。
以前コメントにてUIPageViewControllerの使い方がわからないとのコメントを頂いたので簡単に使い方を紹介したいと思います。

前提条件

Xcode 9.1
iOS 11 Simulator
Swift 4.0

UIPageViewControllerとは

簡単に説明するとUIViewControllerを複数同等な関係性で配置でき、それをスワイプ操作で遷移させられるものです、ものすごくざっくりいうとtabbarのtabが無いような形です。

実装

ViewControllerを準備

今回は３画面でサンプルを作成したいと思います。
３つ適当なViewControllerをファイルとStoryBoardに用意してください。
今回サンプルではFirstViewController、SecondViewController、ThirdViewControllerを用意したものとしてコードを書いていきます。

UIPageViewControllerを準備

まずUIPageViewControllerクラスを継承したファイルを作成してください。
今回のサンプルコードではPageViewControllerとしています。

import UIKit

class PageViewController: UIPageViewController {

import UIKit

class PageViewController: UIPageViewController {

StoryboardにUIPageViewControllerを作成しPageViewController関連付けをしてください。
このStoryboardにはFirstViewController、SecondViewController、ThirdViewControllerが用意されているのが前提とします。

最初の画面を設定

起動時にFirstViewControllerが表示されるように設定したいと思います。

class PageViewController: UIPageViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.setViewControllers([getFirst()], direction: .forward, animated: true, completion: nil)
        self.dataSource = self
    }
    
    func getFirst() -> FirstViewController {
        return storyboard!.instantiateViewController(withIdentifier: "FirstViewController") as! FirstViewController
    }
    
    func getSecond() -> SecondViewController {
        return storyboard!.instantiateViewController(withIdentifier: "SecondViewController") as! SecondViewController
    }
    
    func getThird() -> ThirdViewController {
        return storyboard!.instantiateViewController(withIdentifier: "ThirdViewController") as! ThirdViewController
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

class PageViewController: UIPageViewController {

override func viewDidLoad() {

super.viewDidLoad()

self.setViewControllers([getFirst()], direction: .forward, animated: true, completion: nil)

self.dataSource = self

}

func getFirst() -> FirstViewController {

return storyboard!.instantiateViewController(withIdentifier: "FirstViewController") as! FirstViewController

}

func getSecond() -> SecondViewController {

return storyboard!.instantiateViewController(withIdentifier: "SecondViewController") as! SecondViewController

}

func getThird() -> ThirdViewController {

return storyboard!.instantiateViewController(withIdentifier: "ThirdViewController") as! ThirdViewController

}

override func didReceiveMemoryWarning() {

super.didReceiveMemoryWarning()

}

setViewControllersでgetSecondもしくはgetThirdを行うことで最初に表示する画面をFirstViewController以外にすることも可能です。

UIPageViewControllerDataSourceの編集

UIPageViewControllerDataSourceを編集し画面を切り替えの設定を行います。

extension PageViewController : UIPageViewControllerDataSource {
    
    func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {
        
        if viewController.isKind(of: ThirdViewController.self) {
            return getSecond()
        } else if viewController.isKind(of: SecondViewController.self) {
            return getFirst()
        } else {
            return nil
        }
    }
    
    func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {
        
        if viewController.isKind(of: FirstViewController.self) {
            return getSecond()
        } else if viewController.isKind(of: SecondViewController.self) {
            return getThird()
        } else {
            return nil
        }
    }
}

extension PageViewController : UIPageViewControllerDataSource {

func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {

if viewController.isKind(of: ThirdViewController.self) {

return getSecond()

} else if viewController.isKind(of: SecondViewController.self) {

return getFirst()

} else {

return nil

}

func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {

if viewController.isKind(of: FirstViewController.self) {

return getSecond()

} else if viewController.isKind(of: SecondViewController.self) {

return getThird()

} else {

return nil

}

現在の画面を判断しpageViewController(___After_)、pageViewController(___before_)メソッドで適切な画面を返すようにしています。今回はループをしないようにnilを返している箇所もありますがここでViewControllerを返すことで画面をループさせることも可能です。

さいごに

かなり駆け足でしたがUIPageViewControllerの基礎的な使い方の紹介になります。ちょっと知識がないと敷居が高いように感じますが使うだけならこのように結構簡単にいけますし、使いどころもあると思うので是非使ってみてください。

日	月	火	水	木	金	土
« 1月				3月 »
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28