Posted at
iOSDay 13

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

More than 1 year has passed since last update.


概要

キャプチャのような、余計な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の実装方法についてでした。

もっといい方法がありましたら、教えていただけると幸いです。