Back to page

− Links

 Print 

Starling+FeathersのButtonGroup :: NJF Wiki

xpwiki:Starling+FeathersのButtonGroup

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

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プロパティを使うとボタンの初期化を制御できる。たとえば1つだけボタンのデザインを変えたいときには、

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;

実行結果はこちら。

buttonGroup.png[2]

ソースはこちら。

fileButtonGroupTest.as[3]

StarlingWrapperEdit[4].STAGE_WIDTHとかは適当に書きかえてください。


Last-modified: 2016-03-01 (Tue) 06:27:53 (JST) (1729d) by njf