使用FXG圖形的按鈕外觀模板？

我的應用程序中的用戶界面使用了大量的按鈕，這些按鈕大部分都是減去他們皮膚中使用的FXG圖形。他們的皮膚看起來像這樣使用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是跨所有按鈕使用FXGs和ButtonTextGraphic和ButtonSymbolGraphic是FXGs特定於每個按鈕。我很想擁有一個模板皮膚，它爲每個按鈕提供了兩個特定的FXG，但我不確定如何做到最好。

來源

2011-06-04 fred august

你必須做一些ActionScript魔術才能使它工作。可能會保留MXML中的RectangleGraphic和SmallButtonLineSeparatorGraphic。爲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 ButtonSkin開始。我認爲邊界是FXG資產;這是用我在這裏描述的類似方法實現的。

來源

2011-06-04 17:05:58 JeffryHouser

絕妙的回答！謝謝。 – 2011-06-05 01:01:43

很高興幫助！ – JeffryHouser 2011-06-05 02:03:19

使用FXG圖形的按鈕外觀模板？

回答

相關問題