【Xcode】UITableViewの区切り線のすきまについて


## すきまがあるのがデフォルトです

つい先日知ったのですが、テーブルビューの区切り線は両端にすきまがあいています。

自分で開発した[パンダクリンAR](https://itunes.apple.com/us/app/pandacleanar-tidy-up-easily-with-papandakko/id1153895919?l=ja&ls=1&mt=8 "パンダクリンAR")でもテーブルビューをつかってるのに、まったく気がついていませんでした。

![パンダクリンAR.png](https://qiita-image-store.s3.amazonaws.com/0/38924/25ff8d07-7544-b1e8-8cb9-c21e92a04be7.png "パンダクリンAR.png")


あらためてアップルさんのアプリを見てみると、コンテンツの配置にあわせて区切り線の長さを調整しています。

というわけで、今回はテーブルビューの区切り線のすきまについて調べてみました。

## すきまには二種類あります

調べてみると、じつは二種類のすきまがあることがわかりました。

ひとつが`cellLayoutMarginsFollowReadableWidth`で、もうひとつが`separatorInset `です。

それでは、二種類のすきまの正体を、順番に見ていきましょう。

## cellLayoutMarginsFollowReadableWidthとは

まずは`cellLayoutMarginsFollowReadableWidth`です。

[アップルの公式リファレンス](https://developer.apple.com/documentation/uikit/uitableview/1614849-celllayoutmarginsfollowreadablew "アップル公式リファレンス")によるとつぎのように説明されています。

>A Boolean value that indicates whether the cell margins are derived from the width of the readable content guide.

テーブルビューのセルのマージンを`readable content guide `の幅によって変更するかしないかを示すBool型のプロパティとのことです。この説明だけではわかりにくいので、実際の例を見てみましょう。

### cellLayoutMarginsFollowReadableWidthの設定によるちがい

下のスクリーンショットをご覧ください。

![IMG_0209 2.PNG](https://qiita-image-store.s3.amazonaws.com/0/38924/3f842679-16d6-6281-0b7e-7a3d0a4c43cc.png "IMG_0209 2.PNG")


画面の上半分にあるテーブルビューが、`cellLayoutMarginsFollowReadableWidth = true`です。そして、下半分のテーブルビューが`false`です。

`true`の場合に、両端のマージンがおおきくとられていることがわかります。その理由は、`readable content guide `という名前のとおり、（とくに文章のコンテンツを）読みやすくするためのガイドだからです。

[WWDC2015のGetting Started with Multitasking on iPad in iOS 9](https://developer.apple.com/videos/play/wwdc2015/205/?time=962 "Getting Started with Multitasking on iPad in iOS 9")では、つぎのようなサンプルが紹介されています。

![スクリーンショット 2017-11-18 22.29.52.png](https://qiita-image-store.s3.amazonaws.com/0/38924/ee9e4c60-ae6b-091c-c6ca-9489419473ab.png "スクリーンショット 2017-11-18 22.29.52.png")


このように、マージンをおおきくとって画面の真ん中にコンテンツを寄せることで、iPadのように広い画面でも視線をおおきく動かさずに読むことができます。

余談ですが`readable content guide `はUIViewのAPIです。

![スクリーンショット 2017-11-18 22.28.24.png](https://qiita-image-store.s3.amazonaws.com/0/38924/561848e3-1ad0-c72d-8d3d-055c78cfd34b.png "スクリーンショット 2017-11-18 22.28.24.png")

このような使い方のサンプルが、上であげたセッションで紹介されているので、興味がある方はご覧ください。

### cellLayoutMarginsFollowReadableWidthを設定する方法

`cellLayoutMarginsFollowReadableWidth`をコードで設定する場合は、以下のようにviewDidLoadなどで`true`を代入します。

```Swift
class ViewController: UIViewController, UITableViewDataSource {

	@IBOutlet weak var firstTableView: UITableView!
	@IBOutlet weak var secondTableView: UITableView!
	
	let firstData = ["dog", "cat", "lion"]
	let secondData = ["chicken", "robin"]
	
	override func viewDidLoad() {
		super.viewDidLoad()
		
		firstTableView.dataSource = self
		secondTableView.dataSource = self
		
		firstTableView.cellLayoutMarginsFollowReadableWidth = true
	}
	
	以下略
}
```

ストーリーボードで設定する場合は、TableViewのサイズインスペクターで`Follow Readable Width`にチェックを入れます。

![スクリーンショット 2017-11-18 18.55.27.png](https://qiita-image-store.s3.amazonaws.com/0/38924/323b16b4-a80f-da21-70be-aedea51cb6a0.png "スクリーンショット 2017-11-18 18.55.27.png")


# separatorInsetとは

つぎは`separatorInset `です。

先ほどとおなじく、[アップルの公式リファレンス](https://developer.apple.com/documentation/uikit/uitableview/1614851-separatorinset "アップル公式リファレンス")によると、つぎのように説明されています。

>Specifies the default inset of cell separators.

セルの区切り線のデフォルトインセットとのことです。

インセットは、はめ込みや挿入という意味なので、セルの区切り線にすきまをはめ込むというような意味でしょうか。`readable content guide `はコンテンツを読みやすくするためのマージン（余白）でしたが、インセットはコンテンツをそろえるためのすきまです。

たとえば、App Storeアプリをご覧ください。

![App Store.png](https://qiita-image-store.s3.amazonaws.com/0/38924/aeaf0f74-a504-4b77-4030-2b1a24ad2659.png "App Store.png")


コンテンツのサイズにあわせて、区切り線の長さがかわって縦のはしがそろっています。このように、そろえるためのすきまをはめ込むのが`Separator Inset`なのです。

## Separator Insetを設定する方法

`Separator Inset`をストーリーボードで設定してみましょう。

テーブルビューのアトリビュートインスペクターに、`Separator Inset` という設定があります。

こちらが初期値では`Automatic`になっています。この設定だと左端にすきまができるので、クリックして`Custom`を選んでみましょう。

そうすると、`Left`と`Right`という項目が表示されます。よくみると、`Left`が`15`になっています。これが左端のすきまの正体だったんですね。

![スクリーンショット 2017-11-18 23.02.54.png](https://qiita-image-store.s3.amazonaws.com/0/38924/751b3118-7d36-741b-2a61-7c2704a5c5a7.png "スクリーンショット 2017-11-18 23.02.54.png")


ためしに`Left`を`0`にしてみましょう。

実行すると、下のスクリーンショットのようになりました。

![IMG_0213 2.PNG](https://qiita-image-store.s3.amazonaws.com/0/38924/765af9b3-4e32-1f48-5d72-88ca2a8ad3f4.png "IMG_0213 2.PNG")

画面の上半分のテーブルビューが`Automatic`で、下半分が`Custom`で`Left`を`0`にしています。下半分のテーブルビューは、左端のすきまがなくなっていますね。

コードで設定する場合は、以下のようにテーブルビューの`separatorInset `に`UIEdgeInsets`を代入します。

```Swift
class ViewController: UIViewController, UITableViewDataSource {

	@IBOutlet weak var firstTableView: UITableView!
	@IBOutlet weak var secondTableView: UITableView!
	
	let firstData = ["dog", "cat", "lion"]
	let secondData = ["chicken", "robin"]
	
	override func viewDidLoad() {
		super.viewDidLoad()
		
		firstTableView.dataSource = self
		secondTableView.dataSource = self
		
		secondTableView.separatorInset = UIEdgeInsetsMake(0, 3, 0, 11)
	}
	
	以下略
}
```

上の例は、`Left`が`3`で`Right`が`11`です。左右とも`0`にする場合は`UIEdgeInsets.zero `を使って、`secondTableView.separatorInset = UIEdgeInsets.zero`のように書くこともできます。

`UIEdgeInsets`は上下左右の指定ができますが、`separatorInset `では左右の値だけが使用されます。また、アラビア語などのように、横書き文を右から左に表示する言語の場合は、自動的に左右の値を反転してくれるそうです。

## 言いたいだけのまとめ

すきま時間の活用など、現代人にとってすきまは非常に重要な要素となっています。

また、神は細部に宿るともいいますので、テーブルビューのすきまもおろそかにせず、しっかりとインセットしていきたいものですね。