Question

我刚刚开始玩皮肤，我发现它比其他任何我在 Flex 4 Mobile 中遇到的更难。它需要在动作脚本中完成，因为我试图为弹性移动按钮设置外观。这是我到目前为止:(它做的很少，只改变背景颜色）

package skins {   
     import flash.display.GradientType;
     import flash.geom.Matrix;
     import mx.utils.ColorUtil;
     import spark.components.supportClasses.StyleableTextField;
     import spark.skins.mobile.ButtonSkin;
     import spark.skins.mobile.supportClasses.MobileSkin;

public class CustomButtonSkin extends ButtonSkin {

    public function CustomButtonSkin() {
        super();
        layoutPaddingLeft = 10;
        layoutPaddingRight = 10;
        layoutPaddingTop = 2;
        layoutPaddingBottom = 2;
        layoutCornerEllipseSize = 1;
    }

    private static var colorMatrix:Matrix = new Matrix();
    private static const CHROME_COLOR_ALPHAS:Array = [1, 1];
    private static const CHROME_COLOR_RATIOS:Array = [0, 127.5];        

    override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void {
        super.drawBackground(unscaledWidth, unscaledHeight);        

        var chromeColor:uint = getStyle("chromeColor");

        if (currentState == "up") {
        graphics.beginFill(0x1C1C1C);
        }           
        else{
        var colors:Array = [];
        colorMatrix.createGradientBox(unscaledWidth, unscaledHeight,                        Math.PI / 2, 0, 0);
        colors[0] = 0xFFFFFF;//ColorUtil.adjustBrightness2(chromeColor, 70);
        colors[1] = 0xEEEEEE;//chromeColor;    
        graphics.beginGradientFill(GradientType.RADIAL, colors, CHROME_COLOR_ALPHAS, CHROME_COLOR_RATIOS, colorMatrix);          
        graphics.endFill();
        }
    }

   }
}

纯粹在动作脚本中为Flex移动组件设置外观的文档似乎并不多。我们如何添加边框？如果有人可以发布他们的自定义flex移动皮肤，将非常感谢！

Answer 1

特别是要绘制边框，我会使用图形API手动绘制一个边框。

this.graphics.lineStyle(1, color, alpha, true); 
this.graphics.drawRect(0, 0, width, height);

我有一些博客文章/播客有关构建可能对您有所帮助的移动设备皮肤/ itemRenderers：

Answer 2

ButtonSkin具有upBorderSkin和downBorderSkin属性，您可以在构造函数中将其设置为等于fxg图形资源：

public function CustomButtonSkin()
{
     super();
     // your padding settings here

     upBorderSkin = path.to.fxg.resource.upBorder;
     downBorderSkin = path.to.fxg.resource.downBorder;
}

你会用空体覆盖drawBackground，甚至不是super.drawBackground（）：

override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
{

}

这样您的自定义皮肤就不会绘制默认背景。

您甚至不必检测状态更改以绘制不同的内容。通过指定边框外观属性，您可以让ButtonSkin父类检测状态更改并绘制相应的图形。

有关详细信息，请参阅http://www.adobe.com/devnet/flex/articles/mobile-skinning-part1.html，尤其是使用fxg资源。

actionscript中的蒙皮按钮 - 添加边框

2 个答案: