UnityのScroll Viewで一覧表示を作成する


ScrollViewを使用した一覧表示の作成


今回は uGUI のScroll Viewをつかった一覧表示の作成方法について紹介します。

unity_skill_3

オンラインゲームのルーム一覧を勢いで作り始めたところ、こんなの知らないと無理っす…
みたいな箇所がいくつかあったので、調べものの備忘録としてまとめておきます。

ScrollViewをスクロールバーから自作したり、部分的に使用したい方はこちらのエントリーをご覧ください。
⇒ UnityのScrollbarの使い方

※Unityはバージョン5.3.4を使用しています。

Scroll View を使用した一覧表示の作成


1.繰り返し表示するパーツを作る

一覧の中で繰り返し表示されるオブジェクト(RoomNode)を作成します。

Hierarchy

WS000420
RoomNodeは、UIの Panel で作成した、ただのパネルです。
子要素の Button と Text も自前で配置しています。
※UIオブジェクトを作成すると自動的にCanvasの子要素に入ります。EventSystemも自動で追加されます。

Scene

WS000419

RoomNodeの設定

作成したRoonNodeにLayout Elementコンポーネントを追加します。
繰り返し表示されるオブジェクトの最低・最大幅などを設定できます。

RoomNodeのInspector

WS000426

Layout Elementの Preferred Height を設定しておきます。(理想サイズ)
作成したRoomNodeはプレハブ化して、Hierarchyから一旦削除しておきます。

2.一覧表示の枠組みを作る

一覧表示にはScroll Viewを使用します。(UI → Scroll View)

Scroll ViewはScrollbarがすぐ使える状態に組み込まれている複合UIです。(いつからか用意されているようになりました)
繰り返し表示したいオブジェクトをContentの子要素に追加することで一覧に表示されます。
WS000423WS000422

Contentの設定

Contentの子要素に入れたオブジェクトが自動整列されるよう、Contentにコンポーネントを追加します。

Vertical Layout Group コンポーネント
追加された子要素を縦方向に整列してくれます。

Content Size Fitter コンポーネント
追加された子要素の数に応じて、Contentのサイズを自動調整してくれます。

追加した Content Size Fitter の Vertical FitPreferred Size に変更しておきます。
WS000425

3.コンテンツの追加とレイアウトの調整

表示

Contentの子要素に、プレハブ化してあったRoomNodeを追加しましょう。(いっぱい)
WS000427WS000428

微調整

コンテンツ同士がくっつき過ぎていて見づらいので、Vertical Layout Group を使用して微調整しましょう。
WS000429WS000430
※ついでにScroll ViewのWidthも若干広げました。

水平方向のスクロールは使用しないため、Scrollbar Horizontal は削除してしまって問題ありません。
削除する場合は、Scroll View の Scroll Rect コンポーネントから、Horizontal Scrollbarの参照を外しておきましょう。
WS000431

4.完成

以上の設定で完成した一覧表示がこちら!
unity_skill_3

あとはインスタンスされたオブジェクトが、Contentの子要素になるようスクリプトから操作してあげれば完璧です。

以上です。

最近よく読まれている記事

【新着】uGUIをキャラクターの上に表示する手っ取り早い方法【RenderMode別】

Unityの記事一覧にもどる

  • このエントリーをはてなブックマークに追加

PAGE TOP