uGUIでMaxHeightのようなレイアウトを実現したい(iPhoneX対応)



こんな感じで画面の縦横比によって各uGUI要素がいい感じになるレイアウトの作り方。
Header/Footerは画面上下に固定され、Contentは伸縮する。指定したMaxHeightを超えると、Contentの伸縮が止まり、上下余白用の要素が出現する。

背景

そもそもはiPhoneXやGalaxy S8のような超縦長の端末に対応するために考えた策。9:16を想定したゲームUIでもある程度縦横比の変化は許容できるが、1:2を超える超縦長になってくると、どうしても意図したデザインや操作性とは異なってしまうので、伸縮の限界点を指定しつつ、見栄えを保つための余白用のデザインを用意しようという発想。また、限界点をうまく調整すればiPhoneXの画面上部の切り欠きに対応したデザインにできる。理想では、端末を判別して個別にレイアウトを調整するのがベストではあるが、それではUnityでiOS/Androidを同時に開発するメリットが下がってしまうので、できるだけ個別対応はしたくなかった。しかし最近はAQUOS R compactなど画面が超縦長でなくとも切り欠きがある端末が出てきてしまったので結局この策は短命に終わった。(アプリごとにフル画面で表示するかどうかのサポート機能が端末側で用意されていたりするのでそれに頼るのはあり)

構成

Canvas(親)のコンポーネント

Canvas Scalerでスケーリングしているため横幅は変わらない。
Vertical Layout Group を設定しているのが肝。(Layout Groupとしての機能が使えれば良い)

Background(背景)

画面サイズに関わらず全画面表示させるため ignore layout を設定する。

Content Area

Preferred Height を設定するとそれ以上は大きくならない。設定した値より小さい場合は親の Layout Group の機能によってよしなに高さが調整される。

レイアウトサンプル

参考資料

iPhoneX対応の他の方法
https://qiita.com/tkyaji/items/8cdc0a4324d4e89633e8

サイズ
https://qiita.com/usagimaru/items/761e9a5f3d78b1939df8

ガイドライン
https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/