ReadableContentGuide を試してみた - 水無月の余韻開発Sc.

ReadableContentGuide

iOS 9 から導入された、コンテンツ幅を端末や文字サイズに対応した、読み易い幅に設定するものだ。

Safe area とともに、WWDC 2018 のセッションでも触れられていた。

Xcode 9.4 を使った場合の動作を試したので記録する。

加賀ゆびぬき刺し模様シミュレータを題材にしたので、キャプチャにあるのは開発中の画像です。Readable Widthの適用がわかりやすいため、iPad 横向きを使用しています。

なお、ここで扱うTableViewでは、UITableViewCellとContentView の "Preserve Superview Margins" をONにしてある。

Xib や Storyboard で、ViewのSize Inspector上で、”Follow Readable Width” のチェックを入れることで有効にできる。有効にしたViewのMargin(内側)が、Readable width に則って設定されるようになる。

これを有効に使うには、Viewの子要素は、margin に対してconstraints を設定する必要がある。 constraints を作成するときに、“constrain to margins” にチェックを入れた上で親Viewとの位置関係を指定する。

TableViewにReadable Widthを適用するとき、”Follow Readable Width” のチェックボックをONにするViewによって、レイアウトが変化する。

UITableViewの基本的な構造の内、ここでは上層の3つを扱う。コンテンツ依存になるContentViewの中身については、基本のルールに従うので触れない。

Follow Readable Width の設定

まず、Readable widthを設定しようとするのは、ContentViewになるだろう。 CellのContentViewにだけ、ContentViewにFollow Readable Widthを設定した。

f:id:ichiko_revjune:20180708200943j:plain

コンテンツ幅は、Readable Widthになり、それらしくなる。しかし、accessary を使用している場合には、accessaryが右端に表示されるため、コンテンツと離れてしまう。また、2行目以降と見比べると、accessaryの有無で、コンテンツ幅が揃わないという問題もある。

Follow Readable Width の設定

次に、UITableViewCell にも設定する。これはひとつ前の状態と変化しなかった。

Follow Readable Width の設定

次は、UITableViewにも設定しよう。

UITableViewのSize Inspectorには項目がないのだが、UITableViewとUITableViewCellを同時に選択すると、”Follow Readable Width” のチェックボックスが出現する。

f:id:ichiko_revjune:20180708201037j:plain

f:id:ichiko_revjune:20180708201139j:plain

accessaryの位置がReadable Widthの中に収まった。しかし、今度は、accessaryの左側の余白が気になる。

Follow Readable Width の設定

ContentViewの"Follow Readable Width" を外した。

f:id:ichiko_revjune:20180708201117j:plain

accessary の左側の余白がなくなり、きれいにそろった。いまのところ、これがベストの設定のようだ。