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 ); |
| + | } |
| + | |
| + | 実際に使うにはさらにスクロールバーの指定やリスト全体の背景の指定などが必要となるが、これでひとまず最低限表示され、機能するようになる。 |