画面サイズに合わせて自動で等分割するUI要素の設定

よく使うので覚えがき。

やりたいこととしては、3つのImageがあった時に、どの画面サイズでもそれらを同じサイズで横方向に敷き詰める、というもの。
(もちろん2つとか4つ以上とか要素の個数が変わったり、縦方向だったりという応用も効きます)


このような感じです。

やりかた

まず3つのImageを子に持つような親オブジェクトを作成します。

親オブジェクトの設定はこんな感じ。

RectTransformで画面いっぱいに大きさを指定します。
また、Horizon Layout Groupコンポーネントをアタッチし、Child Control SizeのWidthとHeightにチェックを入れます。

次に、子オブジェクト(並べるImageオブジェクト)の設定です。

親オブジェクトのHorizon Layout GroupコンポーネントでChild Control SizeのWidthとHeightにチェックを入れていると、子オブジェクトのRectTransformは編集できないようになっているかと思います。(自動で大きさが決まるためRectTransformの値は指定する必要がない)

また、子オブジェクトにはLayout Elementコンポーネントをアタッチします。
そしてFlexible Width、Flexible Heightにチェックを入れ、値に1を入力します。

3つのImageオブジェクトのFlexible Widthに全て1を指定したことで、横幅が1:1:1の比率でレイアウトされるようになります。
つまり、例えば赤のImageだけFlexible Widthに2を指定すると、下の図のように2:1:1に並べることもできます。

以上、画面サイズに応じて自動でサイズを変更してくれる、画面を等分割するUI要素の設定方法でした!

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です