読者です 読者をやめる 読者になる 読者になる

SliderのThumbが言うことを聞かない件

Flex2 AS3

FlexのSliderについているThumb(つまみ部分)はアメリカの方が作ったとは思えないぐらい小さく、現在作成中のアプリがターゲットとする年代の方には到底受け入れられない雰囲気であったので、Flexのスキニングというのを利用して、でかいつまみを作ることにした。


スキニングとは、コンポーネントの見た目を指定した画像やSWFに置き換えるというテクノロジーで、コンポーネントの振る舞いを変えずに、見た目だけを変更することが出来る。


ということで、大き目のつまみの画像(通常時、マウスオーバー時、マウスダウン時、使用不可時)を用意し、早速スキンを当ててみた。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" width="600" height="200">
  <mx:Style>
    HSlider{
        thumbUpSkin: Embed(source="/assets/sliderThumb.png");
        thumbOverSkin: Embed(source="/assets/sliderThumb_over.png");
        thumbDownSkin: Embed(source="/assets/sliderThumb_down.png");
        thumb-disabled-skin: Embed(source="/assets/sliderThumb_disable.png");    
    }
  </mx:Style>
  <mx:HSlider width="100%" height="100%"/>  
</mx:Application>


結果はこうなった。


何じゃこりゃ!ちっこいまんまかおい!


Sliderのソースを調べていくと、犯人と思しきソースに当たった。
mx.controls.sliderClasses.SliderThumbというクラスがSlider内部で使われており、こいつはButtonクラスを継承しており、つまみ部分の描画を担当している。
ここの中で、サイズを決めているmeasureメソッド

override protected function measure():void{
   super.measure();
   measuredWidth = 12;
   measuredHeight = 12;
}

となっていた。ま さ か の12ピクセル固定。

ということでこれを直すべくこんなコードを書いた。

package
{
   import mx.controls.sliderClasses.SliderThumb;
   import mx.core.mx_internal;
   use namespace mx_internal;
   
   public class FixedSliderThumb extends SliderThumb
   {
      override protected function measure():void
      {
         super.measure();
         measuredWidth = currentSkin.measuredWidth;
         measuredHeight = currentSkin.measuredHeight;
      }
   }
}

mx_internalの「currentSkin」という変数にスキンのデータが入っている様子だったので、ここからサイズを取得してセットした。
このクラスを、Sliderの「sliderThumbClass」変数にセット。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" width="600" height="200">
  <mx:Style>
    HSlider{
        thumbUpSkin: Embed(source="/assets/sliderThumb.png");
        thumbOverSkin: Embed(source="/assets/sliderThumb_over.png");
        thumbDownSkin: Embed(source="/assets/sliderThumb_down.png");
        thumb-disabled-skin: Embed(source="/assets/sliderThumb_disable.png");    
    }
  </mx:Style>
  <mx:HSlider width="100%" height="100%"  sliderThumbClass="FixedSliderThumb"/>  
</mx:Application>

結果↓



YES!
ソースはこちら