Question

我的应用程序中的UI使用了大量相同的按钮，减去了皮肤中使用的FXG图形。他们的皮肤看起来像这样

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:ai="http://ns.adobe.com/ai/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:flm="http://ns.adobe.com/flame/2008" xmlns:graphics="assets.graphics.*" xmlns:ATE="http://ns.adobe.com/ate/2009">
    <fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
    <s:states>
        <s:State name="up"/>
        <s:State name="over"/>
        <s:State name="down"/>
        <s:State name="disabled"/>
    </s:states>
    <graphics:RectangleGraphic bottom="0"/> 
    <graphics:ButtonTextGraphic alpha.disabled="0.45" x="22" y="6"/>
    <graphics:ButtonSymbolGraphic alpha.disabled="0.45" x="4" y="4">
        <graphics:filters>
            <s:GlowFilter includeIn="over, down" blurX="3" blurY="3" inner="false" color="#3F5F93" strength="2" alpha="1.0" quality="2" knockout="false"/>
            <s:GlowFilter includeIn="down" blurX="3" blurY="3" inner="false" color="0x5380d0" strength="2" alpha="1.0" quality="2" knockout="false"/>
        </graphics:filters>
    </graphics:ButtonSymbolGraphic>
    <graphics:SmallButtonLineSeparatorGraphic bottom="-0.5"/>
</s:Skin>

其中RectangleGraphic和SmallButtonLineSeparatorGraphic是在所有按钮上使用的FXG，而ButtonTextGraphic和ButtonSymbolGraphic是特定于每个按钮的FXG。我希望有一个模板皮肤，每个按钮特定的两个FXG，但我不知道如何做到最好。

Answer 1

你必须做一些ActionScript魔术才能让它发挥作用。可能会将RectangleGraphic和SmallButtonLineSeparatorGraphic保留为MXML中的原样。为ButtonTextGraphic和ButtonSymbolGraphic创建变量。我将演示如何使用ButtonTextGraphic样本。像这样：

public var buttonTextGraphicClass : Class;

还有类实例的变量：

public var buttonTextGraphic : Class;

在构造函数中，您可以设置类值。或者，如果您遇到了MXML，那么请使用preinitialize事件处理程序：

buttonTextGraphicClass = ButtonTextGraphic;

在createChildren中创建实例并添加它们：

protected function override createChildren():void{
 super.createChildren();
 buttonTextGraphic = new buttonTextGraphicClass()
 // set other properties
 addElement(buttonTextGraphicClass);
}

最后，在updateDisplayList（）大小和位置它们的元素，如下所示：

buttonTextGraphic.x = 22
buttonTextGraphic.y = 6
buttonTextGraphic.width = unscaledWidth // or some other value
buttonTextGraphic.height = unscaledHeight // or some value

这样你可以使用完全相同的皮肤;只需在运行时替换不断变化的FXG资产的类实例。

我建议您阅读Flex Component LifeCycle。如果您有Z-Order问题;您可能必须切换到在ActionScript中创建所有皮肤的子项;或者可能使用“addElementAt”方法。

要适应ActionScript代码中的不同状态，您必须覆盖set currentState方法以手动进行状态更改，例如更改发光或更改Alpha。

我在这里描述的几乎所有内容都是创建ActionScript外观的方法。您可以从查看一些现有的Flex 4.5 Mobile Skins中受益。我从Mobile ButtonSkin开始。我认为边境是FXG资产;这是使用与我在此描述的方法类似的方法实现的。

使用FXG图形的按钮皮肤模板？

1 个答案: