0

ここで本当に助けはほとんど必要ありません...おそらくいくつかのウォークスルーか、それをどのように行うかについての光を当てます..ナビゲーションコンテンツとアクションコンテンツの間のセグメント化された境界線を削除する方法がわからないということだけで、純粋なアクションスクリプトでActionBarをスキニングしていますと titleDisplay..多分いくつかのビジュアルが詳細を説明します..誰かがこれで私を助けてくれることを願っています..高度な

ActionBar セグメントの境界線を削除

そして、ここに私のアクションスクリプトコードの試みがあります

package skins{

import mx.core.DPIClassification;
import spark.skins.mobile.ActionBarSkin;


public class ActionBarCusSkin extends ActionBarSkin{




    public function ActionBarCusSkin(){
        super();


        borderClass = null;

    }

    override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void {
        var chromeColor:uint = getStyle("chromeColor");

        var backgroundAlphaValue:Number = getStyle("backgroundAlpha");



        // border size is twice as big on 320

        var borderSize:int = 1;

        if (applicationDPI == DPIClassification.DPI_320)

            borderSize = 2;



        graphics.beginFill(chromeColor, backgroundAlphaValue);

        graphics.drawRect(0, borderSize, unscaledWidth, unscaledHeight - (borderSize * 2));

        graphics.endFill();
    }



}

}

4

1 に答える 1

1

Actionbar から削除する境界線は、actionGroup(actionContent) または navigationGroup(navigationContent) 内に表示される Button に属します。これは、upBorderSkin と downBorderSkin の 2 つのスキンによって制御されます (これらは、spark.skins.assets.mobile パッケージ内の 2 つの fxg ファイルです)。私の場合、それを削除するために行ったことは、upBorderSkin (spark.skins.assets.mobile.TransparentNavigation_up.fxg) からソースをコピーし、パッケージ assets.mobile.BorderLessNavigationButtonSkin にファイル BorderLessNavigationButtonSkin を作成したことです。 fxg は次のとおりです (垂直方向の境界線を示す Rect セパレータ ダークがあり、alpha 属性を 0 に設定するだけです)

<?xml version="1.0" encoding="UTF-8"?>

<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008" scaleGridTop="1" scaleGridBottom="64" scaleGridLeft="1" scaleGridRight="79" >

<!-- highlight border right -->
<Rect x="79" y="1" width="1" height="63">
    <fill>
        <LinearGradient x="0" scaleX="63" rotation="90">
            <GradientEntry color="#ffffff" ratio="0" alpha=".15"/>
            <GradientEntry color="#ffffff" ratio="1" alpha=".1"/>
        </LinearGradient>
    </fill>
</Rect>

<!-- separator dark -->
<Rect x="80" y="0" width="1" height="65">
    <fill>
        <SolidColor color="#000000" alpha="0.0"/><!--this alpha attribute was set to 0 in order not to appear -->
    </fill>
</Rect>

<!-- highlight border trailing -->
<Rect x="81" y="1" width="1" height="63">
    <fill>
        <LinearGradient x="0" scaleX="63" rotation="90">
            <GradientEntry color="#ffffff" ratio="0" alpha=".15"/>
            <GradientEntry color="#ffffff" ratio="1" alpha=".1"/>
        </LinearGradient>
    </fill>
</Rect>

<!-- invisible fix for scaling -->
<Rect x="0" y="0" width="82" height="65">
    <fill>
        <SolidColor color="#ffffff" alpha="0"/>
    </fill>
</Rect>

</グラフィック>

次に、TransparentNavigationButtonSkin を次のコードで拡張する新しいボタン スキンを作成しました。

パッケージ スキン { import assets.mobile.BorderlessNavigationButtonSkin;

import mx.core.mx_internal;

import spark.skins.mobile.TransparentNavigationButtonSkin;

use namespace mx_internal;


public class NavigationButtonSkin extends TransparentNavigationButtonSkin
{
    public function NavigationButtonSkin()
    {
        super();
        upBorderSkin = assets.mobile.BorderlessNavigationButtonSkin;
        downBorderSkin = assets.mobile.BorderlessNavigationButtonSkin;
    }

    override mx_internal function layoutBorder(unscaledWidth:Number, unscaledHeight:Number):void
    {
        // trailing vertical separator is outside the right bounds of the button
        //setElementSize(border, unscaledWidth + layoutBorderSize, unscaledHeight);
        //setElementPosition(border, 0, 0);

        setElementSize(border, 0, 0 );
        setElementPosition(border, 0, 0);
    }

    override protected function getBorderClassForCurrentState():Class
    {

        if (currentState == "down") 
            return downBorderSkin;
        else
            return upBorderSkin;

    }
}

}

最後に、actionGroup または navigationGroup ActionBar 内のボタンのアプリケーション レベルでのグローバル css スタイル

s|ActionBar s|Group#navigationGroup s|Button { skinClass: ClassReference("skins.NavigationButtonSkin"); }

cssクラスにupBorderSkinとdownBorderSkinを設定し、fxgファイルのみを設定することで、より簡単な方法があると確信していますが、私の場合、背景のグラデーションと上下のグラデーションが必要なかったため、カスタムActionBarも作成しましたボーダーとそれはもう少し複雑になりました

于 2013-10-13T18:13:02.647 に答える