【iOS】UICollectionViewでセクションごとにヘッダを付ける

# UICollectionViewでセクションごとにヘッダを付ける

## ストーリーボードの状態
ストーリーボードにはUICollectionViewが置いてある状態です。
このcollectionにセクションヘッダのnibを追加して登録していきます。
![Main_storyboard.png](https://qiita-image-store.s3.amazonaws.com/0/48625/5dc5d75f-2288-b4ce-e37e-a16a0e5eb6a5.png)

## セクションヘッダのnibを作成する

セクションヘッダのUICollectionReusableViewを継承したMyCollectionReusableViewを作成します。

```swift:MyCollectionReusableView.swift
import UIKit
import Foundation

class MyCollectionReusableView : UICollectionReusableView {
    @IBOutlet weak var headerLabel: UILabel!
}
```

TopHeader.xib を作成します。
CollectionReusableViewパーツを配置します。
![TopHeader_xib_—_Edit3ed.png](https://qiita-image-store.s3.amazonaws.com/0/48625/1f6fb82e-bbeb-ae3f-dfe5-e359e642e65d.png)

セクション名用のラベルを配置して、CollectionReusableViewパーツを作ったクラスと関連付けました。
![TopHeader_xib_—_Edited.png](https://qiita-image-store.s3.amazonaws.com/0/48625/0c3ffe17-d9be-b7d4-f7d5-abab55256abb.png)


セクション名用のラベルはMyCollectionReusableViewのIBOutletと関連付けます。
![TopHeader_xib_—_Edited2.png](https://qiita-image-store.s3.amazonaws.com/0/48625/fed15d69-feef-dd41-8aee-39af6523997f.png)


## ViewControllerのcollectionにnibを登録する
myCollectionViewはストーリーボードと関連付けているCollectionViewです。
後からグループ化しているので、０番目のセクションヘッダは表示しないようにしてみました。
セクション名のところを配列から取得するようにするとセクションごとにセクション名が出るようになります。

```swift:MyViewController.swift
    override func viewDidLoad(){

        // ヘッダーnib登録
        let nib:UINib = UINib(nibName: "TopHeader", bundle: nil)
        myCollectionView.registerNib(nib, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "MyHeader")
    }

    func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {
        
        var header:MyCollectionReusableView? = nil
        
        if (kind == UICollectionElementKindSectionHeader) {
            
            header = self.myCollectionView.dequeueReusableSupplementaryViewOfKind(UICollectionElementKindSectionHeader, withReuseIdentifier: "MyHeader", forIndexPath: indexPath) as? MyCollectionReusableView

            switch(indexPath.section){
                case 0:
                    return header!
                default:
                    header?.headerLabel.text = "セクション名"
                    return header!
            }
        }else{
            return header!
        }
    }

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
        
        switch(section){
            case 0:
                return CGSize(width: 0, height: 0)
            default:
                return CGSize(width: self.view.bounds.width, height: 20)
        }
    }
```

## 参考にしたサイト
[[iOS6] Collection View 基本的な使い方](http://natsuapps.com/note/2012/09/ios6-collection-view-basic.html)
[UICollectionViewにヘッダーを付ける方法がわかった](http://qiita.com/hanoopy/items/00387eb28879f003fa6d)
[UICollectionViewでheaderとfooterを使う](http://d.hatena.ne.jp/corrupt/20150212/1423722498)
[【iOS】CollectionViewにヘッダーとフッター両方を追加する](http://qiita.com/kaktaam/items/6035708823f31d4530a1)
[055 UICollectionViewをセクション毎に分ける](https://sites.google.com/a/gclue.jp/swift-docs/ni-yinki100-ios/uikit/uicollectionviewwosekushon-meini-fenkeru)