|
1: 2016-03-01 (火) 06:24:48 njf   |
| | + | 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; |
下位
ページへ戻る
