CollectionViewでPagingする方法

iOSアプリで左右にスクロール（Paging）する画面を作る際は、PageViewControllerを使用することが多いと思います。今回はPageViewControllerの代わりにUICollectionViewを使用してPagingする方法を説明します。 PageViewControllerを使用した場合、 各Pageにindexのプロパティを持たせて、スクロールのdelegateメソッド内で次のpageのindexを求めて、左右のスクロールでそれぞれ設定してあげて・・・、と何かと面倒です。 単純なPagingだけならもっと簡単に出来ます。

1. StoryboardでCollection View Controllerを追加します。

   Pagingのスタイルの設定はStoryboardで行います。
   OutlineパネルでCollection Viewを選択します。
   Utilityパネルの右から3番目の設定を開きます。
   • LayoutをFlowに設定します。
   • Scroll DirectionをHorizontalに設定します。
   • ScrollingをScrolling Enabledに設定します。
   • Paging Enabledにチェックを入れます。
   Storyboardでの設定は以上で終了です。 次は、表示するViewの設定をソースコード上で行います。

2. UICollectionViewControllerを継承したCocoa Touch Classファイルを作成します。

説明のため名前はPagingViewControllerとしました。
設定するポイントは以下です。

pagesプロパティ

UIViewControllerの配列です。 　viewDidLoadした際に、UIViewControllerのインスタンスを追加します。 numberOfItemsInSectionの返り値として、pagesのサイズを返します。

UICollectionViewDelegateFlowLayout

追加したクラスのdelegateとして設定します。

viewの表示

cell.contentViewにpagesのviewをaddSubviewします。

view, cellのサイズ

self.view.frame
collectionView.frame
cell.contentView.frame
がそれぞれ等しくなるようにします。

できあがったソースコードはこちら
git@github.com:takanori-matsumoto-mulodo/EasyPager.git

import UIKit

let reuseIdentifier = "Cell"

class PagingViewController: UICollectionViewController, UICollectionViewDelegateFlowLayout {

    var pages = [UIViewController]()
    override func viewDidLoad() {
        super.viewDidLoad()

        // Uncomment the following line to preserve selection between presentations
        // self.clearsSelectionOnViewWillAppear = false

        // Register cell classes
        self.collectionView!.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: reuseIdentifier)

        // Do any additional setup after loading the view.
        let vc1 = UIViewController()
        vc1.view.backgroundColor = UIColor.redColor()
        pages.append(vc1)
        let vc2 = UIViewController()
        vc2.view.backgroundColor = UIColor.blueColor()
        pages.append(vc2)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        pages[0].view.frame = view.bounds
        pages[1].view.frame = view.bounds
    }

    // MARK: UICollectionViewDataSource
    override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        //#warning Incomplete method implementation -- Return the number of sections
        return 1
    }


    override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        //#warning Incomplete method implementation -- Return the number of items in the section
        return pages.count
    }

    override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as UICollectionViewCell
    
        // Configure the cell
        let row = indexPath.row
        let vc = pages[row].view
        cell.contentView.addSubview(vc)
    
        return cell
    }
    
    // MARK: UICollectionViewDelegateFlowLayout
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        return collectionView.frame.size
    }
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
        return 0
    }
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
        return 0
    }
}