1: 2016-02-23 (火) 16:33:29 njf[5] [6] [7] | 現: 2016-02-24 (水) 14:47:14 njf[5] [8] [9] | ||
---|---|---|---|
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 ); | ||
+ | } | ||
+ | |||
+ | これでひとまず最低限表示され、機能するようになる。 | ||
+ | |||
+ | 背景の指定は | ||
+ | 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; | ||
+ | } | ||
+ | となる。 |
(This host) = https://njf.jp