ScrollViewのつかいかた

Unity 作成日：2021.07.10

Unity の ScrollView のつかいかたを紹介します。

Unity でスクロール表示させたい場合には、Scroll Viewを使うんだけど、このScrollViewは複数のオブジェクトで構成されていて、すこし慣れが必要かも。

あと、DoozyUIを使いつつ、ScrollViewを使う場合は、ハマりどころがあったので、そちらも紹介しますね。

Scroll View をつかった例

Scroll View を追加する

Scroll Viewは「UI＞ScrollView」から追加します。

追加したScroll Viewオブジェクトの下には、たくさんのオブジェクトが含まれます。

それぞれの役割は以下のとおり。

表示領域がViewportで、コンテンツの領域がContentということ。

スクロール操作をするので、基本的に ContentサイズがViewportサイズより大きくはず。試しにContentサイズを広げてみます。

その状態で実行すると、スクロール操作できます！

実際に操作しながら、Sceneの挙動を見てみると、Viewport と Content の関係がよく分かるはず。

Scroll Viewを実行する

スクロール方向が縦方向だけの場合は、横方向のスクロールバーは不要。

そういった場合に、スクロールバーの表示・非表示は、Scroll Viewで設定します。

Horizontal / Vertical でスクロールさせる方向を指定。
ScrollbarのVisibilityで、自動で隠すかどうかなどを設定。

ここからオブジェクトを追加して実際にスクロール表示させてみます。

やることは、Conent以下にオブジェクトを配置するだけ。

Content以下にTextを配置して実行

Contentに含めるものが、あらかじめ決まっている場合は良いけど、動的にContentの内容を変えたいケースの方がが多いはず。

例えば、アイテムリストを表示する場合だと、アイテムの種類の数をContentに含めることになるよね。

こういったContentに含めるオブジェクトのサイズに応じて、Content のサイズを自動で決めたいケースがあります。その場合は、Content Size Fitter コンポーネントを使います。

あと、Contentに含めるものを等間隔に整列させたいケースも多いかも。そういった場合は、Layout Groupコンポーネントを使います。

これで、Contentの中に必要なオブジェクトを整列させつつ、Contentのサイズを自動で決定することができました。

DoozyUIを使っている場合に、なぜかScrollViewが正しく動かない場合がありました。

以下の２点の設定で回避できましたので、そちらを紹介します。

UnityのUIを使うと自動でEventSystemが追加されるけど、DoozyUIをつかう場合だと、EventSystemが追加されないケースがありました。もしプロジェクトにEventSystemが追加されていなければ、追加する必要があります。

あとは、UIのPanelの子要素じゃないとどうもScrollViewが動作しないみたい。これに関しては、あまり詳しく調べていないので、他の回避方法があるかもしれません。

ScrollViewについて紹介しました。

ContentSizeFitterやLayoutGroupなどと一緒に使うことが多いので、正しく設定しないと、思い通りに動作しないこともありました。UIの他コンポーネントについても理解しておかないと、使いこなすのは難しいかもしれません。

スマホアプリだとスクロールは当たり前の操作になるので、ScrollViewのつかいかたはしっかり把握しておきたいです。