UITableViewHeaderFooterViewをxibで生成する

# はじめに
こんにちは
**UITableViewHeaderFooterView**という
tableViewのセクションで利用できるViewです。
```register(_: ,forHeaderFooterViewReuseIdentifier: )```
という再利用のメソッドがtableViewにあるのですが、
<img width="441" alt="スクリーンショット 2016-11-17 3.18.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/128250/8f30277d-360f-fc3c-0a7d-afab790973b4.png">
画像のようにxibファイルを同時に作成できなくて困ったので、
まとめてみたいと思います。
至らぬ点など多々あると思いますが、コメントなど頂けたら幸いです。

# カスタムClassとxibFileを作成する

## UITableViewHeaderFooterViewを継承したカスタムClass
~~~CustomHeaderFooterView.swift
import UIKit

class CustomHeaderFooterView: UITableViewHeaderFooterView {
    @IBOutlet weak var view: UIView!

    override func awakeFromNib() {       
    }
}
~~~
## xibFile
通常のViewをxibで準備するように,
File -> New -> File... -> User InterfaceのViewを選択し、xibFileを作成します。
<img width="350" alt="スクリーンショット 2016-11-17 3.45.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/128250/d1238d35-fa07-aba3-accc-a5ed5ec774c9.png">
「Custom Class」を先ほど作成した**CustomHeaderFooterView**に設定しています。
<img width="276" alt="スクリーンショット 2016-11-17 3.49.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/128250/199fb0e0-fb2b-0279-b85f-644c94c55391.png">
**Simulated Metrics**の設定やサイズを調節するとViewが見やすくなると思います。

---
<img width="490" alt="スクリーンショット 2016-11-17 3.56.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/128250/9879f88b-f90b-70c6-ca7d-0c6fdaf91138.png">
UIViewを追加します。**UITableViewHeaderFooterView**の持つ**contentView**が参照のみのプロパティで少し扱いにくいからです。(あまりよろしくないかもしれません...)
# TableViewで利用する
tableViewにCustomHeaderFooterViewを初期化するように登録します。

~~~ViewController.swift
override func viewDidLoad() {
    super.viewDidLoad()
    //xibの生成
    let xib = UINib(nibName: "CustomHeaderFooterView", bundle: nil)
    //再利用するための準備
    tableView.register(xib, forHeaderFooterViewReuseIdentifier: "CustomHeaderFooterView")
}
~~~
TableViewのDelegateにSectionの再利用を求めます

~~~swift
extension ViewController: UITableViewDelegate{
    //セクションの設定
    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let headerFooterView = tableView.dequeueReusableHeaderFooterView(withIdentifier: "CustomHeaderFooterView") as! CustomHeaderFooterView
        return headerFooterView
    }
}
~~~

# サンプルコード
一応、サンプルコード(動作させたViewController)を貼っておきたいと思います

~~~ViewController.swift
import UIKit

class ViewController: UIViewController{
    @IBOutlet weak var tableView: UITableView!
    
    var sectionData:[UIColor] = [UIColor.brown,UIColor.green,UIColor.cyan]
    var cellData:[String] = ["セル 1","セル 2","セル 3"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.dataSource = self
        tableView.delegate = self
        //セクションの高さを設定
        tableView.sectionHeaderHeight = 44
        //xibの生成
        let xib = UINib(nibName: "CustomHeaderFooterView", bundle: nil)
        //再利用するための準備
        tableView.register(xib, forHeaderFooterViewReuseIdentifier: "CustomHeaderFooterView")
    }
}

extension ViewController: UITableViewDataSource{
    //テーブルの行ごとのセルを返却する
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = UITableViewCell()
        cell.textLabel?.text = cellData[indexPath.row]
        return cell
    }
    //テーブルの行数を返却
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return cellData.count
    }
    //セクションの個数を返します
    func numberOfSections(in tableView: UITableView) -> Int {
        return sectionData.count
    }
}

extension ViewController: UITableViewDelegate{
    //セクションの設定
    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let headerFooterView = tableView.dequeueReusableHeaderFooterView(withIdentifier: "CustomHeaderFooterView") as! CustomHeaderFooterView
        headerFooterView.view.backgroundColor = sectionData[section]
        return headerFooterView
    }
}
~~~

# 参考にさせていただいた記事
> [スタック・オーバーフロー](http://stackoverflow.com/questions/17651880/uitableviewheaderfooterview-in-interfacebuilder)

ありがとうございます。