ハルシオンシステムの気ままBlog

こんにちは！月曜の坂内です。
さて、先週土曜日に髪の毛ピンクに染めました。ごめんなさい。

と、いうわけで、前回書いたNGUIによる画面のスクロール第2弾でございます。
今回はスクロールビューの中でアイテムを整理する方法と、スクロールバーの追加
をしていきたいと思います。

【アイテムの整理】
いくつかのアイテムをスクロールビュー内で並べたい場合には、
ScrollViewに「UIGrid」または「UITable」をつけます。
一列に並べる場合はGrid、行列で並べる場合はTableって考えてますが、
どうなんでしょ？？

そして、今回は縦にスクロールしようと思うので、UIScroll Viewの「Movement」をVertical
に変更。それと、UIGridのArrangementもVerticalに変更します。
UIGridの「Cell Height」はアイテムの大きさ＋隙間分αにしておきます。
SpriteのDimensionsのYが100（高さ100）のため、Cell Heightは102くらいにしておきます。

で、Gridを付けたらアイテム（今回はSprite）をコピーしまくります。



はい！そして実行！！



どうです？UIGridがいい具合に並べてくれます！
そしてスクロールもばっちし！
ちょー簡単！

【スクロールバー】
さてさて、スクロールバーをつけてみましょう。
上の続きです。
とりあえずスクロールバーに見た目をつけるために、1ドットの白と黒のpngを用意し、
Atlasにいれておきました。

んで、写真の手順でスクロールバーを作成します。
[NGUI]→[Open]→[Widget Wizard(Legacy)]→TemplateにScroll Barを設定し、
Background、Foregroundに先ほどの白と黒を設定。

Directionは上から下にバーを移動させたいのでTopToBottomを設定しました。




出来上がるのはこんなもの・・・・

ここから大きさ等を調整します。
あ、スクロールバーはスクロールビューの外の階層に作っておきます。

とりあえずこんな感じ？
そしたら、スクロールビューの「UIScroll View」にあるScrollBarの箇所に
今作ったスクロールバーを登録します。
今回は縦スクロールさせたいので、Verticalのところに登録します。





これだけ！これだけでスクロールビューとスクロールバーが連動します！
NGUIすごいっ！

ってことで、ネタ切れました。
皆様の役に立てるネタまた探さないと。。。

では！

Category: 開発日記（Unity）