Unity│uGUIスクロールビューの作り方

uGUIの標準機能だけでスクロールビューを作る方法を紹介します。

コードは書かずに、コンポーネントの設定だけで実装できます。

完成イメージ

リストの作成

下敷き（ScrollView）の作成

1. GameObject → UI → Panelを作成
2. サイズを600×384に設定
3. 名前を「ScrollView」に変更

スクロールエリア（Viewport）の作成

1. ScrollViewの子にGameObject → Create Emptyを作成
2. Rect Transformで上下にストレッチをかける
3. 余白として上下左右に16を入力
4. 名前を「Viewport」に変更

レイアウトエリア（Content）の作成

1. Viewportの子にGameObject → Create Emptyを作成
2. Rect Transformで横にストレッチをかける
3. Pivotを上揃え（Y=1）に設定（上にしないと余白がずれる）
4. Grid Layout Groupコンポーネントを追加
5. Content Size Fitterコンポーネントを追加し、Vertical FitをPreferred Sizeに設定
6. 名前を「Content」に変更

アイテムの作成

1. Contentの子にGameObject → UI → Imageを作成
2. サイズを256×96に設定
3. 名前を「Item_1」にして、12個複製

Grid Layout Groupの設定

1. Cell Sizeにアイテムのサイズ256×96を入力
2. Padding LeftとSpacingに16を入力
3. ConstraintをFixed Column Countに設定し、値を2にする（2列表示）

Scroll Rectの設定

1. ScrollViewにScroll Rectコンポーネントを追加
2. Horizontalのチェックを外す（縦スクロールのみ）
3. ContentにContentオブジェクトを登録
4. ViewportにViewportオブジェクトを登録

スクロールバーの作成

スクロールバーの下敷き作成

1. ScrollViewの子にGameObject → UI → Imageを作成
2. 右Pivot、上下ストレッチに設定
3. 余白は右-24、上下16に設定
4. 名前を「Scrollbar」に変更

ハンドルの作成

1. Scrollbarの子にGameObject → UI → Imageを作成
2. カラーを黒に設定
3. 左右にストレッチ、上下左右に3の余白を設定
4. 名前を「Handle」に変更

Scrollbarコンポーネントの設定

1. ScrollbarにScrollbarコンポーネントを追加
2. Handle RectにHandleを登録
3. DirectionをBottom To Topに変更
4. ScrollViewのScroll Rect → Vertical ScrollbarにScrollbarを登録

※Directionを切り替えると画像の縦横が入れ替わるので、必要に応じて調整してください。

まとめ

階層構造：

• ScrollView（Panel + Scroll Rect）
• ├ Viewport（Empty）
• │ └ Content（Grid Layout Group + Content Size Fitter）
• │ 　└ Item_1〜12
• └ Scrollbar（Image + Scrollbar）
• 　└ Handle（Image）

ポイント：

• ContentのPivotは上揃えにする
• Content Size FitterのVertical FitをPreferred Sizeに設定
• Scroll RectにContentとViewportを登録する