UnityのuGUIでスクロールビューを作る
Unity4.6で追加したuGUIでスクロールバーを作る方法について紹介します。
大体こんな感じのスクロールバーを作ります。
作り方
まず、リストに表示するノードのプレハブを用意していきます。
- 適当な横長のImageを用意します。名前はNodeとします。
- 左の方にアイコン（Image）、真ん中にテキスト（Text）)、右にチェックボックス(Toggle)を配置します。これらは全てNodeの子オブジェクトとして配置します.
- NodeオブジェクトにLayoutElementコンポーネントを追加します。
- LayoutElementのMinHeightにノードの高さ（Height)を指定します。
- 作ったノードはプレハブにします（ProjectビューへD&D）
次にスクロールビューを作ります。
- Canvas以下のパスにGameObjectを作ります（Create Empty Child等で）。
名前はScrollView。 - ScrollViewの範囲を、スクロールビューを表示したい範囲に設定します。
- ScrollViewにScrollRectとMaskとImageコンポーネントを追加します
- ScrollViewの子オブジェクトとして名前がContentのGameObjectを作ります。
- ContentのRectTransformはのPivotを(x:0.5, y:1)とします。
（リストビューの開始位置を一番上にしています。スタート時を下にしたい場合は(x:0.5, y:0））
- ContentにVerticalLayoutGroupとContentSizeFitterコンポーネントを追加し、ContentSizeFitterのVerticalFitをPreferred sizeに設定します。
- ScrollRectのContentにContentオブジェクトを指定します。
後はContentの下にNodeを沢山配置します。（範囲外のノードはマスクでカリングされます）
これでスクロールするビューが出来上がりました。
スクリプトからノードを生成する
次にノードをスクリプトから生成します。
- ContentオブジェクトにScrollControllerコンポーネントを追加します。コードは下
- prefabに先ほど作ったNodeプレハブを指定します。
今回の作り方はノードをスクリプトで作る前提で書いてるので、これで行けます。
動的なノードのサイズ変更とか、ノードサイズをテキストにフィットさせる方法とか、無限スクロールとかは要望があれば書きます。
関連
参考
unity4.6 beta / uGUI スクロール編 - petlust
【Unity】Unity 4.6 新機能「SetParent」 - コガネブログ
