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;
実行結果はこちら。
ソースはこちら。
ぺージ情報 | |
---|---|
ぺージ名 : | Starling+FeathersのButtonGroup |
ページ別名 : | 未設定 |
ページ作成 : | njf |
閲覧可 | |
グループ : | すべての訪問者 |
ユーザー : | すべての訪問者 |
編集可 | |
グループ : | すべての訪問者 |
ユーザー : | すべての訪問者 |
Counter: 2111,
today: 1,
yesterday: 0
初版日時: 2016-03-01 (火) 06:24:48
最終更新: 2016-03-01 (火) 06:27:53 (JST) (2940d) by njf