【Unity】ContentSizeFitterとLayoutGroupを利用してScrollViewの縦(横)スクロールを実装する

はじめに

今回は以下のGifのような縦(VerticalとHorizontalを入れ替えれば横)スクロールのScroll Viewの実装してみようという記事になります。

実際に動作させている様子

やり方

Hierarchy上で右クリックをし、UI > Scroll Viewを選択します。

Scroll Viewを生成する

このときに縦スクロールの場合ならScroll Horizontalというゲームオブジェクトは削除してしまって構いません。またScroll ViewというゲームオブジェクトのScroll RectコンポーネントのHorizontalのチェックマークをはずしておきます。

Horizontalのチェックマークを外す(縦スクロールの場合)

Scroll Rect - Unity マニュアル

Scroll Viewの孫にContentというゲームオブジェクトがあると思うので、以下の2つのコンポーネントをアタッチします。(縦スクロールの場合)

• VerticalLayoutGroup
• ContentSizeFitter

VerticalLayoutGroupとContentSizeFitterをアタッチする

また上記画像のようにVerticalLayoutGroupに対して以下の操作をします。

• Control Child SizeのWidthにのみチェックマークを入れる
• Child Force ExpandのWidthにのみチェックマークを入れる

最後にContentSizeFitterのVertical FitをMin Sizeにすれば完成です。

動作確認

Contentゲームオブジェクトの子に適当に大量のImageを配置してみます。(Hierarchyを右クリックして、UI > Image)

配置している様子

実際に動作させている様子