How to change the labelDisplay x y positions of a button in flex

Question

I want to the change the font position of a spark button component in flex 4.5 mobile application. Currently flex defaultly shows the font in the middle of the button. But i want to change the font position to some other position. I tried overriding the overriding the method layoutContents. But I am getting two fonts. Can any one help me.

<s:Button label="Test &#13; TestGreenGo" skinClass="skins.RoundedButtonSkin"/>

Here is my RoundedButtonSkin Class

package skins
{
    import spark.skins.mobile.ButtonSkin;

    public class RoundedButtonSkin extends ButtonSkin
    {

        private var colorized:Boolean = false;

        public function RoundedButtonSkin()
        { 
            super(); 

            measuredDefaultHeight = 44;
            measuredDefaultWidth = 220; 
        }

        override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.layoutContents(unscaledWidth, unscaledHeight);
            setElementPosition(upBorderSkin, 0, 0);
            setElementSize(upBorderSkin, unscaledWidth, unscaledHeight);
            setElementPosition(labelDisplay,0,0);
            invalidateDisplayList();
            validateNow();
        }
    } 
}

Answer 1

I got the solution.

Need to add labelDisplayShadow too

setElementPosition(labelDisplay,0,3);
setElementPosition(labelDisplayShadow, labelDisplay.x, labelDisplay.y + 1);

Answer 2

i think you should try labelPlacement or textAlign properties of a Button. you can also add top,left,right,bottom properties to control text postion. hope this will work for you.

and if you are adding a <s:label /> in a skin. then you can devide your text to 2 lines by using maxDisplayedLine="2" property of a label component.

or try to make a skin like this

<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
                   minWidth="21" minHeight="21" 
                   alpha.disabled="0.5">

    <fx:Metadata>
        <![CDATA[ 
        /** 
        * @copy spark.skins.spark.ApplicationSkin#hostComponent
        */
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>

    <fx:Script fb:purpose="styling">
        <![CDATA[         
            import spark.components.Group;
            /* Define the skin elements that should not be colorized. 
            For button, the graphics are colorized but the label is not. */
            static private const exclusions:Array = ["labelDisplay"];

            /** 
             * @private
             */     
            override public function get colorizeExclusions():Array {return exclusions;}

            /**
             * @private
             */
            override protected function initializationComplete():void
            {
                useChromeColor = true;
                super.initializationComplete();
            }  

            /**
             *  @private
             */

            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
            {
                var cr:Number = getStyle("cornerRadius");

                if (cornerRadius != cr)
                {
                    cornerRadius = cr;
                    shadow.radiusX = cornerRadius;
                    fill.radiusX = cornerRadius;
                    lowlight.radiusX = cornerRadius;
                    highlight.radiusX = cornerRadius;
                    border.radiusX = cornerRadius;
                }

                if (highlightStroke) highlightStroke.radiusX = cornerRadius;
                if (hldownstroke1) hldownstroke1.radiusX = cornerRadius;
                if (hldownstroke2) hldownstroke2.radiusX = cornerRadius;

                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }

            private var cornerRadius:Number = 5;

        ]]>        
    </fx:Script>

    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
        <s:State name="selected" />
    </s:states>

    <!-- layer 1: shadow -->
    <!--- @private -->
    <s:Rect id="shadow" left="0" right="0" top="0" bottom="0" radiusX="0">

    </s:Rect>

    <!-- layer 2: fill -->
    <!--- @private -->
    <s:Rect id="fill" left="1" right="1" top="1" bottom="1" topLeftRadiusX="10" topLeftRadiusY="10" bottomLeftRadiusX="10" bottomLeftRadiusY="10"
                topRightRadiusX="10" topRightRadiusY="10" bottomRightRadiusX="10" bottomRightRadiusY="10">
        <s:fill>
                <s:LinearGradient rotation="90">
                    <s:GradientEntry color="0xc9d8e2"  color.selected="0xe7f1f8" color.down="0xe7f1f8"
                                     color.disabled="0xb4b4b4" color.over="0xdbe9f3"
                                     />

                    <s:GradientEntry color="0xa1bbcd" color.over="0xdbe9f3" color.down="0xe2e9ed"
                                     color.disabled="0xb4b4b4" color.selected="0xc8d7e1"
                                     />
                </s:LinearGradient>
        </s:fill>


    </s:Rect>

    <!-- layer 3: fill lowlight -->
    <!--- @private -->
    <s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" topLeftRadiusX="10" topLeftRadiusY="10" bottomLeftRadiusX="10" bottomLeftRadiusY="10">

    </s:Rect>

    <!-- layer 4: fill highlight -->
    <!--- @private -->
    <s:Rect id="highlight" left="1" right="1" top="1" bottom="1" topLeftRadiusX="10" topLeftRadiusY="10" bottomLeftRadiusX="10" bottomLeftRadiusY="10">

    </s:Rect>

    <!-- layer 5: highlight stroke (all states except down) -->
    <!--- @private -->
    <s:Rect id="highlightStroke" left="1" right="1" top="1" bottom="1" excludeFrom="down" topLeftRadiusX="10" topLeftRadiusY="10" bottomLeftRadiusX="10" bottomLeftRadiusY="10"
            topRightRadiusX="10" topRightRadiusY="10" bottomRightRadiusX="10" bottomRightRadiusY="10">
        <s:stroke>
            <s:SolidColorStroke color="0xffffff" color.over="#40608f" alpha="0.3" weight="0" weight.over="1" alpha.over="0.7">
            </s:SolidColorStroke>
            <!--<s:LinearGradientStroke rotation="90" weight="1">
            <s:GradientEntry color="0x57626f" alpha="0.22" alpha.over="0.22" />
            <s:GradientEntry color="0x586678" alpha.over="0.22" />
            </s:LinearGradientStroke>-->
        </s:stroke>
    </s:Rect>

    <!-- layer 6: highlight stroke (down state only) -->
    <!--- @private -->
    <s:Rect id="hldownstroke1" left="1" right="1" top="1" bottom="1" topLeftRadiusX="10" topLeftRadiusY="10" bottomLeftRadiusX="10" bottomLeftRadiusY="10" includeIn="down">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0" />
                <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001" />
                <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011" />
                <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965" />
                <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
    <!--- @private -->
    <s:Rect id="hldownstroke2" left="2" right="2" top="2" bottom="2" topLeftRadiusX="10" topLeftRadiusY="10" bottomLeftRadiusX="10" bottomLeftRadiusY="10" includeIn="down">
        <s:stroke>
            <s:SolidColorStroke color="0x2c2c2c" alpha=".56" weight="0.1">

            </s:SolidColorStroke>
            <!--<s:LinearGradientStroke rotation="90" weight="1">
            <s:GradientEntry color="0x000000" alpha="0.09" ratio="0.0" />
            <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.0001" />
            </s:LinearGradientStroke>-->
        </s:stroke>
    </s:Rect>

    <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
    <!--- @private -->
    <s:Rect id="border" left="0" right="0" top="0" bottom="0" width="69" height="20" topLeftRadiusX="10" topLeftRadiusY="10" bottomLeftRadiusX="10" bottomLeftRadiusY="10">

    </s:Rect>

    <!-- layer 8: text -->
    <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay  -->
    <s:Label id="labelDisplay"
             textAlign="center"
             maxDisplayedLines="1" color="0x3d6295" fontWeight="bold"
             horizontalCenter="0" verticalCenter="1" verticalAlign="middle"
             left="10" right="10" top="2" bottom="2">
    </s:Label>

</s:SparkButtonSkin>