• スクロールビュー（uGUI で自作）
• uGUI で用意された Scroll View
• レスポンシブなデザインで利用する
• サンプル
• 参考

諸々を参考にスクロールビューを使ってみたので、ポイントをメモ。こんな感じのものが簡単にできました。

Unity uGUI の流れとしては Scroll Rect を利用して実装するスクロールビューがあって、そのあとに Scroll View が追加されているようです。¹ 使う機会もありそうなので、自分なりに調べてみたことをメモしています。

まず、スクロールビューそのものの考え方は「Microsoft Docs - スクロール ビューアー コントロール」がわかりやすかったです。あとは、インタフェースデザインの心理学を見直してみるのもポイントかと。

直接的にスクロールビューについて、指摘する効果はありませんが。

スクロールビュー（uGUI で自作）

独自に実装するパターンは、こんな感じになりました。「UnityのuGUIでスクロールビューを作る」を参考にしましたが、2014 年の記事です。

ビューに入れる Node の要素数がたくさんになるとパフォーマンスに影響がでる、といった指摘も Qiita にありました。とはいえ、問題になるようなケースよりも問題にならないケースのほうが大体な気もしますが、ともかくパフォーマンスに留意したほうがよいケースがある、ということだと思います。

パフォーマンスに影響があるケースは、そもそも適したコンポーネントの選択になっていないのかもしれない。UI としても適切なのか見直す。

• Canvas

  • Horizontal Layout Group
    Control Child Size (Width, Height = true)

• Scroll View (Create Empty)

  • Scroll Rect
    Horizontal (false)
    Vertical (true)
  • Mask or Rect Mask 2D
  • Layout Element
    Min Width (true & 300)
    Flexible Height (true & 1)

• Content (Create Empty)

  • Vertical Layout Group
    Child Force Expand (Width, Height = true)
  • Content Size Fitter
    Horizontal Fit (Unconstrained)
    Vertical Fit (Preferred Size)
  • Node Builder (新しい Script ファイル)

Scroll Rect が縦横のどちらにビューを移動させることができるのかを決める部分なので、Horizontal が有効になっていると横に伸びてしまい背景が見えてしまいます。忘れてはいけないポイントだと思います。Mask も現在は Mask 2D Rect のほうがパフォーマンスに優れそうです。

uGUI で用意された Scroll View

Scroll View が最初から用意されていますが、基本的には上述の内容から基本は変わらない印象です。

連続する Node は Content に追加します。Content は Vertical Layout Group と Content Size Fitter のコンポーネントを追加して使うことになるので、上述のものと差がありません。Content の位置がズレていたら Left のプロパティなどを修正しました。

どちらかといえば、最初からスクロールバーが用意されているくらいのコンポーネントという認識がよいと思います。（不要なスクロールバーは削除してしまっていいみたいです）

スクロールバーの（デフォルトの）横幅が 20 だったので、Node の横幅を 300 で設計したなら Scroll View の Layout Element コンポーネントの Min Width は 320 にする。

レスポンシブなデザインで利用する

親コンポーネントの Canvas に、Horizontal Layout Groupで制御する。レイアウトグループをそのまま適用できた。

• Canvas
  Horizontal Layout Group (Control Child Size => Width, Height = true)
  • Scroll View (Scroll Rect)
    Layout Element (MinWidth = 固定の横幅, Flexibile Height = true & 1)
  • Empty (メイン画面部分)
    Layout Element (Flexibile Height = true & 1, Flexibile Width = true & 1)

ゲームウィンドウのサイズ（幅）が不定長なのは、使いにくいかもしれない。最初は比率をあわせておくほうがいいかも。

サンプル

GitHub にサンプルプログラムを公開しました。

参考

• Unity Document - Scroll Rect
• Qiita - スクロールビューの基本と軽量なスクロールリストビューの作り方
• テラシュールブログ - UnityのuGUIでスクロールビューを作る
• テラシュールブログ - uGUIの自動レイアウトが分かりにくいと評判なので解説してみる
• Unity UIのAuto Layoutを使いこなして楽々レイアウト