UITableViewControllerのStatic Cellsをカスタマイズしてアプリの設定画面を作る

# はじめに
UITableViewControllerで利用できる**Static Cells**というセルがあり、
表示させる中身に変更が無いシーン(アプリの設定画面など)で便利なようです。
**セクションのラベル**や**背景色**などは**Inspector**で設定できなくて、実装に少し困ったのでメモとして書いてみたいと思います。至らぬ点はコメントなど頂けたら幸いです。

# サンプル
:ear_of_rice:Storyboardを利用してアプリのデザインに合わせて色を変えたり、比較的簡単に設定画面を作成できます。

<img width="160" alt="setting_white.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/128250/1e5215e0-e3d2-883f-7a27-8bd9d9c7b592.png"><img width="160" alt="setting_black.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/128250/6a14dc63-3e97-917e-6c85-f1bd43216437.png"><img width="160" alt="IMG_0931.png" src="https://qiita-image-store.s3.amazonaws.com/0/128250/cb5df345-5118-1e24-f15f-b51183cf6cf5.png">

# UITableViewControllerの準備
Storyboardに**UITableViewController**を置き、TableViewのContentを`Static Cells`に変更します。
[UITableViewCellStyle](https://developer.apple.com/documentation/uikit/uitableviewcellstyle)で既存のデザインを利用したり、StoryboardでセルのContent Viewに部品を追加してセルを作っていくことが基本になります。
また、世間に出ているアプリの設定画面は、[UITableViewStyle](https://developer.apple.com/documentation/uikit/uitableviewstyle)の`Glouped`で作成されているものが多い気がします。

<img width="320" alt="sam.png" src="https://qiita-image-store.s3.amazonaws.com/0/128250/48548451-3900-dfa9-97c0-068e53f7dec9.png">

#グローバルなHeaderとFooterにカスタムViewを設定
:ear_of_rice:UITableViewの`プロパティ`で設定することができます。

![Slice.png](https://qiita-image-store.s3.amazonaws.com/0/128250/4f7a4ed7-736e-3943-caaf-1ab81dd3a70c.png)

```MainTableViewController.swift
override func viewDidLoad() {
    super.viewDidLoad()
    //グローバルなTableViewのheaderやfooterにカスタムViewを設定
    tableView.tableHeaderView = CustomGlobalHeaderView()
    tableView.tableFooterView = CustomGlobalFooterView()
}
```

# セクションのカスタマイズ
## 「セルの数」と「Header Footerのラベル」の設定
:ear_of_rice:Storyboardで設定ができます。

<img width="320" alt="Group.png" src="https://qiita-image-store.s3.amazonaws.com/0/128250/d9228521-4b24-b8a8-aba5-384063dad7f6.png">

|名前|説明|
|:-:|:-:|
|Rows|そのセクションの中のセルの数|
|Header|ヘッダーのラベル<br>入力するとStoryboardでヘッダーが作成される|
|Footer|フッターのラベル<br>入力するとStoryboardでヘッダーが作成される|

## 「ラベル」や「背景色」の設定
:ear_of_rice:Storyboardで設定ができないので`UITableViewDelegate`のメソッドを利用します。

```MainTableViewController.swift
//Headerが表示される時の処理
override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
    guard let header = view as? UITableViewHeaderFooterView else { return }
    //Headerのラベルの文字色を設定
    header.textLabel?.textColor = UIColor.white
    //Headerの背景色を設定
    header.contentView.backgroundColor = UIColor(hex: 0x282828)
}
//Footerが表示される時の処理
override func tableView(_ tableView: UITableView, willDisplayFooterView view: UIView, forSection section: Int) {
    guard let footer = view as? UITableViewHeaderFooterView else { return }
    //Footerのラベルの文字色を設定
    footer.textLabel?.textColor = UIColor.white
    //Footerの背景色を設定
    footer.contentView.backgroundColor = UIColor(hex: 0x282828)
}
```

## HeaderとFooterの高さの設定
:ear_of_rice:UITableViewのスタイルを**Style Grouped**に設定している場合、
Storyboardでのセクションの高さ設定は[効かないようです](https://stackoverflow.com/questions/8615862/custom-cell-row-height-setting-in-storyboard-is-not-responding)。

<img width="320" alt="Group 3.png" src="https://qiita-image-store.s3.amazonaws.com/0/128250/5fc4cf35-7ca7-703f-467f-58cfd1a882ec.png">

:ear_of_rice:**Style Grouped**に設定した時のデフォルトの高さは以下になっています。変更する場合は`UITableViewDelegate`メソッドを利用します。

|行|Header高さ|Footerの高さ|
|:-:|:-:|:-:|
|1行目|55|30|
|2行目|38|30|
|...|...|...|

```MainTableViewController.swift
//Headerの高さ
override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 60
}
//Footerの高さ
override func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
    return 50
}
```

## HeaderとFooterにカスタムViewを設定する
:ear_of_rice:より詳細なレイアウトを行いたい場合は、独自のViewを設定してしまうのも1つの方法です。`UITableViewDelegate`メソッドを利用します。

```MainTableViewController.swift
//HeaderViewを返却
override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    return CustomHeaderView()
}
//FooterViewを返却
override func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
    return CustomFooterView()
}
```

# 参考にさせていただいた記事
- [UIViewController上でTableView をいじってみた Qiita](http://qiita.com/MichaelAwamura/items/b64c8830567f67f96003)

- [UITableViewについて Apple](https://developer.apple.com/documentation/uikit/uitableview)

見て頂いてありがとうございます。