UITableViewを水平方向(横)にスクロールさせたいと思ったらUICollectionViewを利用する

背景

iOSのUITableViewは、元々垂直方向(縦)のスクロールしか対応していない。
とはいえ、水平方向(横)のスクロールを実現したい場合は存在する。

横スクロールの場合は、UITableViewの代わりにUICollectionViewを利用すると良い。

実装方法

0. 完成イメージ

背景黒の部分がUICollectionViewで背景青の部分がひとつひとつのセル。
こんな感じで、横一列に並んだセルが横スクロールできるようなViewを作る。

1. UICollectionViewをViewControllerに配置

Object LibraryからCollection view を選んでViewControllerに配置

2. Collection View を設定していく

CollectionViewを選択状態にして

Layoutを「Horizontal」(水平)に変更

セルサイズ等もInterfaceBuilder上で設定可能。
今回は横スクロールのTableViewとして利用したいので、セルの高さとViewの高さを同じにする。
(赤枠はいじった所)

3. ViewControllerにDatasourceを設定

CollectionViewを利用するViewControllerでUICollectionViewDataSourceを継承させる

TestCollectionViewController.swift

import UIKit

// UICollectionViewDataSourceプロトコルを継承する

class TestCollectionViewController: UIViewController, UICollectionViewDataSource {

    @IBOutlet weak var collectionView: UICollectionView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // セルの登録
        collectionView.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: "Cell")
    }

    // MARK: - UICollectionViewDataSource

    // セルを返す(UITableViewでいうところの"tableView:cellForRowAtIndexPath:"
    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier("Cell", forIndexPath: indexPath) as UICollectionViewCell

        // 分かりやすいように背景色を青に
        cell.backgroundColor = UIColor.blueColor()

        return cell
    }

    // セル数を返す(UITableViewでいうところの"tableView:numberOfRowsInSection:"
    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 5;
    }
}

4. ViewControllerとInterfaceBuilderをつなぐ

InterfaceBuilderでViewControllerを選択して

カスタムクラスに、先ほどのViewControllerを指定。

CollectionViewに対して、必要なOutletを繋いであげる

成果物

以上で横スクロールのViewが利用できるようになった。
せっかくなんでアニメーションGIFで。

参考

iOS6 UICollectionViewを使ってみる ｜ Developers.IO
http://dev.classmethod.jp/smartphone/iphone/ios6-uicollectionview/