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


### 背景

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

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

## 実装方法

### 0. 完成イメージ

![iOS_Simulator_-_iPhone_6_-_iPhone_6___iOS_8_1__12B411_ 2.png](https://qiita-image-store.s3.amazonaws.com/0/62874/bf56d65d-699c-5492-9cd4-7cf051e26477.png "iOS_Simulator_-_iPhone_6_-_iPhone_6___iOS_8_1__12B411_ 2.png")

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

### 1. UICollectionViewをViewControllerに配置

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

![Main_storyboard_—_Edited.png](https://qiita-image-store.s3.amazonaws.com/0/62874/a9d48f97-51cb-2ef6-d2d6-fa51f45f217f.png "Main_storyboard_—_Edited.png")

![Main_storyboard_—_Edited 2.png](https://qiita-image-store.s3.amazonaws.com/0/62874/4c9ca6d4-ed96-4180-1dce-12b3bc61142d.png "Main_storyboard_—_Edited 2.png")

### 2. Collection View を設定していく

CollectionViewを選択状態にして

![スクリーンショット_2015-11-01_19_55_16.png](https://qiita-image-store.s3.amazonaws.com/0/62874/299c921f-9d21-defc-4776-beb814de2f78.png "スクリーンショット_2015-11-01_19_55_16.png")

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

![スクリーンショット_2015-11-01_19_24_27.png](https://qiita-image-store.s3.amazonaws.com/0/62874/388229dc-0b24-75b4-cac5-84e3c6c3fada.png "スクリーンショット_2015-11-01_19_24_27.png")

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

![スクリーンショット_2015-11-01_19_58_46.png](https://qiita-image-store.s3.amazonaws.com/0/62874/9ab0326b-00b8-5e0d-16de-2624c484f979.png "スクリーンショット_2015-11-01_19_58_46.png")

### 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を選択して

![Main_storyboard_—_Edited 3.png](https://qiita-image-store.s3.amazonaws.com/0/62874/4ca62699-e11e-ade6-f06a-0e99292a3b70.png "Main_storyboard_—_Edited 3.png")

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

![Main_storyboard_—_Edited 4.png](https://qiita-image-store.s3.amazonaws.com/0/62874/2ddce077-9ded-20db-bbf8-18c53d6d343d.png "Main_storyboard_—_Edited 4.png")

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

![Main_storyboard_—_Edited 5.png](https://qiita-image-store.s3.amazonaws.com/0/62874/d7d974a5-b7c7-59ee-6b93-4f1d5e0b1bde.png "Main_storyboard_—_Edited 5.png")

## 成果物

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

![2bfcd80c24ff73b102a11b5942021bb9.gif](https://qiita-image-store.s3.amazonaws.com/0/62874/2f481093-e0f6-1a8d-2aab-90095c95d5df.gif "2bfcd80c24ff73b102a11b5942021bb9.gif")


## 参考

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