Unityのスクロールビューとは何か

公開日:2023/07/08　　更新日:2023/07/08

Unityのスクロールビューの使い方について

　Unityではスクロールビュー(コンテンツをスクロールできるレイアウトの一つ)を作ることが可能だ。
　数が多いコンテンツでも、スクロールで見ることができるようにすれば場所をとらずにすむので有用だ。
　ただスクロールビューは操作・設定が少しわかりづらい。詳しい使い方を紹介していく。

Unityのスクロールビューの使い方目次

スクロールビューの作成
コンテンツ部分(Viewportとその子要素)の詳細
スクロールバー部分の詳細
SlidingAreaとhandle
Scroll Rect
スクロールビューでよく使うコンポーネント
目次にもどる

スクロールビューの作成

　ヒエラルキー欄で右クリックしUI→Scroll Viewのように選択することでスクロールビューを作成することができる。

　Canvasの子要素のScroll Viewに更に子要素が多くついた構造となっている。


　以下の2つの部分に分けて考えることができる。
　「Viewport」とその子要素はコンテンツ部分

　「Scrollbar Horizontal」と「Scrollbar Vertical」とその子要素はスクロールバー部分

　この2つの部分について詳しく紹介していく。

目次にもどる

コンテンツ部分(Viewportとその子要素)の詳細

　Viewport(スクロールビューが描画されている範囲)の子要素であるContent(スクロールビュー内のコンテンツを示す)に子要素をつけると、コンテンツとして並べることができる。
　例えば、ヒエラルキー欄で右クリックしUI→TextMeshproのように選択する。TextMeshproをContentの子要素にする。

　ヒエラルキー欄でTextMeshproを右クリック→Duplicateして複製して、TextMeshproを5つくらい以下のように並べよう(いくつかははみ出して配置。後で整列して並べる方法も紹介するので適当で構わない)。
　再生すると以下のようになる。

　スクロールバーをクリックしてドラッグすることで、はみ出した部分を確認可能である。
　なお、はみ出した部分が隠れているのはViewportのコンポーネントとしてMaskがアタッチされているからだ。ここのチェックを外せば再生せずともはみ出したTextMeshproを確認することができる。
目次にもどる

スクロールバー部分の詳細

　Scroll Viewの子要素のうち、「Scrollbar Horizontal」は横方向のスクロールバー、「Scrollbar Vertical」は縦方向のスクロールバーを示す。
　この2つのゲームオブジェクトがあるため、再生前は横と縦の両方のバーが表示されている。

　だが、再生するとなぜか横方向のバーが消失する。

　なぜこうなるのか？自分には正直全く意味がわからない。
　だが、そもそも縦横両方のスクロールバーが必要になることはまずない。縦方向のみ、または横方向のみのスクロールバーがあればほとんどの場合問題ないはずだ。
　よって見やすくするためにも、いらないほうのバーは削除するのがおすすめ。今回自分は縦方向のスクロールビューを作成したいため「Scrollbar Horizontal」を削除した(横方向のスクロールビューを作りたいのであれば「Scrollbar Vertical」を削除すればいい)。

　ScrollbarのゲームオブジェクトにはScrollbarのコンポーネントがついている。
　特に色の設定は多くて使い方がわかりづらいので紹介していく。

Interactable	このコンポーネントが入力を受け付けるかどうか
Transition	None(遷移なし)、Color Tint(色変更)、Sprite Swap(スプライトの表示)、Animation(アニメーションの発生)の4つから選択。デフォルトではColor Tintとなっている。

　Color Tintを選択している場合は以下の項目の設定が可能。

Target Graphic	ターゲットとなるグラフィックを指定(Scrollbarの場合は後述するhandleゲームオブジェクトのimageがデフォルトで指定されている)
Normal Color	通常色
Highlighted Color	ハイライトされた時の色(例えばマウスカーソルを合わせた時)
Pressed Color	押されている時の色(例えば左クリックされている間)
Disabled Color	無効時の色

目次にもどる

SlidingAreaとhandle

　Scrollbar Verticalの子要素としてSlidingAreaがあり、更にSlidingAreaの子要素としてhandleが存在する(Scrollbar Horizontaleでも同様の構造)。
　SlidingAreaはバーが動く部分、handleはバー本体である。
　このうち、handleにはimageのコンポーネントがついている。ここでもhandleの色を変えることが可能。だが先述したようにScrollbarのゲームオブジェクトのScrollbarのコンポーネントで色を変えられるので、わざわざここで変える必要性は薄い。

目次にもどる

Scroll Rect

　Scroll ViewのコンポーネントであるScroll Rectについてみていく。このコンポーネントはスクロールビューの大元と言えるコンポーネントなので重要な項目について紹介していく。

　確実に確認しておくべきなのはHorizontalとVerticalのチェックボックスである。チェックするとHorizontalは横方向、Verticalは縦方向にコンテンツを移動可能となる。
　デフォルトでは両方にチェックが入っている。今回は自分は縦方向のスクロールビューを作りたいのでHorizontalのチェックを外しておく。

　Scrollbar Horizontalのゲームオブジェクトを削除し横方向バーを消しているので内容を横に動かしようがない、この作業が必要なのか？と思うかもしれない。
　だが、バーを使わずともコンテンツを選択してドラッグすることでも、内容を移動させての閲覧は可能であり、Horizontalのチェックを外しておかないと横に動かせてしまうので注意。チェックは外しておこう。

　MovementTypeの項目では以下の3つの選択肢がある(バー操作ではなくコンテンツを選択してドラッグした場合に関係する)。
Unrestricted
　コンテンツ領域外へのスクロールを許可する。明らかに不自然なのでまず使う機会はない。

Elastic
　コンテンツ範囲外までスクロールした場合に自動的にコンテンツ範囲内にスクロール範囲が補正される。デフォルトの設定。
　1つ下のElasticityでコンテンツ領域外になった際の補正の早さを調整可能。

Clamped
　コンテンツ範囲外へスクロールができなくなる。
目次にもどる

スクロールビューでよく使うコンポーネント

　Scroll Viewとセットで使うことが多いのが1つ目が「Vertical Layout Group」または「Horizontal Layout Group」のコンポーネント、2つ目が「Content Size Fitter」と呼ばれるコンポーネントである。
　これらのコンポーネントをContentにアタッチすることでContentをコンテンツに合わせたサイズにすることが可能となる。
　今回は縦方向のスクロールビューを作りたいので「Vertical Layout Group」と「Content Size Fitter」をアタッチする。
　「Vertical Layout Group」によってContentにつけた子要素(今回はTextMeshpro)を縦に並べることができる。Contentのサイズを変更可能することが可能。
　今回は「Vertical Layout Group」のコンポーネントの項目のControl Child SizeのHeightにチェックを入れた。

　これでコンテンツの高さによってContentの大きさが調整可能となる。
　「Content Size Fitter」のコンポーネントのVertical Fitの項目をPreferred Sizeに変更。

　これで「Vertical Layout Group」の高さを確認して以下のようにContentの大きさが変化するようになる。

　ContentがTextMeshproちょうど5つ分の高さになり、スクロールバーを使う必要がなくなった。