Help us understand the problem. What is going on with this article?

UITableViewCellの区切り線(Separator)を消す方法

More than 1 year has passed since last update.

UITableViewの区切り線・UITableViewCell Separatorを消したい、ありますよね。
今回の記事の目次は以下の通りです。

全てのセルの区切り線を消す

まずは全てのセルの区切り線を消す方法から。
Storyboardで設定する場合はTableViewのSeparatorの箇所をNoneへ変更します。

設定前 設定後

設定を反映させると以下のようになります。

設定反映前 設定反映後

ちなみに、コードで書く場合は、以下のコードを追加すれば同じように区切り線を消すことができます。

Swift
tableView.separatorStyle = .none

一部のセルの区切り線を消す

では、一部のセルの区切り線を消したい場合はどうすればいいのでしょうか。

例としては、1つのUITableView内にAというセルクラスとBというセルクラスがあるとします。Aのセルでは区切り線を表示するけど、Bのセルでは消したい。こういう場合です。

一部のセルの区切り線を消す場合はStoryboardでの設定はできず、コードで設定していきます。

Swift
cell.separatorInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: .greatestFiniteMagnitude)

このコードをtableView(_:cellForRowAt:)で追加します。

Swift
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
    cell.textLabel?.text = "\(indexPath.section) - \(indexPath.row)"

    // 2で割り切れない数だけ区切り線を表示
    if indexPath.row % 2 == 0 {
        cell.separatorInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: .greatestFiniteMagnitude)
    }
    return cell
}

上記のコードでの実装の場合は以下のようになります。

設定反映前 設定反映後

"全て"と"一部"では何が違うのか?

ここからは余談の話です。
上記の「全てのセルの区切り線を消す」と「一部のセルの区切り線を消す」では何が違うのでしょうか。
結論から言うと以下の通りになります。

  • 全ての区切り線を消す:UITableView全体に設定が反映される
  • 一部のセルの区切り線を消す:UITableViewCellに設定が反映される

上記のような違いがあります。
例えば、一部のセルの区切り線を消す方法では、UITableViewの表示された空のセルには設定が反映されません。

全てのセルの区切り線はUITableView全体に設定が反映されるため、空のセルにも区切り線が消す設定が反映されます。

空のセルの区切り線を消す

では、一部のセルの区切り線を消しつつ、空のセルの区切り線を消したい!という場合はどうしたらいいか。
以下のコードを追加するだけで空のセルの区切り線は消えます。

Swift
tableView.tableFooterView = UIView()
全てのセルの区切り線を表示 一部のセルと空のセルの区切り線を消す

ちなみに、UITableViewCellの区切り線はUITableViewSeparatorViewというものらしいです。外部からアクセスできたら便利だなと思う時もあるのですが、、、

takashings
あまり難しいことは書かないですが、何かのヒントや基礎を中心的に書いていきたいと思います。
http://takashings.com
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした