dasukoの技術ブログ

現役エンジニアのブログです。

【Swift】PageViewControllerを使ってみる!画面遷移の実装

はじめに

今回はUIPageViewControllerを使ってみます!

面倒なのでStoryboardは使わずにやってみます!

 

UIPageViewControllerはこちらです!

Apple Developer Documentation

PageViewControllerを使ってみる

今回は

import UIKit

class PageViewController: UIPageViewController {
    // ViewControllerを管理する
    var controllers: [UIViewController] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // 赤いViewController
        let redVC = UIViewController()
        redVC.view.backgroundColor = .red

        // 青いViewController        
        let blueVC = UIViewController()
        blueVC.view.backgroundColor = .blue

        controllers = [redVC, blueVC]
        // 最初のViewControllerを赤色のViewControllerを設定
        setViewControllers([controllers[0]], direction: .forward, animated: true, completion: nil)
        self.dataSource = self
    }
}

// MARK: - UIPageViewControllerDataSource
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 > 0 {
            return controllers[index - 1]
        }
        return nil
    }
    
    func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {
        if let index = controllers.firstIndex(of: viewController),
           index < controllers.count - 1 {
            return controllers[index + 1]
        }
        
        return nil
    }
}

ViewControllerの設定

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

ここでViewControllerを設定しています。

directionforwardに指定していますが、reverseもあります。

direction  
foreward 左から右にフリックするとページが進みます
reverse 右から左にフリックするとページが進みます

実行してみたらこんな感じになります。

ページをめくるようなアニメーションが自動で導入されるんですね!

gyazo.com

DataSource

今表示しているViewControllerの前のViewControllerを指定します。

nilを返した場合はページを前に戻すことができなくなります。

(一番最初のページの場合など)

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

  今表示されているViewControllerの後に表示するViewController を指定します。

(一番最後のページの場合など)

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

ページインジケータに表示するインデックス

optional func presentationIndex(for pageViewController: UIPageViewController) -> Int

ページインジケータに表示するアイテムの数

optional func presentationCount(for pageViewController: UIPageViewController) -> Int

TransitionStyle

ページ遷移するときのスタイルを指定できます。

これは後から変更できず、Storyboardから設定する場合はTransitionStyleから設定します。

コードから設定する場合はUIPageViewControllerインスタンスを初期化するときに

以下のメソッドを使います。

init(transitionStyle style: UIPageViewController.TransitionStyle, 
navigationOrientation: UIPageViewController.NavigationOrientation, 
options: [UIPageViewController.OptionsKey : Any]? = nil)
TransitionStyle
pageCurl ページをめくるようなアニメーションが実行されます
scroll スクロールでページをめくります(ページをめくるアニメーションなし)

PageCurlの場合

gyazo.com

Scrollの場合

gyazo.com

参考

【Swift】Swift入門 ~ UIPageViewControllerを使ってみる ~ | blog(スワブロ) | スワローインキュベート

【Swift】Page View Controllerの設定。画面遷移のアニメーションを変更する。(Swift 2.1、XCode 7.2) | はじはじアプリ体験メモ