1

私はFlex mobil電子アプリケーションに取り組んでおり、モバイルでのパフォーマンスを最適化しています。スキンを書き込む必要があることを読んだActionScriptので、 AS を作成しようとしましたButtonSkin。

public class mButtonSkin extends ButtonSkin
{
    private static var colorMatrix:Matrix = new Matrix();

    protected var radiusX:Number = 12;
    protected var mAngle:Number = 30;
    protected var labelWidth:Number;
    protected var labelHeight:Number;
    protected var paddingLeft:Number = 12;
    protected var paddingRight:Number = 12;
    protected var paddingTop:Number = 2;
    protected var paddingBottom:Number = 2;



    public function mButtonSkin() {
        super();
    }


    override protected function drawBackground(unscaledWidth:Number,unscaledHeight:Number) : void {
        colorMatrix.createGradientBox(width,height,mAngle);
        if (currentState == "up") {
            graphics.beginGradientFill(GradientType.LINEAR, 
                [hostComponent.getStyle("fill3"),hostComponent.getStyle("fill1")], [1,1], [0,255], colorMatrix);
        } else {
            graphics.beginFill(hostComponent.getStyle("fill4"));
        }

        graphics.lineStyle(0.5,hostComponent.getStyle("borderColor"),0.5);
        graphics.drawRoundRect(0,0,hostComponent.width,hostComponent.height,12);
        graphics.endFill();
    }


    override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number) : void {
        labelDisplay.wordWrap = true;
        labelDisplay.multiline = true;

        labelDisplay.commitStyles();

        labelWidth = width - paddingLeft - paddingRight;
        labelHeight = height - paddingTop - paddingBottom;

        var x:Number = width / 2 - labelWidth / 2;
        var y:Number = height / 2 - getElementPreferredHeight(labelDisplay) / 2;

        setElementSize(labelDisplay,labelWidth,labelHeight);
        setElementPosition(labelDisplay,x,y);
    }


    override protected function labelDisplay_valueCommitHandler(event:FlexEvent) : void {
        labelDisplayShadow.text = "";
    }
}

このスキンをボタンに適用する:

ここに画像の説明を入力

ボタン labelDisplay の配置が正しくありません (verticalAlignment は中央である必要があります)。

ボタンをクリックした後:

ここに画像の説明を入力

私のボタンlabelDisplayは現在、中央に垂直に配置されています。

私は何か見落としてますか？私は何を間違えましたか？

4

1 に答える 1

1

layoutContents関数では、labelDisplay要素を配置する前に、プロパティが1より大きいかどうかを最初に確認しましnumLinesた。更新された関数は次のとおりです。

    override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number) : void {
        labelDisplay.wordWrap = true;
        labelDisplay.multiline = true;

        labelWidth = width - paddingLeft - paddingRight;
        labelHeight = height - paddingTop - paddingBottom;

        var x:Number = width * .5 - labelWidth * .5;
        var y:Number = height * .5 - getElementPreferredHeight(labelDisplay) * .5;

        setElementSize(labelDisplay,labelWidth,labelHeight);

        if (labelDisplay.numLines == 1)
            setElementPosition(labelDisplay,x,y);
        else
            setElementPosition(labelDisplay, x, labelDisplay.getLayoutBoundsY());
    }

このソリューションは、他の開発者には役に立たないかもしれませんが、私の問題は解決しました。

于 2013-04-17T10:32:26.163 に答える