1: 2016-02-23 (火) 16:33:29 njf   |
現: 2016-02-24 (水) 14:47:14 njf |
| | となる。 | | となる。 |
| | データはListCollectionクラスを使って配列で与える。 | | データはListCollectionクラスを使って配列で与える。 |
| - | たとえば、text_0からtext_50というリストを表示をさせたいなら、 | + | たとえば、text_0からtext_49というリストを表示をさせたいなら、 |
| | | | |
| | var data:Array = []; | | var data:Array = []; |
| | | | |
| | とする。 | | とする。 |
| | + | ここで、dataという配列にtextというプロパティがあるオブジェクトを格納し、そのtextというプロパティがリストのラベルとなるようにlist.itemRendererProperties.labelFieldにtextという文字列を代入している。 |
| | + | itemRendererPropertiesにはlabelField以外にもアイコンを指定するための「iconSourceField」などが使える。 |
| | + | |
| | + | これでテキストの一覧が表示されるが、デフォルトの文字が小さい上に、リストの項目の背景が無いのでまだ使い物にはならない。これらを指定するにはリストのitemRendererFactoryプロパティを使う。 |
| | + | |
| | + | list.itemRendererFactory = function():IListItemRenderer { |
| | + | var renderer:DefaultListItemRenderer = new DefaultListItemRenderer(); |
| | + | 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 TextFieldTextRenderer(); |
| | + | tftr.textFormat = new TextFormat("_sans", 32); |
| | + | return tftr; |
| | + | }; |
| | + | return renderer; |
| | + | }; |
| | + | |
| | + | ここではDefaultListItemRendererでスキンの指定をし、さらにlabelFactoryでテキストの書式を指定している。 |
| | + | |
| | + | するとこんなふうに表示される。 |
| | + | |
| | + | &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_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; |
| | + | } |
| | + | となる。 |
下位
ページへ戻る
