スワイプページビューを作ってみよう

Blog

 

今回、紹介するのは、UIPageViewControllerを使って、ページをスワイプしてページをめくっていくものを作っていきます。

 

では、実際に作っていきましょう。

 

UIの設定

 

  • ViewControllerを3つ追加してそれぞれのBackgroundを変更。

 

 

 

 

  • 「Storyboard ID」をそれぞれ「First」「Second」「Third」に設定。

 

 

 

 

 

ファイルの作成

 

  • 3つのViewにそれぞれのファイルを作成し、関連づけする。
  • ファイル名は、「FirstView.swift」「SecondView.swift」「ThirdView.swift」に名付ける。

 

 

 

 

PageViewControllerを追加しファイルを作成

 

  • PageViewControllerを追加する。
  • 「Transition Style」を「Scroll」。
  • 「Is Initial View Controller」にチェックを入れる。
  • subClassが「UIPageViewController」のファイル名「PageViewController.swift」を作成、関連づける。

 

 

 

 

 

 

コーディング

 

 

import UIKit

class PageViewController: UIPageViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        self.setViewControllers([getFirst()], direction: .forward, animated: true, completion: nil)
        self.dataSource = self
        
    }
    
    func getFirst() -> FirstView {
        return storyboard!.instantiateViewController(withIdentifier: "First") as!FirstView
    }
    func getSecond() -> SecondView {
        return storyboard!.instantiateViewController(withIdentifier: "Second") as! SecondView
    }
    func getThird() -> ThirdView {
        return storyboard!.instantiateViewController(withIdentifier: "Third") as!ThirdView
    }
}

extension PageViewController : UIPageViewControllerDataSource {
    
    func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {
        if viewController.isKind(of: ThirdView.self) {
            // 3 -> 2
            return getSecond()
        } else if viewController.isKind(of: SecondView.self) {
            // 2 -> 1
            return getFirst()
        }else{
            // 1 -> end of the road
            return nil
        }
    }
    
    func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {
        if viewController.isKind(of: FirstView.self) {
            // 1 -> 2
            return getSecond()
        } else if viewController.isKind(of: SecondView.self) {
            // 2 -> 3
            return getThird()
        }else{
            // 3 -> end of the road
            return nil
        }
    }
}

 

実行結果

 

 

 

 

 

これでスワイプでページをスクロールできるようになりました。

 

以上で「」

 

 

 

 

コメント