Question

在这里真的需要一些帮助......也许是一些演练或者说明如何去做它...我确实用纯动作皮肤操作ActionBar只是因为我不知道如何删除导航内容之间的分段边界，动作内容和标题显示。可能会有一些视觉效果会描述更多细节。希望有人会帮助我otu这个...高级的事情

Remove ActionBar Segment Border

这里是我的动作代码尝试

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();
    }



}

}

Answer 1

要从操作栏中删除的边框，属于actionGroup（actionContent）或navigationGroup（navigationContent）中出现的Button。它由2个皮肤upBorderSkin和downBorderSkin控制（这些是spark.skins.assets.mobile包中的2个fxg文件）。我在我的案例中删除它的原因是我从upBorderSkin复制了源代码（spark.skins.assets.mobile.TransparentNavigation_up.fxg，我在一个包assets.mobile.BorderLessNavigationButtonSkin中创建了一个文件BorderLessNavigationButtonSkin。 fxg的代码如下（有一个显示垂直边框的Rect分隔符暗，我只是将alpha属性设置为0）

＆lt;？xml version =“1.0”encoding =“UTF-8”？＆gt;

＆lt; Graphic version =“2.0”xmlns =“http://ns.adobe.com/fxg/2008” scaleGridTop =“1”scaleGridBottom =“64”scaleGridLeft =“1”scaleGridRight =“79”＆gt;

<!-- 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>

＆LT; /图形＆GT;

然后我创建了一个新的Button Skin，它使用以下代码扩展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，因为我不想要背景渐变，还有顶部和底部边界，它变得有点复杂

在Flash Builder 4.6中删除ActionBar上的Segment Border

1 个答案: