Ad

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

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

ソースはこちら。

fileButtonGroupTest.as

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


Front page   Edit Freeze Diff Backup Upload Copy Rename ReloadPrint View   New Page Page list Search Recent changes   Help   RSS of recent changes (RSS 1.0) RSS of recent changes (RSS 2.0) RSS of recent changes (RSS Atom) Powered by xpWiki
Counter: 876, today: 1, yesterday: 0
Princeps date: 2016-03-01 (Tue) 06:24:48
Last-modified: 2016-03-01 (Tue) 06:27:53 (JST) (1265d) by njf
広告

ログイン

ユーザー名:


パスワード:





パスワード紛失


NJF