1: 2016-02-23 (火) 16:33:29 njf   |
2: 2016-02-23 (火) 17:04:39 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 ); |
| | + | } |
| | + | |
| | + | 実際に使うにはさらにスクロールバーの指定やリスト全体の背景の指定などが必要となるが、これでひとまず最低限表示され、機能するようになる。 |
下位
ページへ戻る
