モバイルアプリでよくある、指でドラッグしてスクロールするUIはScrollContainerを使う。
まずは初期化。
var container:ScrollContainer = new ScrollContainer();
container.width = 300;
container.height = 200;
container.scrollBarDisplayMode = Scroller.SCROLL_BAR_DISPLAY_MODE_FIXED;
container.verticalScrollPolicy = Scroller.SCROLL_POLICY_ON;
container.verticalScrollBarFactory = function():ScrollBar
{
var scrollBar:ScrollBar = new ScrollBar();
scrollBar.direction = ScrollBar.DIRECTION_VERTICAL;
scrollBar.trackLayoutMode = ScrollBar.TRACK_LAYOUT_MODE_SINGLE;
scrollBar.thumbFactory = function ():Button
{
var button:Button = new Button();
button.defaultSkin = new Quad(2, 50, 0x000000);
return button;
}
scrollBar.minimumTrackFactory = function ():Button
{
var button:Button = new Button();
button.defaultSkin = new Quad(2, 20, 0x999999);
return button;
}
return scrollBar;
}
addChild(container);
ここでverticalScrollBarFactoryとminimumTrackFactoryは右側に表示されるスクロールバーを矩形で定義している。
実際には自前の画像などを設定することが多い。
あとは内容をつけるだけ。スクロールバーは内容のサイズに合わせて自動で表示してくれる。
container.addChild(yourImageOrSprite);
アイコンを並べたりするのも可能。
実際に使っているのがこちら。
http://njf.jp/?p=4238
- Starling+FeathersのScrollContainerを使う のバックアップソース(No. All)
- 現: 2015-05-28 (木) 23:32:20 njf