TableView の上下に一緒にスクロール可能なスペースを作る方法


## はじめに

TableView の上下にスペースを少し用意する実装があった。
縛りは下記の通り。

- 上下にスペースをあけないといけない
- そのスペースも一緒にスクロールしないといけない  
　(TableViewがスクロールしきったときにあるスペースを指す)
- 色を背景色に合わせないといけない


## さてどうする

頭をひねって考えて，下記を思いついた。

* 方法
 - TableView の上に UIView を貼ってスクロールさせる
 - TableView のヘッダー(セクション部)を用いる
 - TableView のフッターを用いる
 - 色は各Viewの背景色で対応する

各問題点を述べると・・・

最初の方法だと TableView は UIView の下に潜ってしまう。
View にスクロール貼って一緒に動かすのは工数的にかかる。
わかりやすいようにシアンの背景色かけています。
ゴールはセルと同じ色です。

![01_fix.png](https://qiita-image-store.s3.amazonaws.com/0/88266/b16a6132-6488-0bc3-bc91-573ebee29302.png "01_fix.png")


真ん中の方法だとヘッダー部分が上に残ってしまい，
見た目で言えば最初の方法と変わらない。

![02_fix.png](https://qiita-image-store.s3.amazonaws.com/0/88266/6e5447d4-c1bd-2735-4bd2-017b01b2a195.png "02_fix.png")

では，最後のフッターで実現だとどうか・・・
問題なさそう。最初のセクションがずれるという問題点はあるが，
セル数を返す際，その分の処理を追加すればいい。
TableView が完全にスクロールしきった後，
一番下にもスペースが欲しいとのことだったので，
フッターで実現すると今回は一石二鳥でもあった。
と数日前まで思ってた。

![03_fix.png](https://qiita-image-store.s3.amazonaws.com/0/88266/b4738cc1-d8f9-cd57-625d-0b88f5c4754d.png "03_fix.png")

実装しててこれだよ。少し考えることにした。
先日デザイナーさんと話してていいアドバイスもらった。
透過できないかなぁ・・・それだぁぁーーーー

この場合だとセルの色にフッターの背景色を合わせるのではなく，
TableView の背景色をセルの色に合わせた上で，
フッターの背景色を clearColor にするだけでよかったのだ。

ヘッダーでもフッターでも結局実現できるということになる。
ただセクションは使う場合が多いかもなのでフッターの方を
サンプルとして実装してみた。

## 実装
今回のサンプルコードは Github にあげました。
必要に応じてお使いください。

今回のコード：[リンク](https://github.com/MilanistaDev/SDT_AdventCalendar2015_day6)(Github)

```
git clone git@github.com:MilanistaDev/SDT_AdventCalendar2015_day6.git
```

TableView の背景色をセルと同じにする
今回は Storyboard の設定でやっちゃいます。

![04.png](https://qiita-image-store.s3.amazonaws.com/0/88266/0a3cecd1-b683-0204-d228-33cd9b8f0bb0.png "04.png")


フッターの実装(高さ)

```Objective-C:Objective-C
// TableView のフッターの高さを返す
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section
{
	// 試しに 20pt 分
   return 20;
}
```

```Swift:Swift
// Footer の高さを返す
func tableView(tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {

    return 20
}
```

フッターの背景色(clearColor)

```Objective-C:Objective-C
// TableView のフッターの背景色を返す
- (void)tableView:(UITableView *)tableView willDisplayFooterView:(UIView *)view forSection:(NSInteger)section {
  [view setTintColor:[UIColor clearColor]];
}

```

```Swift:Swift
// TableView のフッターの背景色を返す
func tableView(tableView: UITableView, willDisplayFooterView view: UIView, forSection section: Int) {
        
    view.tintColor = UIColor.clearColor()
    }
```

セクションの数

```Objective-C:Objective-C
-(NSInteger)numberOfSectionsInTableView:
(UITableView *)tableView
    // 前のセクションのフッターを使うので1つ多く
    return 2;
}
```

```Swift:Swift
// セクション数
func numberOfSectionsInTableView(tableView: UITableView) -> Int {
    // 空セクションを作るので1つ増やす
    return 2
}
```

セル数
最初のセクションのフッターがスペースとして表示されるので
それに伴って section = 0 のときは返すセル数を 0 にしてあげる。
x は適切な値入れてください。

```Objective-C:Objective-C
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
 
    // 最初のセクションはセル数は0で
    if (section == 0) {
        return 0;
    } else if (section == 1) {
        return x;
    } else {
        return 0;
    } 
}
```

```Swift:Swift
// セクションごとのセル数(実装必須)
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

    // 最初のセクションはセル数0にする
    if (section == 0) {
        return 0
    } else if (section == 1) {
        return x
    } else {         
        return 0
    }
}
```

## 動作確認
Github にあげたやつを実行したものが下記 GIF になります。
わかりやすいようにセル選択時にハイライト色をつけています。
見えないけど透明なフッターが画面下にずっといます。

![05.gif](https://qiita-image-store.s3.amazonaws.com/0/88266/17c47c59-bcf1-3b21-9c8d-ba887cc96d5b.gif "05.gif")


## おわりに
今回は TableView の上下にスペースを入れる方法について
書きました。なかなか地味だけどもし最後のUI調整のときに
必要であれば，使えるかもしれません。ヘッダーもフッターも
使っている場合は，どうしたらいいんだろうなー調べてみよう。
セクションの数増やしてセル数 0 にすれば使える気もします。

UI の調整ってなかなか難しいですよね。デザイナーさん，
無茶言わんといてやーとか思うことも結構ある。

ご覧いただきありがとうございました。
もっとこうした方がいい，自分のとこではこう実装してるよー
などありましたらご気軽にコメント頂ければと思います。