スワイプ移動ページUIの実現

ここでの スワイプ移動ページUI とは、

「あらかじめ複数のページを横に並べておいて、
スワイプによって横スクロール式にページを切り替える」

UIを指しています。

たとえば、
トップにナビゲーションバーやセグメントを固定しておいて、
その下のページをスワイプで切り替えたい時
などを想定してます。

横スクロール型UIと言ってもいいかもしれませんね。

このスワイプ移動ページUIを実現する方法はいくつかありますが、
PageViewとかScrollViewを使うと、実装の手間がかかりがちです。

そこで、今回はより簡単な方法を模索して、
UICollectionViewを使ったスワイプ移動ページUI
を実現したいと思います。

##1. UICollectionViewControllerを継承させる

まず始めに、Storyboard上にUICollectionViewControllerを追加して、
コントローラーとひもづけましょう。

UICollectionView自体の解説は本筋から外れるので、
詳細は割愛してざっくり説明で進みます。

手順

StoryboardにCollectionViewを追加
Layoutは「Flow」
Scroll Directionは「Horizontal」
Scrollingの「Paging Enabled」にチェック
UICollectionViewControllerを継承したPageCollectionViewControllerを作成
StoryboardのCollectionViewのコントローラーにPageCollectionViewControllerを指定

実装

import UIKit

class PageCollectionViewController: UICollectionViewController {
    
    var pages:Pages = Pages(){
        didSet {
            self.collectionView?.reloadData()
        }
    }

    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

##2. データの準備とUICollectionViewDelegateの実装

最低限、セルの数とセルの種類を返すdelegateは実装しましょう。

手順

構造体を定義
組み込みたいページを追加
"PageCollectionViewCell"というIDでUICollectionViewCellを用意
構造体に定義されている数だけ、CollectionViewCellを作る

実装

import UIKit


struct Pages {
    var viewControllers:[UIViewController] = []
}

class PageCollectionViewController: UICollectionViewController {
    
    var pages:Pages = Pages(){
        didSet {
            self.collectionView?.reloadData()
        }
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let page1 = UIViewController()
        page1.view.backgroundColor = UIColor.yellowColor()
        self.pages.viewControllers.append(page1)
        
        let page2 = UIViewController()
        page2.view.backgroundColor = UIColor.blueColor()
        self.pages.viewControllers.append(page2)        
    }

    
    // MARK: - UICollectionViewDelegate
    
    override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

        return self.pages.viewControllers.count

    }
    
    override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

        var cell = collectionView.dequeueReusableCellWithReuseIdentifier("PageCollectionViewCell", forIndexPath: indexPath) as UICollectionViewCell

        let view = self.pages.viewControllers[indexPath.row].view
                
        return cell
    }
    
}

##3. セルにページをaddSubviewする

次の部分を編集して、
indexPathに対応するviewをセルに貼付けましょう。

手順

indexPathに対応するviewを取り出す
cell.contentViewにはり付ける

実装

  override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

    var cell = collectionView.dequeueReusableCellWithReuseIdentifier("PageCollectionViewCell", forIndexPath: indexPath) as UICollectionViewCell
    
    let view = self.pages.viewControllers[indexPath.row].view
    cell.contentView.addSubview(view)

    return cell
  }

}

##4.セルのサイズを動的に変える

ここまでの実装で、セルにページ情報を表示させることが出来ますが、
セルのサイズが小さいままです。

次は、セルサイズを画面全体の大きさに変動させましょう。

そのためには、作成したPageCollectionViewControllerに
UICollectionViewDelegateFlowLayoutのメソッドを実装します。

ここでは次のようにコードを追加します。

1つ目のメソッドで返すCGSizeがセルの大きさになり、
残りの2つは、それぞれ横のスペース・縦のスペースになります。
(後の2つはStoryboardからも設定可)

注意点

状況によってはAutoLayoutとの兼ね合いに注意が必要です

手順

メソッド内で実現したいCGSizeを求めて返す
セルとセルの間スペースは、0を指定

実装

	/// セルの大きさ
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    
        var pageViewRect = self.view.bounds        
        
        return CGSize(width: pageViewRect.width, height: pageViewRect.height)
    }
     
    /// 横のスペース
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {

        return 0.0

    }
    
    /// 縦のスペース
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {

        return 0.0

    }

完成

以上です。

最後に完成したコードを載せておきます。
コードを整理してコンパクトにすると、ぴったり50行。

最後まで読んでくださり
ありがとうございました！

追記

2015/01/15 - コメントで指摘頂いた内容を反映し、下記を追加

self.collectionView?.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: "PageCollectionViewCell")

実装


import UIKit

struct Pages {
    var viewControllers:[UIViewController] = []
}

class PageCollectionViewController: UICollectionViewController {
    
    var pages:Pages = Pages(){
        didSet { self.collectionView?.reloadData() }
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        self.collectionView?.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: "PageCollectionViewCell")

        let page1 = UIViewController()
        self.pages.viewControllers.append(page1)
        
        let page2 = UIViewController()
        page2.view.backgroundColor = UIColor.blueColor()
        self.pages.viewControllers.append(page2)
    }

    // MARK: - UICollectionViewDelegate
    
    override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return self.pages.viewControllers.count
    }
    
    override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        var cell = collectionView.dequeueReusableCellWithReuseIdentifier("PageCollectionViewCell", forIndexPath: indexPath) as UICollectionViewCell
        let view = self.pages.viewControllers[indexPath.row].view
        cell.contentView.addSubview(view)
        return cell
    }
    
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        var pageViewRect = self.view.bounds
        return CGSize(width: pageViewRect.width, height: pageViewRect.height)
    }
    
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
        return 0.0
    }
    
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
        return 0.0
    }
}