UITableViewの区切り線のすき間幅(Separator Inset)をコードで調整する方法 & Storyboardで調整する方法

TableViewのセルとセルの間の区切り線のすき間、気になりません？？
これのことです。

このすき間、UIKitではSeparator Insetと呼ぶみたいです。
今回はこのSeparator Insetを調整する方法を書いていきたいと思います。

目次

1. Storyboardで調整する方法

StoryboardでUITableViewを選択し、Attribute Inspectorを「Automatic」から「Custom」へ変更します。
（変更前）

（変更後）

上記画像内のLeftに書いてある数値を変更するれば、Separator Insetを調整出来ます。 因みにRightに書いてある数値を変更すれば、区切り線の右側のSeparator Insetの調整になります。

この方法ですが、以下の記事にもーっと詳しく書かれています。Separator InsetのAppleの意図などについても記載されていますので、読まれることをお勧めします。

qiita.com

2. コードで調整する方法

2.1 tableView(_:willDisplay:forRowAt:)(TableViewDelegate)を使って調整する方法

1ではStoryboardで調整する方法を説明しましたが、コードで修正したい時もあるかと思います。コードで残しておく方が何かと流用出来ますしね。
その場合、TableViewDelegateの仕組みを使って実現することが出来ます。
UITableViewDelegateを継承したUIViewControllerでtableView(_:willDisplay:forRowAt:)をoverrideします。

class ViewController: UIViewController, UITableViewDelegate {
    ...(省略)...
    override func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
        //cell.separatorInset = .zero       //すき間をゼロにする場合にはseparatorInsetを.zeroに
        cell.separatorInset = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 5)    //すき間を調整はleft,rightに値を入れて行う
    }
}

これは指定されたRowのセルの呼び出し時に、その内容を編集できるメソッドです。引数cellのseparatorInsetプロパティを使って調整します。
コードでも記載していますが、空白の調整はUIEdgeInsetsを使って行い、top、buttomはこの場合は指定しなくてもOKです。

もしすき間をゼロにしまう場合には.zeroとしてもOKです。

コードでの調整方法が、Storyboardでの方法に比べ気の利いている点は、Rowで変更セルを指定できる点です。使い所は少ないかもですが、覚えておくと良いかもしれません。

class ViewController: UIViewController, UITableViewDelegate {
    ...(省略)...
    override func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
        if indexPath.row == 0 { //row0のみすき間を無くす
            cell.separatorInset = .zero       //すき間をゼロにする場合にはseparatorInsetを.zeroに
        }
    }
}

2.2 UITableViewCellを継承したクラスで調整する方法

コードで変更する方法はもう一つあります。UITableViewCellを継承したクラスを作成・カスタマイズし、それをStoryboard上のUITableViewCellで指定してあげる方法です。
まず新規ファイル作成しましょう。新規作成時に問われる元のなるクラスはUITableViewCellを指定してあげます。
そうしたら以下のコードが書かれたファイルが出来ていると思います。

import UIKit

class TableViewCell: UITableViewCell {

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }
    
}

awakeFromNibの// Initialization code以下にやりたい処理を書きます。やりたいことは2.1と同様なので同じ処理を書きます。

import UIKit

class TableViewCell: UITableViewCell {

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
        self.separatorInset = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 5)
        //self.separatorInset = .zero
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }
    
}

そしてStoryboardでTableViewCellを選択し、Identify inspectorの中のCustom Classを作成したクラス名（今回の場合はTableViewCell）に変更します。
結果は2.1と同じですが、セル全てに適用し、それを他のプロジェクトなどで再利用する場合にはこちらが便利かもです。

3. まとめ

iOS開発ではやりたいことに対し実現方法が複数あることはしばしばあります。その時に有効な手段を選択することが大事だと思いました。