ReadableContentGuideの使いかた

## ReadableContentGuideとは

ReadableContentGuideは、iPhoneにデザインが最適化されているアプリをiPadで開いたときに、UIButtonやUITableViewCellが横長になって見にくくなるのを防ぐためのマージンです。
[Apple Reference](https://developer.apple.com/documentation/uikit/uiview/1622644-readablecontentguide)

##### 例えば

|なし|あり|
|---|---|
|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413566/d96520e8-f789-0a7f-7fbb-3a7012f315d5.png"/>|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413566/9bddb35e-d961-bbf5-ebdb-db6eff7798af.png"/>|

TableViewを表示したときに、ReadableContentGuideを設定しないと左に寄せられますが、有効にすれば良い感じのマージンがつけられて見やすい位置にセルが調整されます。



## 適用方法

通常のUIButtonとかUILabelみたいなコンポーネントに適用するのは簡単です。

1. 適用したいコンポーネントの親Viewに対してReadableContentGuideに従うかどうかの設定
2. 適用したいコンポーネントの親ViewへのConstraintにマージンを含めて追加する

具体的に説明すると、

#### STEP1

- Interface Builderの場合、`Show the size inspector > LayoutMargins`の**Follow Readable Width**にチェックを入れる
<img width="299" alt="Screen Shot 2020-08-13 at 16.05.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413566/4aa95946-33bd-1f3e-0cce-fd354fb80527.png">

- コードの場合、親Viewの`cellLayoutMarginsFollowReadableWidth`プロパティを`true`にする

```swift

view.cellLayoutMarginsFollowReadableWidth = true
```

#### STEP2

STEP1を設定後、実際にConstraintにMarginを指定してReadableContentGuideに対応させます。

- Interface Builderの場合、今まで直接`Superview.Leading`等を指定していた場合は、`Relative to Margin`を指定する
<img width="292" alt="Screen Shot 2020-08-13 at 16.43.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413566/28511e8c-bb3d-a4bd-6f8d-62993a54e129.png">

- コードの場合、親viewの`leadingAnchor`を直接呼び出しするのではなく、`readableContentGuide`を指定して呼び出します。

```swift
icon.leadingAnchor.constraint(equalTo: contentView.readableContentGuide.leadingAnchor),
```

### UITableViewに適用する場合

前提として、`Cell`と`ContentView`に対して`Preserve Superview Margins`のチェックを入れておいてください。
デフォルトセルは標準でデバイスによって違うマージンを持っているようで、カスタムセルと同時に使用したときにマージンに差が生まれます。
[参考リンク](https://qiita.com/yuya_presto/items/08b0656f67a59c8c2d03#%E6%A8%99%E6%BA%96%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%81%AE%E3%82%BB%E3%83%AB%E3%81%A8%E5%B7%A6%E5%8F%B3%E3%81%AE%E4%BD%99%E7%99%BD%E3%82%92%E6%8F%83%E3%81%88%E3%81%9F%E3%81%84%E5%A0%B4%E5%90%88)

#### デフォルトのセルの場合

```swift
let cell = UITableViewCell(style: .default, reuseIdentifier: nil)
```

特に設定することはありません。
`1. 適用したいコンポーネントの親Viewに対してReadableContentGuideに従うかどうかの設定`
これを設定すれば、自動的に適用されます。

- Interface Builderであれば、UITableView自体の`Follow Readable Width`にチェックを入れる。
- コードであれば、UITableViewのインスタンスの`cellLayoutMarginsFollowReadableWidth`を`true`

#### カスタムセルの場合

**デフォルトのセルの場合**の設定と、カスタムセルの`contentView`とその内部のコンポーネントに対して、マージンを指定して設定すれば適用されます。

例えば、
このカスタムセルがあったときに、
<img width="467" alt="Screen Shot 2020-08-13 at 16.56.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413566/7a329522-b2ea-f94d-2365-6284b2199a05.png">
ImageViewとcontentViewとのConstraintに対して、`Relative to Margins`を指定します。
<img width="292" alt="Screen Shot 2020-08-13 at 16.43.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413566/28511e8c-bb3d-a4bd-6f8d-62993a54e129.png">

これを前(Trailing)と後ろ(Leading)に対して適用すれば、ReadableContentGuideによってiPadでも良い感じに表示されます。

---

TableViewにReadableContentGuideを適用したサンプルを作ったので、参考程度にどうぞ。
https://github.com/0eta0/ReadableContentGuideTest

### 参考

https://techlife.cookpad.com/entry/2018/12/10/090000
http://ichiko-revjune.hatenablog.com/entry/2018/07/08/201837