UICollectionViewテンプレ覚書

2017/4/5追記

• fuzzballさんから、「UICollectionViewDelegateは必須じゃない」というコメントをいただきまして、説明が一部正確でないことがわかりました。
• ただ残念ながら、しばらくSwiftから離れていたため、正確に書き直すことができません。なので、こちらの記事を読み飛ばしてもらうか、該当の部分以外を参考になさってください。

目的

・UICollectionViewを使うための基本的なテンプレをまとめる

ゴール

・ 完成してみたらWindowsでした

環境

・Xcode 7.3

実装

storyboardの作成

・基本最初は空っぽのViewControllerから始めるポリシーなのでViewControllerを用意。

・こんな感じのレイアウトにする（コンストレイントはCollectionViewとLabelにのみかけてある）

・cellに対してidentiferをつける。名前は「Cell」で。

・また、編集できるように、Cellの中のUILabelに「１」のタグをつけておく。

・セルのサイズは今の所は適当でもいい。ただレイアウトするときの参考にするならそれに近い形になんとなくしておく

スーパークラスの継承

・以下のクラスが必要になる

import UIKit

class CollectionDemoViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {

//以下略

・UICollectionViewDataSource, UICollectionViewDelegateは絶対必須

・UICollectionViewDelegateFlowLayoutは別になくても作れるけれど、自分の思った通りのレイアウトを作りたいなら必要。つまりまともなものを作ろうと思ったら絶対必須（と思われる）

・このクラスをさっき作ったViewControllerに関連付け

クラス内へ記述

class CollectionDemoViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {

    //collectionViewをドラッグで引っ張ってここに置く
    @IBOutlet var collectionView: UICollectionView!

    //collectionCellにつけるラベルに表示する名前
    let names: [String] = ["red","blue","green","yellow"]
    //Cellの背景色
    let colors: [UIColor] = [UIColor.redColor(), UIColor.blueColor(), UIColor.greenColor(), UIColor.yellowColor()]

    override func viewDidLoad() {
        super.viewDidLoad()

        //セルがないところはデフォルトでは黒なので一応白にしておく
        collectionView.backgroundColor = UIColor.whiteColor()
        //collectionViewの関連付け
        collectionView.dataSource = self
        collectionView.delegate = self
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }


    //MARK: - collectionViewDataSource

    //collectionViewの要素の数を返す（必須）
    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return names.count
    }
    //collectionViewのセルを返す（必須）
    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("Cell", forIndexPath: indexPath)

    //背景色指定
    cell.backgroundColor = colors[indexPath.row]
    //タグを手掛かりにラベルを特定する
    let textLabel = cell.contentView.viewWithTag(1) as! UILabel
    textLabel.text = names[indexPath.row]
    return cell
}


    //MARK: - collectionViewDelegateFlowLayout

    //セルのサイズ（CGSize）を指定する
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        let cellSize: CGFloat = view.frame.size.width/2
        return CGSizeMake(cellSize, cellSize)
    }
    //こっちは上と似ているけど間違ってこっちを使うとサイズは変更されないよ！注意！
//    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize {
//        let cellSize: CGFloat = view.frame.size.width/2
//        return CGSizeMake(cellSize, cellSize)
//    }

    //縦の間隔を決定する
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
        return 1
    }
    //横の間隔
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
        return 0
    }
}

・これでひとまずできるはず

・おしまい