[Starling+Feathersのリストの編集]

ページへ戻る

− Links

印刷

Starling+Feathersのリストの編集

詳細な入力項目を表示

ページタイトル( 空白で自動設定 ):
ページ並び順( 0-9 小数可標準:1 ):
ページ別名(複数は[改行]で区切る):

ページ内容:

FeathersのListはモバイルでよく使うUIの上に、他のコンポーネントの基礎ともなっているので、使えるようになっていると何かと便利。

まず、初期化は

var list:List = new List();
 list.width = WIDTH;
 list.height = HEIGHT;
 baseSprite.addChild(list);

となる。
データはListCollectionクラスを使って配列で与える。
たとえば、text_0からtext_49というリストを表示をさせたいなら、

var data:Array = [];
 for (var i:int = 0; i < 50; i++) 
 {
 	var obj:Object = new Object();
 	obj["text"] = "test_" + i;
 	data.push(obj);
 }
 var listCollection:ListCollection = new ListCollection(data);
 list.dataProvider = listCollection;
 list.itemRendererProperties.labelField = "text";

とする。
ここで、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;
 }
となる。

編集の要約:

Q & A 認証: ページ更新時は次の質問にお答えください。(プレビュー時は必要ありません)
Q: 「東京」の読みがな？(ひらがなで)
A:

お名前: タイムスタンプを変更しない

テキスト整形のルールを表示する^[1]

添付ファイル^[2]:

list01.png^[3] 78件 [詳細^[4]]

Links list

(This host) = https://njf.jp

^{(This host)}/cms/modules/xpwiki/?cmd=edit&help=true&page=Starling%2BFeathers%E3%81%AE%E3%83%AA%E3%82%B9%E3%83%88
^{(This host)}/cms/modules/xpwiki/?plugin=attach&pcmd=list&refer=Starling%2BFeathers%E3%81%AE%E3%83%AA%E3%82%B9%E3%83%88
^{(This host)}/cms/modules/xpwiki/gate.php/list01.png?way=attach&_noumb&refer=Starling%2BFeathers%E3%81%AE%E3%83%AA%E3%82%B9%E3%83%88&openfile=list01.png
^{(This host)}/cms/modules/xpwiki/?plugin=attach&pcmd=info&refer=Starling%2BFeathers%E3%81%AE%E3%83%AA%E3%82%B9%E3%83%88&file=list01.png

Starling+Feathersのリスト の編集 :: NJF Wiki

Starling+Feathersのリスト の編集

Links list

Starling+Feathersのリストの編集 :: NJF Wiki

Starling+Feathersのリストの編集