UITableViewCellの区切り線（Separator）を消す方法

9338 ワード
UITableView Swift iOS iOS テキストリンク

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というものらしいです。外部からアクセスできたら便利だなと思う時もあるのですが、、、