UnityのScroll Viewを使う時に、要素を等間隔で並べて且つ、要素数に応じてスクロール領域を自動で変える方法です。

なので、要素数が少なければスクロールバーは表示されないですし、スクロールビューの大きさを超えるような要素数の場合は、自動的にScroll Barが表示されます。

CSSだとFlexBoxに近い感覚かと思います。

完成形

完成イメージは以下です。

pic.twitter.com/d7Q7cTw0mK
— tak001 (@5HdM6WlLVaazBV7) February 2, 2022

横に並んだ要素を一行として、縦に複数並べています。

この縦の要素数に応じてスクロール領域が自動で変わります。

環境

Unity 2020.3.25f1

Scroll Viewの追加

初めにScroll Viewを追加いたします。

Hierarchy > 追加させたい親要素を右クリック(今回はCanvas) > UI > Scroll View

をクリックして追加します。

今回、横スクロールは不要ですので「Scrollbar Horizontal」を削除しておきます。

要素を追加する場所

デフォルトの構成は以下のようになっていると思います。

Scroll View
  Viewport
    Content

要素の追加は、「Content」へ追加していきます。

要素の作成

では、要素を作っていきます。

1. 横の行を追加

初めに、横行となる空の要素を作ります。

「Content」の上で右クリック > 「Create Empty」を選択

※「正しい親の上でクリック追加」しないと、高さの数値などが正しくならないため、自動調節する時におかしくなります。

今回はオブジェクト名を「Node」とします。

「Node」をクリックして、アクティブにした状態で「Rect Tool」を選択します。

作成した空の行を配置したい場所へ移動させて、大きさを合わせます。

pic.twitter.com/mTsnOil08y
— tak001 (@5HdM6WlLVaazBV7) February 2, 2022

2. 行の中身を作成

続いて、行の中身を適当に作ります。

「Node」の上で右クリック > お好きな要素を追加

今回は、Text と InputField を並べてみました。

3. オブジェクトの高さを自動調節する

続いては、スクロールビューの高さを自動調節していきます。

自動調節は、「Content」に対して行います。

3-1. Content Size Filterを追加

「Content」の上で右クリック > Inspector > 「Add Component」をクリック

「content」とまで入力すると「Content Size Filter」が検索されますので選択します。

高さに対して自動調節を行いたいので、「Content Size Filter」内の「Vertical Fit」を「Preferred Size」に変更します。

Content Size Fitter は自体のレイアウト要素のサイズを管理するコントローラーとして機能します。

各項目については、公式ドキュメントをご確認下さい。

3-2. Vertical Layout Groupを追加

続いて、「Vertical Layout Group」を追加します。

「Content」の上で右クリック > Inspector > 「Add Component」をクリック

「vertical」と入力すると「Vertical Layout Group」が検索されますので選択します。

そして、「Control Child Size」の「Width」にチェックをして有効にします。

Vertical Layout Group コンポーネントは、子のレイアウト要素を互いに垂直方向に配置します。

詳細は、公式ドキュメントをご確認下さい。

もし要素と要素の間にスペースが必要であれば、「Spacing」や「Padding」で調節が可能です。

これでスクロールビューの高さを自動調節してくれるようになりました。

要素数を増やす

高さの自動調節が可能になっていますので、「Node」をコピーして増やしてみましょう。

Prefab化しても良いです。

すると要素が自動的に下に追加されていきます。

pic.twitter.com/GCKEZhblfR
— tak001 (@5HdM6WlLVaazBV7) February 2, 2022

動作確認

最後は動作確認をします。

Content内の要素がスクロールビューの高さに満たない場合、右にあるスクロールバーが出ないことを確認します。

pic.twitter.com/90CBlcTXM0
— tak001 (@5HdM6WlLVaazBV7) February 2, 2022

スクロールバーは表示されませんでした。

続いては、Content内の要素がスクロールビューの高さ以上になった場合、右にあるスクロールバーが表示されるか確認してみます。

pic.twitter.com/d7Q7cTw0mK
— tak001 (@5HdM6WlLVaazBV7) February 2, 2022

しっかりと要素数の高さに応じて、スクロールバーも調節されていました。

このようにして、等間隔に要素を自動整列させて、要素数に応じてスクロール領域が自動で変えることができました。

横のスクロールバーを自動調節したい場合

ここまでは、縦のスクロール領域を自動調節しましたが、横のスクロール領域を自動調節する場合、
「Content Size Filter」の「Horizontal Fit」を選択して、Add Component から「Horizaontal Layout Group」を追加する手順になります。

以上となります。
お読み頂き有難うございました。