はなちるのマイノート

Unityをメインとした技術ブログ。自分らしくまったりやっていきたいと思いますー!

【Unity】UIを画面の横幅いっぱいに並べる

はじめに

今回はUIを画面の横幅いっぱいに並べてみる記事になります!

実際に作るのはこんな感じ。

f:id:hanaaaaaachiru:20200309191226g:plain


一応このUIはこちらのSimaple UIというアセットを利用させていただいています。

では早速作っていきましょう。

作り方

まずは横いっぱいにしたいボタン等のUIたちを入れる親ゲームオブジェクトを作成します。

Canvas以下に空のゲームオブジェクト(Create Empty)を作ってください。

f:id:hanaaaaaachiru:20200309004810p:plain

f:id:hanaaaaaachiru:20200309004822p:plain


ここで画面の横のピクセル数や縦横の比率が変化しても対応できるように、Anchoranchor presetsから横いっぱいに広がっているものを選択してください。

f:id:hanaaaaaachiru:20200309190208p:plain


ここからが一番重要で、ゲームオブジェクトにHorizontal Layout Groupというコンポーネントをアタッチします。

Horizontal Layout Groupのざっくりとした説明はこんな感じ。

Horizontal Layout Group コンポーネントは、子のレイアウト要素を互いに隣合わせに配置します。

Horizontal Layout Group - Unity マニュアル

いわゆる子オブジェクトの配置・サイズを自動で調整して並べてくれるコンポーネントになります。

f:id:hanaaaaaachiru:20200309190509p:plain


するとImageButtonといったUIを子オブジェクトに配置してみると、いい感じに並べてくれるはずです。

あとはゲームオブジェクトの座標やHorizontal Layout Groupspacingpaddingを調整すれば完成です。

f:id:hanaaaaaachiru:20200309191226g:plain

さいごに

この手法は色んなスマホの形,ピクセル数に対応するために必須な知識だと思うので是非マスターしておくと良いと思います。

ではまた。