Starling+Feathersのリスト をテンプレートにして作成 :: NJF Wiki

開始行:
FeathersのListはモバイルでよく使うUIの上に、他のコンポー... まず、初期化は var list:List = new List(); list.width = WIDTH; list.height = HEIGHT; baseSprite.addChild(list); となる。 データはListCollectionクラスを使って配列で与える。 たとえば、text_0からtext_49というリストを表示をさせたいな... var data:Array = []; for (var i:int = 0; i < 50; i++) { var obj:Object = new Object(); obj["text"] = "test_" + i; data.push(obj); } var listCollection:ListCollection = new ListCollection(d... list.dataProvider = listCollection; list.itemRendererProperties.labelField = "text"; とする。 ここで、dataという配列にtextというプロパティがあるオブジ... itemRendererPropertiesにはlabelField以外にもアイコンを指... これでテキストの一覧が表示されるが、デフォルトの文字が小... list.itemRendererFactory = function():IListItemRenderer { var renderer:DefaultListItemRenderer = new DefaultListI... renderer.defaultSkin = new Quad(10, 100, 0xff0000); renderer.hoverSkin = new Quad(10, 100, 0x00ff00); renderer.downSkin = new Quad(10, 100, 0x0000ff); renderer.upSkin = new Quad(10, 100, 0x00ffff); renderer.labelFactory = function():ITextRenderer { var tftr:TextFieldTextRenderer = new TextFieldTextRend... tftr.textFormat = new TextFormat("_sans", 32); return tftr; }; return renderer; }; ここではDefaultListItemRendererでスキンの指定をし、さらに... するとこんなふうに表示される。 &ref(list01.png,mw:480,mh:360); 実際にはスキンにはQuadより9スライスイメージなどを使った方... さらに、どこが選択されたかを検知するにはCHANGEイベントを... list.addEventListener(Event.CHANGE, onChangeHandler); private function onChangeHandler(e:Event):void{ var list:List = List( e.currentTarget ); trace( "selectedIndex:", list.selectedIndex ); } これでひとまず最低限表示され、機能するようになる。 背景の指定は list.backgroundSkin = new Quad(10, 10, 0); 背景はリストが短いと表示される。 スクロールバーを指定するのは list.verticalScrollBarFactory = function():ScrollBar { var scrollBar:ScrollBar = new ScrollBar(); scrollBar.direction = ScrollBar.DIRECTION_VERTICAL; scrollBar.trackLayoutMode = ScrollBar.TRACK_LAYOUT_MODE... 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; } となる。

終了行:
FeathersのListはモバイルでよく使うUIの上に、他のコンポー... まず、初期化は var list:List = new List(); list.width = WIDTH; list.height = HEIGHT; baseSprite.addChild(list); となる。 データはListCollectionクラスを使って配列で与える。 たとえば、text_0からtext_49というリストを表示をさせたいな... var data:Array = []; for (var i:int = 0; i < 50; i++) { var obj:Object = new Object(); obj["text"] = "test_" + i; data.push(obj); } var listCollection:ListCollection = new ListCollection(d... list.dataProvider = listCollection; list.itemRendererProperties.labelField = "text"; とする。 ここで、dataという配列にtextというプロパティがあるオブジ... itemRendererPropertiesにはlabelField以外にもアイコンを指... これでテキストの一覧が表示されるが、デフォルトの文字が小... list.itemRendererFactory = function():IListItemRenderer { var renderer:DefaultListItemRenderer = new DefaultListI... renderer.defaultSkin = new Quad(10, 100, 0xff0000); renderer.hoverSkin = new Quad(10, 100, 0x00ff00); renderer.downSkin = new Quad(10, 100, 0x0000ff); renderer.upSkin = new Quad(10, 100, 0x00ffff); renderer.labelFactory = function():ITextRenderer { var tftr:TextFieldTextRenderer = new TextFieldTextRend... tftr.textFormat = new TextFormat("_sans", 32); return tftr; }; return renderer; }; ここではDefaultListItemRendererでスキンの指定をし、さらに... するとこんなふうに表示される。 &ref(list01.png,mw:480,mh:360); 実際にはスキンにはQuadより9スライスイメージなどを使った方... さらに、どこが選択されたかを検知するにはCHANGEイベントを... list.addEventListener(Event.CHANGE, onChangeHandler); private function onChangeHandler(e:Event):void{ var list:List = List( e.currentTarget ); trace( "selectedIndex:", list.selectedIndex ); } これでひとまず最低限表示され、機能するようになる。 背景の指定は list.backgroundSkin = new Quad(10, 10, 0); 背景はリストが短いと表示される。 スクロールバーを指定するのは list.verticalScrollBarFactory = function():ScrollBar { var scrollBar:ScrollBar = new ScrollBar(); scrollBar.direction = ScrollBar.DIRECTION_VERTICAL; scrollBar.trackLayoutMode = ScrollBar.TRACK_LAYOUT_MODE... 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; } となる。

ページ名: