|
現: 2015-05-28 (木) 23:32:20 njf   |
| | + | モバイルアプリでよくある、指でドラッグしてスクロールする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
Counter: 2225,
today: 2,
yesterday: 1
下位
ページへ戻る
