ページへ戻る

− Links

 印刷 

Starling+FeathersのScrollContainerを使う :: XOOPS Cube Site

xpwiki:Starling+FeathersのScrollContainerを使う

モバイルアプリでよくある、指でドラッグしてスクロールするUIはScrollContainer編集[1]を使う。

まずは初期化。

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編集[2]とminimumTrackFactory編集[3]は右側に表示されるスクロールバーを矩形で定義している。 実際には自前の画像などを設定することが多い。

あとは内容をつけるだけ。スクロールバーは内容のサイズに合わせて自動で表示してくれる。

container.addChild(yourImageOrSprite);

アイコンを並べたりするのも可能。

実際に使っているのがこちら。 http://njf.jp/?p=4238[4]


Last-modified: 2015-05-28 (木) 15:32:20 (JST) (1180d) by njf