SOU·COLLE
イラストレーション/デザイン/3DCG/ゲーム開発のお話

Unity UIで余白のサイズが均等なレイアウトを組む

Unity UIのHorizontal Layout GroupとVertical Layout Groupはサッと均等に並べることはできるけれど,余白のサイズが均等なレイアウトを組みたい時には,自分で余白を作る必要がある。

オブジェクトが均等な余白を持つレイアウトと余白のサイズが均等なレイアウトの図

まずは並べただけの状態を組んでみる

Horizontal Layout Groupで横に並べているだけ。各ゲームオブジェクトの幅をChild Force Expandを使って均等に拡張しているだけなので端の余白が短くなる。

Hrizontal Layout GroupのChild Force Expandで組んだレイアウトのイメージ

空のゲームオブジェクトを使って余白を作る

Spacingは子オブジェクト同士の間隔を調整するだけなので意味が無い。なので空のゲームオブジェクトを入れることで余白を自分でつくる。

まず,幅の管理を子階層のゲームオブジェクトにまかせる。Horizontal Layout GroupのChild Force Expandをオフ,Child Controls Sizeをオン。

次に余白となる空のゲームオブジェクトを追加し,子階層すべてのゲームオブジェクトにLayout Elementをアタッチする。並べたい要素のサイズをMin WidthかPreferred Widthで設定し,余白のオブジェクトにはFlexible Widthに1を入れる。余白のサイズが全て均一になっていることがRect TransformのWidthからも確認できる。

空のゲームオブジェクトを使って間隔を作ったレイアウトのイメージ

このレイアウト方法のメリット・デメリット

メリットは最初に書いた通り余白のサイズが統一されるので,レイアウトに均一な規則性を持たせられること。

デメリットはメンテナンス性の悪さ。要素の数が固定的であれば気にする必要はないが,これが増えたり減ったりするのであれば余白までプログラムの制御下に含める必要がある。

ここまで書いておいてなんだけど,このレイアウトはあまり頻繁に使うものではないと思う。例えばiOSのタブバーは各要素がそれぞれ均等な余白を持ったかのようなレイアウトになっている。

iOSのタブバーのレイアウト

余白のサイズを均等にするとボタン同士の距離は近づくことになる。ボタンが近づけば当然それだけ誤って操作する可能性は高くなる。UIにこのレイアウトを使う場合は要素の数やデバイスの特徴に注意して使用したい。