【Unity】Scroll Viewを使う(縦スクロール編)

ネコニウム研究所

PCを利用したモノづくりに関連する情報や超個人的なナレッジを掲載するブログ

【Unity】Scroll Viewを使う(縦スクロール編)

2022-6-23 |

UnityでScroll Viewを使って縦スクロールしたい!

概要

この記事では、UnityでScroll Viewを使って縦スクロールする手順を掲載する。

仕様書

環境

  • Unity 2021.3.3f1

手順書

今回は、ボタンを縦に並べてスクロールで表示してみる。

  1. 「Button (Legacy)」だけの何の変哲もないPrefabを作る。名前は「ScrollButton」にした。
  2. 「Button (Legacy)」に「Layout Element」をアタッチする。「Preferred Height」にボタンの高さを入力する。この高さで整列される。
  3. 「Scene」に戻る。「Hierarchy」の「Canvas」の中に「UI」->「Scroll View」を追加する。
  4. 追加されると下図のようになる。
  5. 「Hierarchy」の「Scroll View」->「Viewport」->「Content」の中に先程作ったPrefab「「ScrollButton」」を追加する。スクロールさせたいので今回は11個分追加した。
  6. 「Hierarchy」の「Scroll View」->「Viewport」->「Content」に「Vertical Layout Group」と「Content Size Filter」を追加する。
  7. 「Vertical Layout Group」の「Control Child Size」の「Width」にチェックを入れる。「Child Force Expand」の「Width」と「Height」にチェックを入れる。
  8. 「Content」の横幅を調整する。「Content」の中のボタンの横幅は「Content」の横幅に合わせて自動的に調整される。
  9. シーンを実行すると横方向のスクロールバーは自動的に消える。縦のスクロールバーを使ってみると下図のような感じになる。

まとめ(感想文)

Scroll Viewを使えるようになるまで、なかなか覚えることが多い印象。でも、自分で実装するよりは楽かもね!