背景
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を継承させる
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/