【Unity】NGUIでiPhoneでよくみる時間設定ドラムロールっぽいものを作る

TimeScroll.jpg

こういった上下スクロールさせ無限ループできるやつを作ります

使用するNGUIのコンポーネントは
「UIScrollView」「UICenterOnChild」「UIWrapContent」です
TimeHierarchy.jpg


ScrollViewをメニューからNGUI→Create→ScrollViewから作成
ScrollViewの子にEmptyGameObjectを配置して
メニューからComponent→NGUI→Interaction→CenterScrollViewOnChild
Component→NGUI→Interaction→WrapContentの2つを追加

TimeInspector.jpg

UICenterOnChildのSpringStrengthを調整すると
スクロールしたときにふんわり止まるかシャキっと止まるかを指定できます
ちょっと慣性がきいたような表現は8~10あたりがちょうどよかった印象です

UIWrapContentのItemHeightの数値は
スクロールアイテムオブジェクトの高さサイズを指定しておくとベターですね

では、スクロールアイテムを作りましょう

TimeInspector2.jpg

数値を入力するのでUILabelを作ります
ScrollViewのドラッグイベントでスクロールしてくれるようにColiderを登録しましょう
メニューからNGUI→Attach→Coliderで登録します
さらにメニューからComponent→NGUI→Interaction→DragScrollViewを追加します

Prefabにしてスクリプトから生成して配置するもよし、
さっき作ったEmptyGameObjectの子として配置するもよし

スクリプトで配置したあと
ただしい並びになるようにソート処理をして再配置をします

UIWrapContent hourWrap = _EmptyGameObject.GetComponent<UIWrapContent>();
for(int h = 0; h < 24; h++){
GameObject hourItem = NGUITools.AddChild(_EmptyGameObject, _hourItemPrefab);
UILabel label = hourItem.GetComponent<UILabel>();
label.text = hourItem.name = h.ToString("D2");
}
hourWrap.SortAlphabetically();
hourWrap.WrapContent();

h.ToString("D2");をつかって
0埋め命名をすることでSortAlphabeticallyを実行すると0時~23時の順で並ぶようになります。
そしてWrapContentをコールすると0の上に23が配置されたようになります

UICenterOnChild hourCenterOnChild = _EmptyGameObject.GetComponent<UICenterOnChild >();
hourCenterOnChild .onCenter = OnHourItemCenter;

とコールバックを登録し

public void OnHourItemCenter(GameObject go){
_hour = go.GetComponent<UILabel>().text;
}

とすればテキストを取得できます

この記事へのコメント


この記事へのトラックバック