LoginSignup
4
4

More than 5 years have passed since last update.

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

Posted at

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

背景

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

構成

image.png

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

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

Background(背景)

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

image.png

image.png

Content Area

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

レイアウトサンプル

参考資料

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

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

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

4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4