1: 2016-02-23 (火) 16:33:29 njf[6] [7] [8] | 2: 2016-02-23 (火) 17:04:39 njf[6] [9] [10] | ||
---|---|---|---|
Line 10: | Line 10: | ||
となる。 | となる。 | ||
データはListCollectionクラスを使って配列で与える。 | データはListCollectionクラスを使って配列で与える。 | ||
- | たとえば、text_0からtext_50というリストを表示をさせたいなら、 | + | たとえば、text_0からtext_49というリストを表示をさせたいなら、 |
var data:Array = []; | var data:Array = []; | ||
Line 24: | Line 24: | ||
とする。 | とする。 | ||
+ | ここで、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 ); | ||
+ | } | ||
+ | |||
+ | 実際に使うにはさらにスクロールバーの指定やリスト全体の背景の指定などが必要となるが、これでひとまず最低限表示され、機能するようになる。 |
(This host) = https://njf.jp