現: 2015-05-29 (金) 00:32:20 njf[3] [4] [5] | |||
---|---|---|---|
Line 1: | Line 1: | ||
+ | モバイルアプリでよくある、指でドラッグしてスクロールする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 |
(This host) = https://njf.jp