Search
Ad
|
新規
下位
一覧
検索
最新
ヘルプ
ページへ戻る
編集
複製
履歴
添付
印刷
Starling+Feathersのリスト
をテンプレートにして作成
xpwiki
:Starling+Feathersのリスト をテンプレートにして作成
開始行:
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(d...
list.dataProvider = listCollection;
list.itemRendererProperties.labelField = "text";
とする。
ここで、dataという配列にtextというプロパティがあるオブジ...
itemRendererPropertiesにはlabelField以外にもアイコンを指...
これでテキストの一覧が表示されるが、デフォルトの文字が小...
list.itemRendererFactory = function():IListItemRenderer {
var renderer:DefaultListItemRenderer = new DefaultListI...
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 TextFieldTextRend...
tftr.textFormat = new TextFormat("_sans", 32);
return tftr;
};
return renderer;
};
ここではDefaultListItemRendererでスキンの指定をし、さらに...
するとこんなふうに表示される。
&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...
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;
}
となる。
終了行:
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(d...
list.dataProvider = listCollection;
list.itemRendererProperties.labelField = "text";
とする。
ここで、dataという配列にtextというプロパティがあるオブジ...
itemRendererPropertiesにはlabelField以外にもアイコンを指...
これでテキストの一覧が表示されるが、デフォルトの文字が小...
list.itemRendererFactory = function():IListItemRenderer {
var renderer:DefaultListItemRenderer = new DefaultListI...
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 TextFieldTextRend...
tftr.textFormat = new TextFormat("_sans", 32);
return tftr;
};
return renderer;
};
ここではDefaultListItemRendererでスキンの指定をし、さらに...
するとこんなふうに表示される。
&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...
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;
}
となる。
ページ名:
ぺージ情報
ぺージ名 :
Starling+Feathersのリスト
ページ別名 :
未設定
ページ作成 :
njf
閲覧可
グループ :
すべての訪問者
ユーザー :
すべての訪問者
編集可
グループ :
すべての訪問者
ユーザー :
すべての訪問者
Counter: 0, today: 0, yesterday: 0
MenuBar
20
最新の0件
広告
ログイン
ユーザー名:
パスワード:
パスワード紛失
新規
下位
一覧
検索
最新
ヘルプ
ページへ戻る
編集
複製
履歴
添付
印刷
