2024年5月17日活動報告
活動報告
得た知見
StableDiffusion関連
Unity関連
子要素の大きさに合わせて親要素のサイズを自動的に変更するUIの作り方
今回は高さを可変にするUIを一例として紹介します。
■実装方法
○作成するゲームオブジェクト
選択している5つのゲームオブジェクトを作成した。
１．ItemTextが要素をまとめる為のPanelオブジェクト。
２．Backgroundが背景画像を設定するImageオブジェクト。
３．Frameがフレームを設定するImageオブジェクト。
４．Explanationは表示したいテキストを設定するTextオブジェクト。
５．Panelはサイズを指定するためのPanelオブジェクト。
○設定するコンポーネント
ItemTextに設定するコンポーネント
・ContentSizeFilter
・HorizontalLayoutGroup
Backgroundに設定するコンポーネント
・LayoutElement
Frameに設定するコンポーネント
・LayoutElement
Panelに設定するコンポーネント
・HorizontalLayoutGroup
Explanationに設定するコンポーネント
・LayoutElement
■説明
１．高さと幅どちらを可変にするかを決める。
ItemTextに追加した「ContentSizeFilter」で自由にサイズを動かしたい方向を決める。縦方向に可変にしたいときは水平フィットで「PreferredSize」を選択。横方向に可変にしたいときは垂直フィットで「PreferredSize」を選択。
２．子要素と親要素のサイズを連動させる。
HorizontalLayoutGroupで子要素のサイズを制御する。今回は縦方向に可変にしたので、高さを制御できる様ちにチェックを入れた。これで、テキストが増えると高さが変更されるようになる。
３．BackgroundとFrame用の画像のサイズも変更させる。
BackgroundとFrameに対してLayoutElementコンポーネントを付けることで、テキストの高さが増えた時に、そのサイズに合わせてBackgroundとFrameの高さも変更される。
さらに余分な使用領域があれば、可変 (Flexible) サイズが割り当てられます。
一般的には、Flexible Width と Flexible Height は 0 か 1 に設定します。
Layout Element
４．テキストとFrameの間に余白を付ける。
PanelにHorizontalLayoutGroupコンポーネントを付けて、パディングを設定することで、余白を設定できる。
余った余白をどうするか。
参考に下記事一覧
時間ができた時に読みたい記事