Unity(C#)初心者・入門者向けチュートリアル ひよこのたまご

AndroidやiOS向けアプリを簡単に作れるゲーム開発環境Unity(ユニティ)の使い方を、チュートリアル方式で一緒に学びましょう!

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はコンテンツを子に持つ親オブジェクトに付けられます。

f:id:hiyotama:20190819114117p:plain
コンテンツを持つ親オブジェクトに付けられる
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を作成します。(スクロールバーは邪魔なので削除)
f:id:hiyotama:20190819114529p:plain
f:id:hiyotama:20190819114550p:plain
続いてContentオブジェクトにVertical Layout GroupとContent Size Fitterのコンポーネントを以下の設定で取り付けます。
f:id:hiyotama:20190819121104p:plain
Contentの下にImageUIオブジェクトを作成し、Layout Elementを以下の設定で取り付けます。
f:id:hiyotama:20190819121140p:plain
準備完了。ImageUIオブジェクトをコピペで増やせば親のContentオブジェクトが自動ストレッチしていきます!

f:id:hiyotama:20190819121405p:plain
子オブジェクトを増やすと…
f:id:hiyotama:20190819121455p:plain
親のHeightが自動ストレッチ!

今回はここまでです、ありがとうございました〜