使背景图像在Flex 4中居中

时间:2011-02-15 13:03:25

标签: flex flex4

CustomAppSkin

    <?xml version="1.0" encoding="utf-8"?>
<s:Skin name="CustomApplicationSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        alpha.disabled="0.5">
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>

    <fx:Metadata>
        <![CDATA[ 
        [HostComponent("spark.components.Application")]
        ]]>
    </fx:Metadata> 

    <!-- fill -->

    <s:BitmapImage id="img" fillMode="clip" horizontalCenter="0" verticalCenter="0" 
                   source="@Embed('assets/images/bg_with_Steps.png')"
                   smooth="true" 
                   left="0" right="0"
                   top="0" bottom="0" />


</s:Skin>

如何对齐背景图像的中心。这段代码在我的Skin类中。我的主要班级......

<?xml version="1.0" encoding="utf-8"?>
<s:Application name="Spark_Application_skinClass_test"
               xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo"
               skinClass="CustomAppSkin">
    <s:layout>
        <s:VerticalLayout 
            horizontalAlign="center"
            verticalAlign="middle"/>
    </s:layout>

</s:Application>

1 个答案:

答案 0 :(得分:4)

尝试将 CustomAppSkin 更新为:

<?xml version="1.0" encoding="utf-8"?>
<s:Skin name="CustomApplicationSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        alpha.disabled="0.5">
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>

    <fx:Metadata>
        <![CDATA[ 
        [HostComponent("spark.components.Application")]
        ]]>
    </fx:Metadata> 

    <!-- fill -->
    <s:HGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
        <s:BitmapImage id="img" fillMode="clip" horizontalCenter="0" verticalCenter="0" 
                       source="@Embed('assets/images/bg_with_Steps.png')"
                       smooth="true" 
                       left="0" right="0"
                       top="0" bottom="0" />
    </s:HGroup>
</s:Skin>