20242/11

【クセを理解】Unityのスクロールビューでリストを作る！動かない原因も解説！

2024年2月11日2,327 views

ころもちゃん

画面をスクロールするウィンドウを作って、沢山のアイテムを表示したい！

本記事の内容

・Unity標準のスクロールビューの各項目の解説
・使うために必要なカスタマイズポイント

スクロールビューの構成

スクロールビューを使うことで狭い箇所に多くのオブジェクトを配置できる

よくあるソシャゲの報酬画面や、メニュー画面など、スクロールウィンドウを作成する方法の解説です。

まずは、Canvasの配下にスクロールビューを作成してみます。

すると、以下のようなオブジェクトがまとめて作成されるはずです。
下に詳細書いていますが、要はScrollViewで全体のサイズを決めて、Contentエリアに沢山コンテンツを配置していけばスクロールされていきます（適当）。

オブジェクト	役割
Scroll View	スクロールビュー全体のサイズを決めるオブジェクトです。また、このオブジェクトにアタッチされているImageコンポーネントを変更すると、ウィンドウの背景が変わります。
Scroll View > Viewport	ScrollViewが見える範囲を定義してます。子オブジェクトのContentのサイズは、Viewportよりも大きい設定がされているが、実際に表示されるサイズが、Viewportのサイズになるようマスクして表示されています。
Scroll View > Viewport >Content	オブジェクト自体はここにはなにもありませんが、ビューに表示するコンテンツは、このContentオブジェクトの子オブジェクトに作成していきます。
Scrollbar Horizontal/Vertical	スクロールバーの背景に当たる箇所です。
Sliding Area	画面をスクロールするときに、Handleが移動可能な範囲になります。あまりいじることは無いと思います。
Handle	スライダーのつまみ部分のことです。

スクロールビューのカスタマイズポイント

カスタマイズポイント１：水平/垂直スクロールのいずれを使うか？

デフォルトでは、水平/垂直両方にスクロールができるようになっていますが、どっちも使うケースは少ないと思います。
片方だけを使うには、ScrollViewを選択してインスペクタウィンドウから、ScrollRectコンポーネントを選択。
水平、垂直のチェックの使いたい部分だけを選択。

垂直のみを使う場合は、HorizontalのScrollbarも不要になるので削除してしまいます。

カスタマイズポイント２：コンテンツサイズを自動で調整する

この状態で、ContentにUIオブジェクトを配置していきます。試しにImageを8個ほどContentの配下にセットしました。

まずはこの状態で動かしてみましょう（以下は失敗を紹介しています）。

GIF画像のとおり、思ったようにスクロールしてくれません。あとスクロールバーも出てきませんね。
なぜこうなるかというと、Contentのサイズが小さすぎるからです。

Contentのサイズは、スクロールビューで表示したいすべてのオブジェクトを含めた、画面をはみ出るようなサイズにする必要があります。（今回の例なら、画像8個が収まるサイズ）

けど、実際にはScrollする項目はゲームプレイ中に増えていくので、自動で調整されて欲しいですよね。そこで登場するのが、ContentSizeFitterコンポーネントです！

Contentオブジェクトのインスペクタウィンドウから、ContentSizeFitterコンポーネントを追加し、スクロールしたい方（水平/垂直）のリストを「Preferred Size」にします。

すると、ContentのRectTransformの値が、自動的に大きくなっています。自動でContentのサイズを調整してくれていますね！（コンポーネントを入れる前は300だった）

この状態で再度実行してみます。ちゃんとスクロールしました！

カスタマイズポイント３：等間隔で並べる

最後に、スクロールビューで表示する項目は、等間隔で並べることがほとんどです。これも等間隔で並べてくれるコンポーネントがあるので、こちらも設定していきます。
先ほどと同様、Contentオブジェクトを選択して、インスペクタウィンドウから、Vertical LayoutGroupを選択します。（横スクロールの場合であればHorizontalLayout、縦横であればGridLayout）

LayoutGroupで主に設定すべき項目は、「パディング」、「間隔」、「子を整列」の3つです。