今回エンジニアブログを担当します乾です。
よろしくお願いします!!
前回はNGUIを使用しScrollViewを制作しました。
今回Unityのバージョンを更新したのでuGUIを使ってScrollViewを作っていこうと思います。
1「スクロールビューの準備」
Canvasを作成します。
次に先ほど制作したCanvasの子としてGameObjectを作り、名前は「ScrollView」とします。
ScrollViewの大きさを設定し、MaskとImageとScrollRectを追加します。
ScrollViewの子としてGameObjectを作ります、名前は「Content」とでもしておいてください。
今回は縦スクロールのビューを作るので、ContentのRectTransformのPivotを(x:0.5, y:1)に設定し、リストの開始位置を先頭にします。
ContentにVerticalLayoutGroupとContentSizeFitterを追加し、ContentSizeFitterのVerticalFitをPreferred sizeに設定します。
ScrollViewのScrollRectのContentに先ほど作成したContentを設定します。
2「アイテムの用意」
ScrollView内に入れるアイテムを用意してください、今回私はImageの階層下にTextとButtonを持つPrefabを用意しました。
次に用意したアイテムにLayoutElementを追加し、MinHeightにアイテムの高さ（Height)を指定します。
3「スクロールバーの作成」
Canvasの子としてScrollbarを作成します。
uGUIはHierarchyの順番で描画順を管理しているので、ScrollViewより
上に配置してしまうと位置によってはScrollbarが隠れてしまうので注意してください。
DirectionをLeft to RightからBottom to Topに変更します。
ScrollViewのScrollRectのVerticalScrollbarに先ほど作成したScrollbarを設定します。
4「動的にアイテムの追加」
下記のScriptをButtonに設定します。
public class SpawnItem : MonoBehaviour { public RectTransform prefab; public RectTransform content; public void OnTap() { // Itemを生成 var item = GameObject.Instantiate(prefab) as RectTransform; // Contentの子として登録 item.SetParent(content, false); } }
完成!!
一通り作ってみました〜
NGUIと比べItemの動的追加が非常に楽に感じます。
また、Buttonの関数を指定する箇所も見やすいです。
個人的にはNGUIにある、座標やスケールの値を初期化するボタンが欲しいです!!
今回ざっくり触ってみて、さらに興味がわいたので今後はもっと踏み込んでみようと思います。