【Unity】スクロールビューをFlexBoxのように等間隔に要素を並べて、要素数に応じてスクロール領域が自動で変わる設定方法

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

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

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

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

<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/d7Q7cTw0mK">pic.twitter.com/d7Q7cTw0mK</a></p>&mdash; tak001 (@5HdM6WlLVaazBV7) <a href="https://twitter.com/5HdM6WlLVaazBV7/status/1488881257207721985?ref_src=twsrc%5Etfw">February 2, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

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

# 環境
- Unity 2020.3.25f1

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

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

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

![Screen Shot 2022-02-02 at 21.45.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/8c55ce11-e4dd-fd42-1113-72bbb3fc87a3.png)

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

![Screen Shot 2022-02-02 at 22.05.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/762d67b9-c2c0-b555-0e6a-3d3ea35f3899.png)

# 要素を追加する場所
デフォルトの構成は以下のようになっていると思います。

```
Scroll View
  Viewport
    Content
```

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

![Screen Shot 2022-02-02 at 22.09.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/b4160f82-332e-8c16-505a-753fe7c30b7c.png)

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

## 1. 横の行を追加
初めに、横行となる空の要素を作ります。

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

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

![Screen Shot 2022-02-02 at 22.19.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/9426d2cc-4c78-d798-c4b4-10c59846ee9a.png)

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

![Screen Shot 2022-02-02 at 22.22.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/05604e90-f3d6-ab70-4799-218dc4e2382a.png)

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

![Screen Shot 2022-02-02 at 22.30.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/1e154c0c-4ec4-f585-10f4-cde51d3baff8.png)

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

<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/mTsnOil08y">pic.twitter.com/mTsnOil08y</a></p>&mdash; tak001 (@5HdM6WlLVaazBV7) <a href="https://twitter.com/5HdM6WlLVaazBV7/status/1488867923292835844?ref_src=twsrc%5Etfw">February 2, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

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

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

![Screen Shot 2022-02-02 at 22.36.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/9fd3068a-f10a-8a2f-1c37-af1bd0461afb.png)

## 3. オブジェクトの高さを自動調節する
続いては、スクロールビューの高さを自動調節していきます。

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

### 3-1. Content Size Filterを追加
```
「Content」の上で右クリック > Inspector > 「Add Component」をクリック
```

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

![Screen Shot 2022-02-02 at 22.47.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/0a313b79-1ebe-8660-30c2-5241c3aa8e37.png)

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

![Screen Shot 2022-02-02 at 22.50.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/040be123-cb62-c737-c761-3614e28fff2a.png)

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

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

https://docs.unity3d.com/ja/2020.3/Manual/script-ContentSizeFitter.html

### 3-2. Vertical Layout Groupを追加
続いて、「Vertical Layout Group」を追加します。

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

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

![Screen Shot 2022-02-02 at 23.10.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/556a4012-18e6-c614-3dcb-1d712783d6b4.png)


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

![Screen Shot 2022-02-02 at 23.11.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399610/8d50facf-fce9-31cb-ee2d-b1a15544db30.png)

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

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

https://docs.unity3d.com/ja/2018.4/Manual/script-VerticalLayoutGroup.html

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

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

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

Prefab化しても良いです。

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

<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/GCKEZhblfR">pic.twitter.com/GCKEZhblfR</a></p>&mdash; tak001 (@5HdM6WlLVaazBV7) <a href="https://twitter.com/5HdM6WlLVaazBV7/status/1488879428579258370?ref_src=twsrc%5Etfw">February 2, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

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

<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/90CBlcTXM0">pic.twitter.com/90CBlcTXM0</a></p>&mdash; tak001 (@5HdM6WlLVaazBV7) <a href="https://twitter.com/5HdM6WlLVaazBV7/status/1488880533983883266?ref_src=twsrc%5Etfw">February 2, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

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

<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/d7Q7cTw0mK">pic.twitter.com/d7Q7cTw0mK</a></p>&mdash; tak001 (@5HdM6WlLVaazBV7) <a href="https://twitter.com/5HdM6WlLVaazBV7/status/1488881257207721985?ref_src=twsrc%5Etfw">February 2, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

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

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

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