モバイルアプリでよくある、指でドラッグしてスクロールする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
Page Info | |
---|---|
Page Name : | Starling+FeathersのScrollContainerを使う |
Page aliases : | None |
Page owner : | njf |
Can Read | |
Groups : | All visitors |
Users : | All visitors |
Can Edit | |
Groups : | All visitors |
Users : | All visitors |
Counter: 1770,
today: 1,
yesterday: 0
Princeps date: 2015-05-28 (Thu) 15:32:20
Last-modified: 2015-05-28 (Thu) 15:32:20 (JST) (2639d) by njf