[Starling+FeathersのButtonGroup の編集]

印刷

Starling+FeathersのButtonGroup の編集

詳細な入力項目を表示

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

ページ内容:

UIの作成では、同様の機能を持ったボタンを並べる事が多い。
そんなときに役立つのがButtonGroup。名前の通りボタンをグループ化してくれる。

var group:ButtonGroup = new ButtonGroup();
 baseSp.addChild(group);
 
 group.dataProvider = new ListCollection(
 	[
 		{ label: "One",id:1},
 		{ label: "Two",id:2},
 		{ label: "Three",id:3}
 	]);

これで一つずつボタンを初期化しなくてもラベルがついたボタンを作成してくれる。

イベントの取得もグループ単位でできるのでとても便利。

group.addEventListener(Event.TRIGGERED, triggeredHandler);

ここで、

function triggeredHandler( event:Event):void
 {
 	trace( "button triggered:",event.data.id);
 }

dataプロパティを使うと、dataProviderの該当データが取得できる。

ボタンのデザインを変えるには、buttonFactoryプロパティを使う。

group.buttonFactory = function():Button
 {
 	var button:Button = new Button();
 	button.defaultSkin = new Quad(StarlingWrapper.STAGE_WIDTH,40,0xaaffaa);
 	button.downSkin = new Quad(StarlingWrapper.STAGE_WIDTH, 40, 0xffaaaa);
 	button.labelFactory = function():ITextRenderer {
 		var labelRenderer:TextFieldTextRenderer=new TextFieldTextRenderer();
 		labelRenderer.textFormat = new TextFormat(null, 32,0x0E0E0E);
 		return labelRenderer;
 	}
 	return button;
 };

buttonInitializerプロパティを使うとボタンの初期化を制御できる。たとえば１つだけボタンのデザインを変えたいときには、

group.buttonInitializer = function( button:Button, item:Object ):void
 {
 	if (item.id == 1) {
 		button.defaultIcon = new Quad(10, 10, 0xff0000);
 	}
 	button.label = item.label;
 };

とする。

レイアウトの調整もできる。

group.direction = ButtonGroup.DIRECTION_VERTICAL;
 group.gap = 5;
 group.lastGap = 20;

実行結果はこちら。

&ref(buttonGroup.png,mw:480,mh:360);

ソースはこちら。

&ref(ButtonGroupTest.as);

StarlingWrapper.STAGE_WIDTHとかは適当に書きかえてください。

編集の要約:

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

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

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

添付ファイル^[2]:

ButtonGroupTest.as^[3] 602件 [詳細^[4]]

buttonGroup.png^[5] 74件 [詳細^[6]]

Links list

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

^{(This host)}/cms/modules/xpwiki/?cmd=edit&help=true&page=Starling%2BFeathers%E3%81%AEButtonGroup
^{(This host)}/cms/modules/xpwiki/?plugin=attach&pcmd=list&refer=Starling%2BFeathers%E3%81%AEButtonGroup
^{(This host)}/cms/modules/xpwiki/gate.php/ButtonGroupTest.as?way=attach&_noumb&refer=Starling%2BFeathers%E3%81%AEButtonGroup&openfile=ButtonGroupTest.as
^{(This host)}/cms/modules/xpwiki/?plugin=attach&pcmd=info&refer=Starling%2BFeathers%E3%81%AEButtonGroup&file=ButtonGroupTest.as
^{(This host)}/cms/modules/xpwiki/gate.php/buttonGroup.png?way=attach&_noumb&refer=Starling%2BFeathers%E3%81%AEButtonGroup&openfile=buttonGroup.png
^{(This host)}/cms/modules/xpwiki/?plugin=attach&pcmd=info&refer=Starling%2BFeathers%E3%81%AEButtonGroup&file=buttonGroup.png

Starling+FeathersのButtonGroup の編集 :: NJF Wiki

Starling+FeathersのButtonGroup の編集

Links list