Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
34
Help us understand the problem. What is going on with this article?
@edm

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

More than 3 years have 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の実装方法についてでした。
もっといい方法がありましたら、教えていただけると幸いです。

34
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
edm
zozotech
70億人のファッションを技術の力で変えていく

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
34
Help us understand the problem. What is going on with this article?