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

More than 3 years have passed since last update.


背景

iOSのUITableViewは、元々垂直方向(縦)のスクロールしか対応していない。

とはいえ、水平方向(横)のスクロールを実現したい場合は存在する。

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


実装方法


0. 完成イメージ

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

Main_storyboard_—_Edited 2.png


2. Collection View を設定していく

CollectionViewを選択状態にして

スクリーンショット_2015-11-01_19_55_16.png

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

スクリーンショット_2015-11-01_19_24_27.png

セルサイズ等もInterfaceBuilder上で設定可能。

今回は横スクロールのTableViewとして利用したいので、セルの高さとViewの高さを同じにする。

(赤枠はいじった所)

スクリーンショット_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

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

Main_storyboard_—_Edited 4.png

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

Main_storyboard_—_Edited 5.png


成果物

以上で横スクロールのViewが利用できるようになった。

せっかくなんでアニメーションGIFで。

2bfcd80c24ff73b102a11b5942021bb9.gif


参考

iOS6 UICollectionViewを使ってみる | Developers.IO

http://dev.classmethod.jp/smartphone/iphone/ios6-uicollectionview/