Xcode9 で UITableView に出てくるなぞのスペースを削除する方法

• 概要
• 環境
• 使用するコード
  • ViewController.swift
  • Main.storyboard
• 削除方法
• 最後に

概要

UITableView を Storyboard で配置するとセルの周りになぞのスペースが入っています
左端に寄せたい場合などには邪魔になるので削除方法を紹介します

環境

• macOS 10.13.2
• Xcode 9.2 (9C40b)

使用するコード

以下の簡単な UITableView を使ったサンプルコードを準備しました

ViewController.swift

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    @IBOutlet weak var tableView: UITableView!
    let data = ["ピカチュウ", "カイリュウ", "ヤドラン", "ピジョン", "コダック"]

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = self.tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        let label = cell.viewWithTag(1) as! UILabel
        label.text = data[indexPath.row]
        return cell
    }
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return data.count
    }
}

storyboard から UITableView を IBOutlet を紐付けています
また、UITableViewDelegate, UITableViewDataSource を継承して最低限の cellForRowAtIndexPath と numberOfRowsInSection を実装しています

Main.storyboard

storyboard は以下のような感じです

やったこととしては

• UITableView を配置
• UITableView 内に UITableViewCell を配置
• 「cell」という identifier を設定
• Cell 内に UILabel を配置し背景をわかりやすいように色付け
• UILabel に Tag = 1 を設定
• UILabel に constraints を追加、上下左右に余白 0 の位置を指定
• Outlets で ViewController に delegate と dataSource を紐付け

になります

これでとりあえず実行すると以下のようになぞのスペースができています

なぞというわけではないですがデフォルトでは Cell 内にマージンを作ってくれるようです
自分は不要なケースが多いので削除するのですが Xcode9 でやり方を知らなかったのでその方法を紹介します

削除方法

UILabel に設定した constraints を選択します
そして「Trailing Space to」を選択します

そして「First Item」を「Superview.Trailing」にします
すると Constant が 15 になっているのでこれを 0 にします

するとマージンがなくなります
今のは右側のマージンを削除したので、これと同じことを左、上下に対して行います

左

上

下

これで再度起動すると以下のようになります

ただこのままだとセルを区切るための線が一番左に行っていません
なので UITableViewCell の「Separator Inset」を「Custom」にし Left の値を 0 にすることで線も一番左まで行きます

最後に

UITableView で出来てしまうマージンを削除する方法を紹介しました
これを UIView でやればその中にコンポーネントを入れることができます

やってみて気づいたのですが、たぶん削除する必要はないかなと思っています
1 からセルをカスタマイズしたい場合には一度 UIView でマージンを潰したあとでデザインするのはありだと思います