概要

今回はSafeZoneというウイジェットをご紹介致します。

様々なモニターサイズや機種がありましてその厳しい中ではUIは常に柔軟性を持たないといけないです。どんな画面サイズにも対応可UIを作るには「セーフエリア」を気にする必要があります。

古いテレビは画面上の端を表示できない場面がありまして、それを防ぐためにセーフエリアというものを設けて確実にUIがユーザーの目線に入るようにするものです。SafeZoneというウイジェットはそれをカバーしてくれる機能です。

こちらのウイジェットで実験しました。

Untitled

緑枠はSafeZone、セーフエリアを示しています。

ウイジェットの階層

猫は背景として扱っているのでSafeZone外に配置して、切れてもOKにしています。

必ず表示したいものはSafeZone内にしまいます。こちらの例ではテキストはどんなモニター、テレビでも切れてほしくないのでSafeZoneに配置しています。

Untitled

<aside> 🔺 SafeZoneは子ウイジェット一つ以上持てないため、Overlayを挟んで多くテキストを配置しています。

</aside>

Overlayを選択してSafeAreaScaleを調整してみましょう。

Untitled

どうやらこの値を調整していけばセーフエリアが調整できるようですが、値を変えても画面にはなにも起こりません。