Feathers Example ボタンスキンの変更

このサンプルはFeathersのサイト
「Extending Feathers Themes(リンク先へ)」
を参考にしています。

スキンの状態を赤青緑の矩形に変更してみます。

スキン用の矩形

FeathersThemeライブラリプロジェクトにスキン用の矩形と
カスタムテーマExtendMetalWorksThemeを追加します。

ExtendMetalWorksTheme.as

package feathers.themes
{
 import feathers.controls.Button;
 import feathers.themes.MetalWorksMobileTheme;

 import starling.display.DisplayObjectContainer;
 import starling.display.Image;
 import starling.textures.Texture;

 public class ExtendMetalWorksTheme extends MetalWorksMobileTheme
 {
  public static const ALTERNATE_NAME_MY_CUSTOM_BUTTON:String = "my-custom-button";

  [Embed(source="./assets/buttons/blue.png")]
  public var blueClass:Class;        

  [Embed(source="./assets/buttons/green.png")]
  public var greenClass:Class;        

  [Embed(source="./assets/buttons/red.png")]
  public var redClass:Class;        

  public function ExtendMetalWorksTheme(root:DisplayObjectContainer, scaleToDPI:Boolean=true)
  {
   super(root, scaleToDPI);
  }

  override protected function initialize():void
  {
   super.initialize();
   this.setInitializerForClass(Button, myCustomButtonInitializer, ALTERNATE_NAME_MY_CUSTOM_BUTTON);
  }        

  private function myCustomButtonInitializer(button:Button):void
  {
   button.defaultSkin = new Image( Texture.fromBitmap(new blueClass()) );
   button.downSkin = new Image( Texture.fromBitmap(new greenClass()) );
   button.hoverSkin = new Image( Texture.fromBitmap(new redClass()) );

   button.defaultLabelProperties.textFormat = this.smallUILightTextFormat;
   button.disabledLabelProperties.textFormat = this.smallUIDisabledTextFormat;
   button.selectedDisabledLabelProperties.textFormat = this.smallUIDisabledTextFormat;
  }
 }
}

FeathersThemeライブラリプロジェクトをビルドします。

FeathersExampleプロジェクトのButtonExample.as内でカスタムテーマの変更をします。
ButtonExample.as

protected var theme:ExtendMetalWorksTheme;

   themeIndex = 2;
   switch(themeIndex)
   {
    case 0:
     //this.theme = new MetalWorksMobileTheme(this.stage);
     break;
    case 1:
     //this.theme = new AeonDesktopTheme(this.stage);
     break;
    case 2:
     this.theme = new ExtendMetalWorksTheme(this.stage);
     break;
   }

Feathers Example Buttonについて

Buttonサンプルについて
このサンプルはFeathersのサイト
「How to use the Feathers Button component(リンク先へ)」
を参考にしています。
FeathersExampleのソースコード(リンク先へ)

FeathersExampleを実行すると以下の画面になります。

テーマの設定
Buttonの処理を行う前にテーマを設定します。
このサンプルでは、FeathersThemeライブラリ(リンク先へ) を利用しています。
ButtonExample.as

    case 0:
     this.theme = new MetalWorksMobileTheme(this.stage);
     break;

テーマはMetalWorksMobileThemeを使用します。

テーマの変更
MetalWorksMobileThemeからAeonDesktopThemeに切り替えてみます。

ButtonExample.as

protected var theme:AeonDesktopTheme;

   themeIndex = 1;
   switch(themeIndex)
   {
    case 0:
     //this.theme = new MetalWorksMobileTheme(this.stage);
     break;
    case 1:
     this.theme = new AeonDesktopTheme(this.stage);
     break;

Buttonの表示と操作の流れ

ButtonExample.as

   this.button = new Button();
   this.button.label = "クリック";
   this.button.nameList.add(ExtendMetalWorksTheme.ALTERNATE_NAME_MY_CUSTOM_BUTTON);
   this.button.defaultIcon = new Image(Texture.fromBitmapData(icon.bitmapData));
   this.button.iconPosition = Button.ICON_POSITION_TOP;
   this.button.gap = 0;
   this.button.horizontalAlign = Button.HORIZONTAL_ALIGN_LEFT;
   this.button.verticalAlign = Button.VERTICAL_ALIGN_MIDDLE;
   this.button.width = 200;
   this.button.height = 80;

   this.button.labelOffsetX = this.button.iconOffsetX + icon.width;
   this.button.labelOffsetY = -(this.button.height/2);

   this.button.addEventListener(Event.TRIGGERED, button_triggeredHandler);
   this.button.addEventListener(Event.CHANGE, button_changeHandler);
   this.addChild(this.button);

• インスタンスの作成
• labelプロパティの設定
• レイアウト、大きさの設定
• タッチイベントの設定
• 画面に対してaddChildを行う

タッチイベントハンドラーの作成 ButtonExample.as

  protected function button_triggeredHandler(event:Event):void
  {
   const label:Label = new Label();
   label.text = "Hi, I'm Feathers!\nHave a nice day.";
   Callout.show(label, this.button);
  }

labelOffsetについて

labelOffsetを利用しない場合は以下のような表示になります。

アイコンとラベルを水平に表示させる為、labelOffsetで調整をしています。

ButtonExample.as

   this.button.labelOffsetX = this.button.iconOffsetX + icon.width;
   this.button.labelOffsetY = -(this.button.height/2);