2020年5月30日土曜日

iPhoneアプリのiPad対応2 - Readable Width

読みやすい表示幅 - Readable Width

iPhoneアプリのiPad対応。前回のSplitViewに続いて、今回は表示幅について。


画面の横幅が大きくなったとき、デフォルトのMarginサイズだと横に間延びして読みにくくなってしまう。
読みやすい表示幅を制御する仕組みはすでにOSにあり、Readable Width を設定すれば反映できる。
(iOS 12以上で利用可)

設定方法

Storyboard > Size Inspector の "Follow Readable Width" がその設定になる。

ちなみに、Preserve Superview Marginsは、SuperviewのMarginも考慮するプロパティ。カスタムテーブルセルを作るとき、標準セルのMarginと合わせることができます。

Readable Widthの幅は、OSで設定されているText Sizeによって変わるのに注意。
Text Sizeが大きくなると、幅は大きくなる。

デフォルトのMarginを無しでReadable Widthのみ反映する

レシピの画像は、Compactサイズでは左右Margin無し、Readable Widthが反応するサイズではそのMarginに反応するよう設定した。
この設定は以下の通り。

Layout Margins は 0 を設定し、Follow Readable Width にチェックをいれる。
これで、以下のように、画面幅に応じてMarginが切り替わる。


Readable Marginのサイズを取得する

UIViewのlayoutMarginsに、Readable Widthも含めたMarginが含まれている模様。
ただ、アプリ操作途中でOSのText Sizeを変えることによりReadable Widthの幅が変わった場合、layoutMargins には変更後の値は含まれていないっぽい。(iPadOS 13.5 で確認)


iPhoneアプリをiPad対応する際、Readable Marginの対応することは多くありそう。
Storyboardの設定だけで完結できるのはとても良い。

次回につづく。
• • •