【Unity】ScrollViewを理解したい(※随時追記予定)

対象 Unity初心者 ScrollViewの使い方がよくわからない人

書いている人 Unity歴2ヶ月ほど

前提  Unityでプロジェクトが作成できる人 コンポーネントの概念が理解できる人

環境 UnityVer2019 4.17

UnityのScrollViewがよくわからんので自分用にまとめます。まとめきれていない部分もあるので、理解しだい追記していきます。

ScrollViewはこれ↓ これをUnityのUIで実現する。

縦だけじゃなくて、横のスクロールビューもUnityでは実装できる


「小さい領域に、多くのスペースを使用するコンテンツを表示したい」っていうのがScrollViewのことだ。

Unity公式から

↑はUnityの公式から。Scroll Viewではなく、Scroll Rectって書いてあるけど、これはScroll Viewを生成した時にそのオブジェクトにアタッチされるコンポーネントのことだ。

このScroll RectがScroll ViewをScroll Viewたらしめているものだ。(つまりはScroll Rectコンポーネントがくっついていないと、Scroll Viewを作れないってこと)

ScrollViewオブジェクトには、自動的にScroll Rectコンポーネントがアタッチされている

前置きはこれくらいにして、Scroll Viewを生成して色々見ていこう。

目次

UIからScrollViewを作成する

まずは適当にプロジェクトを作成しよう。作成したら、左上の+ボタンからUI→ScrollViewを選択しよう。

UIの下の方にあるScrollViewはある。

ScrollViewをクリックしたら、縦横のスクロールバーがついたScrollViewオブジェクトが生成されるはずだ。

縦・横スクロールが自動的についている。

HierarchyのScrollViewを全部展開してみると何だかたくさんオブジェクトがあって混乱してしまう。今回はこれをざっくりと理解していきたい。

なんかオブジェクト多くない?

大きく2つのブロックに分けてみていく。

Hierarchyを見てクラクラしてしまうが、今回はこれを大きく2つのブロックに分けて理解していきたい。大きく分けるとViewport部分と、Scrollbar部分だ。この大きな2つのブロックについてざっくりと見た後で、オブジェクトにくっついてる大事なコンポーネント部分について見ていきたい。

赤枠がViewport部分・青枠がScrollbar部分

Viewport部分とScrollbar部分に分けて見ていくときっと理解しやすいんじゃないかと思う。コンテンツ部分とバーそのものと思ってもらえればオッケーだ。

まずは、赤枠のViewport部分を見ていく。

Viewport部分

ここを理解すればもうOKかもしれない。

Viewport部分にはViewportオブジェクトとContentオブジェクトがある。そして、このContentオブジェクトの子要素に、「配置したいコンテンツ」を並べればScrollViewは実装できる。HierarchyのContentオブジェクトをクリックすると、ContentにはRectTransformがくっついていることがわかる。

ContentのHeightは自動的に300で設定されているので、縦スクロールするには特にいじらなくても大丈夫そうだ。

Heightは自動的に300に設定されてる
この白枠部分がContentだ。

さっそく、Contentの子要素にtextを配置してみよう。今回は子要素にTextを配置してく。contentの上で右クリックして、Textを選択。

Textでも、TextMeshProでも好きな方で

Textを複製して、移動させながら5つ並べてみた。Text(TMP)(3)と(4)はViewportにくっついているMaskコンポーネントで隠れている為に、SceneViewからは見えない。とりあえずこの状態で再生してみる。

Textを配置してはいるけど、SceneViewからは見えない。

要素を並べて、再生すると縦スクロールができるようになった。

縦はOK

Viewportについてる。Maskコンポーネントを見てみよう。このMaskコンポーネントにチェックがついてるおかげで、Contentに入ってる要素のはみ出た部分が隠れているわけだ。

ViewportにはMaskコンポーネントがくっついてる

このMaskコンポーネントを外すと、配置する要素が見えるようになる。

Maskを外すと要素が見やすい。
Maskのチェックを外すと要素が丸見えだ

ScrollViewはデフォルトでなぜか横方向の水平バーが消えるので、今度は横スクロールを作ってみる。

横スクロールビューを作るには、使わないScrollVertical(縦バー)のオブジェクトを削除してしまおう。これは縦バーだけ使う時も一緒で、いらないオブジェクトを削除してしまったほうがわかりやすい。(という大体の記事みても削除してるので、消して良いと思う。)

縦のバーはいらないので、Scrollbar Verticalは消してしまう
縦のバーが消えた。

縦のバーは消えたから、後はContentの中に要素を突っ込みたいところだが、Contentの高さが300になっているので、これを横に広げてあげる。

Contentの高さはデフォで300っぽい。
横に広げてあげる。

横に広げたら、あとはContentの子要素にTextを突っ込んで再生してみよう。

横スクロールビューができた

これで、縦・横スクロールビューが実装できた。縦はともかく、横は設定がめんどくさいし、そもそも子要素を配置する時に一々手動で動かすのはめんどくさい。そこで登場するのが、LayOutコンポーネントやContentSizefitterコンポーネントだ。こちらは後述する。

一旦ここまでをまとめてみる。

  • Contentのなかにスクロールさせたい要素を配置する。
  • ViewportにくっついてるMaskコンポーネントで表示しない部分を隠している。
  • デフォルトでは、ContentのHeightが300なので、横スクロールはめんどそう
  • 使わないバーはオブジェクトごと削除してしまおう。

こんなとこだろうか。次はScrollBarについて見ていく。

Scrollbar部分

ScrollbarにはHorizontalとVerticalの2つの部分があって、Horizontalは水平で、Verticalは垂直のバーのことだ。

デフォルトでは2つ要素がくっついているが、上にも書いたが、実際にScrollViewを使うときには、片方だけだと思うので、使わない方は削除してしまおう。

ではScrollbarの子要素を見ていく。

Scrollbarの中にはSlidingAreaとさらにその中にhandleがある。
handleは触って動かす部分で、SlidingAreaはhandleを動かせる範囲。

Scrollbarの中にはSligingAreaとhandleがある。
handle部分がマウスで動かす部分のことで、
SlidingAreaの部分がhandleを動かせる範囲だ。


handleにimageがついていて、ここでカラーも変更できるが、後述するScrollBarコンポーネントでカラーを変更するときに邪魔しちゃうのでここではカラーを変更しないようにしたほうがいいかも。

handleにはimageコンポーネントがついてるので、色も変更できるがScrollBarコンポーネントで制御したほうがいいかも

ScrollBar(HorizontalとVerticalの両方)には、ScrollBarコンポーネントがくっついている。

これはScrollbarVerticalだが、HorizontalにもScrollbarはくっついている。

このScrollbarコンポーネントで、Handle部分を操作していく。

Scrollbarコンポーネントにも色々要素があってめんどくさそう。

Scrollbar部分についてまとめると

  • Scrollbarの子要素には、SlidingAreaとHandleがある。
  • Handleはマウスで動かす部分。SlidingAreaはHandleを動かせる部分
  • Scrollbar自体には、Scrollbarコンポーネントがくっついている。

こんなとこだろうか。

各コンポーネントを見ていく。

さて、ScrollViewをViewport部分とScrollbar部分の大きく2つに分けて見ていった。その中で色々重要そうなコンポーネントが出てきた。今度はその各コンポーネントを見ていきたい。

押さえておくべき場所は3つ。ScrollRectコンポーネントMaskコンポーネントScrollbarコンポーネントだ。
それ以外はRectTransformとimageコンポーネントくらいなので、そちらがわからない人はネットでググってみてください。

各コンポーネントがどのオブジェクトにくっついていたか覚えているだろうか。

  • ScrollRectコンポーネント→ScrollViewオブジェクト
  • Maskコンポーネント→Viewportオブジェクト
  • Scrollbarコンポーネント→各種Scrollbar(VerticalとHorizontal)オブジェクト

この中で一番重要なのは、ScrollRectコンポーネントだ。なぜなら、上にも書いたがScrollViewをScrollViewとして振る舞わせているコンポーネントだから。

なので、空のゲームオブジェクトにAdd ComponetnからScrollRectコンポーネントをくっつけても、ScrollViewに変身する。(もちろんScrollbarなども用意した上で設定しないといけないが)

Maskコンポーネントは Content部分を隠したり、表示させてりするだけなので、ScrollRectコンポーネントとScrollbarコンポーネントについてみていく。まずは、簡単なScrollbarコンポーネント。最後に、ScrollRectコンポーネントを見ていく。

Scrollbarコンポーネント

Scrollbarコンポーネントは各種Scrollbarにくっついてるコンポーネントでこの中でHandle部分を設定したりする。

面倒くさいので、Scrollbarコンポーネント全てについて解説はしないが、大まかなとこだけ見ていきたい。(※後で追記していきます)

色分けしてグループ分けしとくと理解しやすいかな?

Scrollbarの各プロパティ、InteractableやTransition、NavigationはButtonコンポーネントなどにもくっついてるので、詳しくはググってほしいですが、ざっくり言うとInteractableはbar自体を有効・無効にする。Transitionはマウスをホバーした時や、クリックした時の色などを変更する。(TransitionのTargetGraphicにHandleを突っ込む)Navigationは、PCの矢印を使ってカーソルを移動したりする時の移動方向だ。

緑の部分。HandleRectのDirectionやValue、Sizeなどをちょっと変更してみてみたい。Directionを変更するとcontentがバーをスクロールした時にどっちの方向に動くかが変わる。

こっちがBottomToTop、バーと反対方向にコンテンツが動く
TopToBottomは、バーと同方向にコンテンツが動いている

Sizeはバーの大きさが変更したが、自動的にリサイズされてしまったのでよくわからない。Valueもよくわかっていない。NumberOfStepsはバーが段々上に動く。バーがカクカク動くやつだ。

いまいちわかっていない部分もあるので、自分でいじって見て欲しい。

ScrollRectコンポーネント

今度は、ScrollViewで一番重要な、ScrollRectコンポーネントについて見ていく。

ざっと色分けしてみた

オレンジ色の部分は、Hierarchyの対象のオブジェクトが勝手に突っこまれている。例えば、 Contentプロパティには、Contentが、ViewportにはViewportが。逆に言えば、空のオブジェクトに、ScrollRectをくっ付ける場合はオレンジの部分に各要素を用意して突っ込んであげないといけないということだ。

緑の部分のHorizontalとVerticalのチェックは使わないほうのバーのチェックを外してあげよう。どちらにもチェックが入っていると微妙に動いてしまう。

VerticalもHorizontalのどちらにもチェックが入っていると動く。

他のScrollRectのプロパティについても追記していくつもりだ。

ちなみに、ScrollViewを作成した後、そのままGameを再生すると、なぜかverticalの方のBarしか表示されない。SceneViewでも、SetActiveがfalseになっているので表示されていない。これはScrollRectコンポーネントのVisibilityの問題だと考える。Permanentにしたら表示されので、おそらくここらへんだと思う。またわかったら、追記します

まとめ

  • ScrollRectコンポーネントはScrollViewにくっついてるコンポーネント。ここで色々制御していく。
  • ScrollbarコンポーネントはScrollbar(Vertical、Horizontal)にくっついている。ここにHandle部分をくっ付ける。

だいぶ、ざっくりとしたまとめになってしまったが、大枠さえ分かれば後は細かく見ていくだけなので、少し理解してもらえていたらうれしい。ContentSizeFitterなどは別記事でまとめたい。

また本筋とは関係ないけど、書く要素が多いと単純に記事もかなり長くなってしまうので、コンポーネントのプロパティ事にまとめたりして、それに飛んでもらえるようにするかもです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる