Ad

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プロパティを使うとボタンの初期化を制御できる。たとえば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

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


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード印刷に適した表示   ページ新規作成 全ページ一覧 単語検索 最新ページの一覧   ヘルプ   最新ページのRSS 1.0 最新ページのRSS 2.0 最新ページのRSS Atom Powered by xpWiki
Counter: 702, today: 2, yesterday: 0
初版日時: 2016-03-01 (火) 06:24:48
最終更新: 2016-03-01 (火) 06:27:53 (JST) (1018d) by njf
広告

ログイン

ユーザー名:


パスワード:





パスワード紛失


NJF