スクロールビュー(Scroll View)の設定方法をいつもすぐ忘れるので備忘録。
目次
対象バージョン
この記事は Unity 2020.3.9f1 を元にしています。
Scroll Viewの構成
デフォルトのScroll Viewは以下のような構成です。
- Scroll View
- 表示する範囲やスクロールの動作設定などをするオブジェクト
- Viewport
- スクロールビューの外を消すマスク処理をするためのオブジェクト
- Content
- スクロールする対象のUIオブジェクトを配置するためのオブジェクト。スクロールできる範囲や、最初に表示される位置をこのオブジェクトで設定します
- Scrollbar Horizontal / Scrollbar Vertical
- スクロールバーのオブジェクト。不要ならScroll Viewの設定を消した上で、このオブジェクトを消してもよい
表示範囲
(1)と(2)の表示範囲は、Scroll ViewのWidthとHeightなどのRect Transformで設定します。AnchorのMinとMaxを0と1にして、画面いっぱいに広げるような設定をしても問題なく動きます。
スクロールバーを消す
スマホ用などでスクロールバーがいらない場合は、Inspectorウィンドウの(3)と(4)の欄を削除してNoneにして、Scrollbar Horizontal と Scrollbar Vertical を削除します。
スクロールバーを使わない場合、スクロールするかどうかに応じたViewportのサイズ調整が動作しないようで、そのままだとスクロールバーの場所が空いてしまいます。ViewportのRect TransformのRightは0にするのがよさそうです。
コンテンツの配置
コンテンツを配置する先
表示するコンテンツは Content オブジェクトの子供にします。
スクロールできる範囲
Contents オブジェクトの幅や高さがスクロールできる範囲になります。図では、Scroll Viewの高さが900、Contentsの高さが2000なので、表示範囲が900で、画面外に1100スクロールできます。
最初に表示される場所
Contents の Pos X や Pos Y に設定した状態で始まります。図では、Anchorが上端でPos Yが0なので、上端が表示された状態で始まります。
プログラムでコンテンツを追加する場合などは、Anchorをうまく設定しておくと計算が楽になる場合があります。例えば中央から表示したい場合なら、AnchorのMinとMaxを0.5にして、Pos Yを0にしておけば、自動的に中央から表示できます。
