MRが楽しい

MRやVRについて学習したことを書き残す

LayoutElementを使ってUI要素の大きさを隙間を詰めるように変化させる

本日は Unity の小ネタ枠です。
LayoutElementを使ってUI要素の大きさを隙間を詰めるように変化させる方法です。

LayoutElement

LayoutElement はレイアウト要素の最小サイズ、最大サイズなどをオーバーライドする際に利用します。
docs.unity3d.com

サンプル

以下の前回記事のプロジェクトを流用して画面の隙間を埋めるように大きさが変化する UI を作成してみます。
bluebirdofoz.hatenablog.com

以下のようにスクロールコンテンツの下に追加でパネルオブジェクトを配置しました。

ボタンを選択したときだけパネルが表示され、ボタンが非選択の場合はパネルが表示されずスクロールコンテンツが画面の上下いっぱいに表示されるようにしてみます。
・パネル表示時

・パネル非表示時

大きさを調整したいスクロールオブジェクトに LayoutElement コンポーネントを設定します。

追加した LayoutElement の[Flexible Height]を 1 に設定します。
Flexible 変数は要素を 0 ~ 1 の比率で変更可能な最大サイズを設定します。
これでスクロールオブジェクトは他の要素がない時、可能な最大の高さまで拡大されるようになります。

同様にパネルオブジェクトにも LayoutElement コンポーネントを設定します。
こちらは[min Height]を 200 に設定します。
これでパネルオブジェクトは高さ 200 以下には縮小されなくなります。

最後に高さ方向のレイアウトを自動調整するため、これらの親オブジェクトに VerticalLayoutGroup コンポーネントを設定します。
[Control Clild Size]の[Height]にチェックを入れます。これで子オブジェクトの高さが自動でオーバライドされるようになります。

動作確認

パネルオブジェクトを有効/無効化して UI の変化を確認します。
パネルオブジェクトが無効化されたときにスクロールオブジェクトが隙間を埋めるように拡大され、有効化したときはパネルオブジェクトの分だけ縮小されれば成功です。