Scroll ViewとLayoutコンポーネント群③Content Size Fitter
Unity 2019.2.0f1 Personal(2019年8月)
今回はLayoutコンポーネント群からContent Size Fitterについてです〜
コンテンツ(子オブジェクト)の数やサイズによって
コンテンツを囲う枠(親オブジェクト)のレイアウトを自動的に変更する、
正にUnityのAuto Layoutを担っているコンポーネントです!
Content Size Fitterとは?
Content Size Fitterはコンテンツの数やサイズに従い親要素のサイズが自動的にストレッチしていきます。
Content Size Fitter - Unity マニュアル
Unity公式によると、Content Size Fitterを持つコンテンツは
「Layout要素」によってRectTransformのWidth/Heightが決められるとのことです。(Layout要素=Layout Elementコンポーネント)
(親要素のRectTransformは設定できなくなり、Content Size Fitterの設定により決められる。)
Content Size Fitterの条件
・Content Size Fitterはコンテンツを子に持つ親オブジェクトに付けられます。Scroll ViewでいうところのContentオブジェクトですね。子オブジェクトを持つ親オブジェクトです。
・Layout Elementの設定された子オブジェクトを持っている。
Content Size FitterのFit
Content Size FitterのプロパティはHorizontal FitとVertical Fitしかありません。
選択項目は
Unconstrained(制約なし):サイズを変更しない。
Min Size(最小サイズ):子のLayoutElementで設定したMin Width/Heightに合わせる。
Prefered Size(適したサイズ):子のLayoutElementで設定したPrefered Width/Heightに合わせる。
Min SizeとPrefered Size
Layout Elementで説明した通り、Prefered SizeよりもMin Sizeのほうが優先度は高いです。
Content Size FitterのFitを Prefered Sizeに設定しても子のLayout ElementがMin Sizeなら、
Content Size Fitterは機能します。
逆にContent Size FitterのFitをMin Size、子のLayout ElementをPrefered Sizeに設定してもコンテンツは表示されません。
サイズ変更の基準位置はPivotで決定
Content Size Fitterで親要素のサイズが変更される基準位置は親要素のPivotで決まります。
X:0、Y:0に設定すれば左下から右上へ、
X:1、Y:1に設定すれば右上から左下へ伸びていきます。
Scroll Viewのコンテンツを増やして自動ストレッチ
それでは実際にContent Size Fitterを使っていきます!
Scroll Viewのコンテンツ(Contentオブジェクトの子オブジェクト群)を増やして、
Contentオブジェクトを自動ストレッチさせていきます!
まずはScroll Viewを作成します。(スクロールバーは邪魔なので削除)
続いてContentオブジェクトにVertical Layout GroupとContent Size Fitterのコンポーネントを以下の設定で取り付けます。
Contentの下にImageUIオブジェクトを作成し、Layout Elementを以下の設定で取り付けます。
準備完了。ImageUIオブジェクトをコピペで増やせば親のContentオブジェクトが自動ストレッチしていきます!
今回はここまでです、ありがとうございました〜