モバイルアプリでよくある、指でドラッグしてスクロールする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を使う |
ページ別名 : | 未設定 |
ページ作成 : | njf |
閲覧可 | |
グループ : | すべての訪問者 |
ユーザー : | すべての訪問者 |
編集可 | |
グループ : | すべての訪問者 |
ユーザー : | すべての訪問者 |
Counter: 2198,
today: 2,
yesterday: 0
初版日時: 2015-05-28 (木) 15:32:20
最終更新: 2015-05-28 (木) 15:32:20 (JST) (3217d) by njf