LoginSignup
88

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-02-02

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

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

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

完成形

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

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

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

環境

  • Unity 2020.3.25f1

Scroll Viewの追加

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

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

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

Screen Shot 2022-02-02 at 21.45.33.png

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

Screen Shot 2022-02-02 at 22.05.24.png

要素を追加する場所

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

Scroll View
  Viewport
    Content

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

Screen Shot 2022-02-02 at 22.09.41.png

要素の作成

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

1. 横の行を追加

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

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

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

Screen Shot 2022-02-02 at 22.19.38.png

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

Screen Shot 2022-02-02 at 22.22.20.png

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

Screen Shot 2022-02-02 at 22.30.53.png

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

2. 行の中身を作成

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

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

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

Screen Shot 2022-02-02 at 22.36.36.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

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

Screen Shot 2022-02-02 at 22.50.14.png

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

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

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

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

Screen Shot 2022-02-02 at 23.11.55.png

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

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

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

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

要素数を増やす

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

Prefab化しても良いです。

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

動作確認

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

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

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

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

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

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

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

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
88