ちょっとだけ頑張ってUITableViewの余計なseparatorを消す

概要

キャプチャのような、余計なseparatorを表示しないUITableViewの実装方法をまとめました。

経緯

上記キャプチャのようなデザインを実装しようとすると、立ちはだかるのはUITableViewの余計なseparator(線)です。
なにもしないと、以下のキャプチャのように何もコンテンツがないのにseparatorが表示されてしまいます。

以前は、この線を消すのにtableFooterView = UIView()といったようにtableFooterViewにUIViewを設定するか、
UITableViewのseparatorを非表示にして、cellの上に線を描くためのviewをのせて実装していました。

しかし、この実装方法には下記のデメリットがあります。

デメリット1

どちらの実装でも余計なseparatorを消すことはできますが、一番下のCellだけseparatorを左端まで表示するのが面倒になります。

デメリット2

cellの上に線を描くためのviewをのせて実装する方法にかぎりますが、
この実装方法だとUITableViewCellのAccessoryViewを表示すると、以下のキャプチャのように線が端まで表示されません。

上記の問題があり、いつも実装に困っていました。
もっといい方法がないか調べてみた結果、簡単な方法が見つりました。

実装方法

1. UITableViewのStyleをGroupedに設定する

これを設定することにより、余計なseparatorが表示されなくなります。

2. 余計なHeaderの高さを0にする

このHeaderをを0にするためには、下記のコードを書きます。

// MARK: - UITableViewDelegate

extension ViewController: UITableViewDelegate {

    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return .leastNormalMagnitude
    }
}

ここでポイントなのは0.0ではなく、CGFloat.leastNormalMagnitudeを使うことです。(Swift 2ではCGFloat.min)
0.0をreturnしてもHeaderの高さは変わらないため、このように実装しています。

これで意図通りのデザインになります。

まとめ

ちょっとだけ頑張って余計なseparatorを表示しないデザインUITableViewの実装方法についてでした。
もっといい方法がありましたら、教えていただけると幸いです。