モバイルアプリでよくある、指でドラッグしてスクロールするUIはScrollContainerを使う。 [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) (3248d) by njf

Links list

(This host) = https://njf.jp

^{(This host)}/cms/modules/xpwiki/?cmd=edit&page=ScrollContainer&refer=Starling%2BFeathers%E3%81%AEScrollContainer%E3%82%92%E4%BD%BF%E3%81%86
^{(This host)}/cms/modules/xpwiki/?cmd=edit&page=ScrollBarFactory&refer=Starling%2BFeathers%E3%81%AEScrollContainer%E3%82%92%E4%BD%BF%E3%81%86
^{(This host)}/cms/modules/xpwiki/?cmd=edit&page=TrackFactory&refer=Starling%2BFeathers%E3%81%AEScrollContainer%E3%82%92%E4%BD%BF%E3%81%86
http://njf.jp/?p=4238

Starling+FeathersのScrollContainerを使う :: NJF Wiki

Links list