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

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

f:id:shikaku_sh:20200225171306g:plain:w550 — スクロールビュー

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

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

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

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

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

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

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

f:id:shikaku_sh:20200225171748p:plain:w500 — こんな感じの関係に

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 ファイル)

f:id:shikaku_sh:20200225173110p:plain:w500 — 設定例

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 にする。

${ Width = Component.Width + Scroll Bar.Width }$

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

親コンポーネントの 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)