動作確認バージョン 2018.4.11f1
アイテム一覧の作成
今回はアイテム一覧などでよく見かけるようなスクロールできる画面を作ろうと思います。
作成方法は単純で、Scroll Viewを作成し、Layout GroupとContent Size FitterをContentにアタッチすれば良いです。以下で、詳しく見ていきます。
Scroll View
Unity側で ScrollView というテンプレートが用意されているので利用します。Hierarchy→Create→UI→ScrollViewを押して作成します。
作成したら、ViewPortと縦横のScrollBarからなる ScrollView ゲームオブジェクトが作成されます。 viewportにはMaskがアタッチされており、見える部分を制限しています。スクロール時の挙動制御は、ScrollViewにアタッチされているScroll Rectで行います。
Scroll Rect
ScrollView にアタッチされているScroll Rectは、 ScrollViewの各種コンポーネントの参照をプロパティとして持ちスクロールの挙動の制御を行います。作成時に設定済みのプロパティは省略し重要なプロパティのみ紹介します。
Horizontal/Verticalのチェックボックスは、横方向のスクロール、縦方向のスクロールを有効にするかを決定します。あくまでスクロールできるできないを制御するもので、チェックを外してもスライダーが消えたりはしません。片方のスライダーしか使用しない場合は、スライダーオブジェクトごと消すのが良いです。
Movement Typeは、スクロール時の挙動を制御します。Unrestricted、Elastic、Clampedの３種類あります。Unrestrictedは無制限にスクロールできますが、使うことはないと思います。Elasticは、スクロールが端に達した際に跳ね返るような挙動になります。跳ね返り時の速度は、Elastic指定時に出現するElasticityで制御できます。 Clampedは端に達したら止まります。
Inertiaはスクロール時に慣性を付与するかを決定します。チェックを付けるとスクロールした際の勢いに応じて手を離した後もしばらくスクロールするようになります。チェックを付けた際に出現するDeceleration Rateは減衰率です。０に近いほどすぐ止まり、１に近いほど止まらない挙動になります。
Horizontal/Vertical ScrollverのVisibilityは、スクロールの表示の制御を行います。Permanent、Auto Hide、Auto Hide And Expand ViewPortの３種類あります。Permanentは常時スクロールバーを表示します。Auto Hideはスクロールなしでもコンテンツを全て表示できる場合に非表示になります。 注意点として、隠れるのはプレイモード時のみでEditor上では条件を満たしていてもスクロールバーは表示されたままです。Auto Hide And Expand ViewPort はAuto Hideの機能に加えて、ViewPortのRect Transformが自動で計算されるようになります。今回はデフォルトの Auto Hide And Expand ViewPortに設定しました。
Layout GroupとContent Size Fitter
Layout GroupとContent Size Fitterで、コンテンツ数に応じて自動でスケールできるようにします。今回はGrid Layout Groupを使います。Scroll ViewのContentゲームオブジェクトに Grid Layout GroupとContent Size Fitterをアタッチします。
Grid Layout GroupはVertical LayoutやHorizontal Layoutと違いLayout Elementでサイズ制御が出来ません。 Grid LayoutのCell Sizeプロパティで各コンテンツのサイズを決定します。列数または行数はConstraintプロパティで固定できます。ConstraitにはFlexible、Fixed Column Count、Fixed Row Countの３種類あり、 Fixed Column Countで列数の固定、 Fixed Row Countで行数の固定ができます。今回は、 Fixed Column Count を４に設定しました。
Content Size Fitter は、Min SizeあるいはPreffed Sizeに設定しておきます。今回は、縦方向のスクロールのため、Vertical FitをMin Sizeに設定しました。
以上の設定でContentゲームオブジェクト下のゲームオブジェクトの数に応じて自動スケールできるようになります。
