1

私のアプリの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です。各ボタンに固有の2つのFXGが供給される単一のテンプレートスキンが欲しいのですが、それを行う最善の方法がわかりません。

4

1 に答える 1

2

それを機能させるには、ActionScriptの魔法を実行する必要があります。おそらく、RectangleGraphicとSmallButtonLineSeparatorGraphicはMXMLのままにしておきます。ButtonTextGraphicおよびButtonSymbolGraphicの変数を作成します。ButtonTextGraphicのサンプルを使用してデモンストレーションします。このようなもの：

public var buttonTextGraphicClass : Class;

クラスインスタンスの変数もあります。

public var buttonTextGraphic : Class;

コンストラクターでは、クラス値を設定できます。または、MXMLでスタックしている場合は、事前初期化イベントハンドラーを使用します。

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コンポーネントのライフサイクルを読むことをお勧めします。Zオーダーの問題がある場合。スキンのすべての子をActionScriptで作成するように切り替える必要がある場合があります。または、「addElementAt」メソッドを使用することもできます。

ActionScriptコードのさまざまな状態に対応するには、set currentStateメソッドをオーバーライドして、グローの変更やアルファの変更など、状態を手動で変更する必要があります。

ここで説明するほとんどすべては、ActionScriptスキンを作成するためのアプローチです。既存のFlex4.5モバイルスキンのいくつかを確認することでメリットが得られる場合があります。まず、モバイルボタンスキンから始めます。国境はFXGアセットだと思います。これは、ここで説明するのと同様のアプローチを使用して実装されます。

于 2011-06-04T17:05:58.423 に答える