Question

我正在尝试向我的应用程序添加一个带有背景图像的自定义皮肤，它完全适合任何设备的整个屏幕。这是皮肤：

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


    <s:Skin name="CustomMainSkin"
    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"
               source="assets/background.jpg"
               scaleMode="stretch"
               fillMode="scale"
               smooth="true"
               left="0" right="0"
               top="0" bottom="0" />

<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0" />

如果我在应用程序上设置皮肤一切看起来很棒，图像会调整大小到屏幕需要，但所有组件都消失了，我无法编辑任何视图。

      <s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                              xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="240"
                              xmlns:components="views.*"
                              creationComplete="removeTab1DefaultView(event)"
skinClass="skins.CustomMainSkin"     >

<s:ViewNavigator label="Main view" firstView="views.MainView"/>
<s:ViewNavigator label="Online Rankings" firstView="views.RankingsOnline"/>
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
      </s:TabbedViewNavigatorApplication>

我尝试使用SkinnableContainer直接在视图中设置皮肤。组件以这种方式可见，但图像不会调整大小，并且比屏幕大很多。

        <?xml version="1.0" encoding="utf-8"?>
        <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" title="MainView"
    actionBarVisible="false"
    tabBarVisible="false"
    >

        <s:SkinnableContainer skinClass="skins.CustomMainSkin" >
<s:NavigatorContent id="gameBoard" >
</s:NavigatorContent>
<s:Group x="27" y="133" width="297" height="388">
    <s:Button left="33" right="36" top="39" bottom="281" label="Start Game"
              horizontalCenter="-2" verticalCenter="-121" click="button1_clickHandler(event)"/>
    <s:Button x="34" y="146" width="228" label="Rankings" click="rankingsAction(event)"/>
    <s:Button x="32" y="252" width="228" label="Quit"/>
</s:Group>
</s:SkinnableContainer>
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>  

     </s:View>

我怎样才能做到这一点？这似乎非常困难和不自然。

由于

Answer 1

以下是具有BG图像的简单皮肤的示例。下面是使用它的代码。

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin name="CustomPanelSkin"
             xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark"
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
             blendMode="normal"
             mouseEnabled="false"
             minWidth="131" minHeight="127"
             alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">
    <!-- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="normalWithControlBar" stateGroups="withControls" />
        <s:State name="disabledWithControlBar" stateGroups="withControls" />
    </s:states>

    <fx:Metadata>
        [HostComponent("spark.components.Panel")]
    </fx:Metadata>

    <fx:Script fb:purpose="styling">
        <![CDATA[

            static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "controlBarGroup"];

            override public function get colorizeExclusions():Array {
                return exclusions;
            }

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

            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                if (getStyle("borderVisible") == true) {

                    background.left = background.top = background.right = background.bottom = 1;
                    contents.left = contents.top = contents.right = contents.bottom = 1;
                } else {

                    background.left = background.top = background.right = background.bottom = 0;
                    contents.left = contents.top = contents.right = contents.bottom = 0;
                }

                var cr:Number = getStyle("cornerRadius");
                var withControls:Boolean = (currentState == "disabledWithControlBar" || currentState == "normalWithControlBar");

                if (cornerRadius != cr) {
                    cornerRadius = cr;
                }

                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }

            private function setPartCornerRadii(target:Rect, includeBottom:Boolean):void {
                target.topLeftRadiusX = cornerRadius;
                target.topRightRadiusX = cornerRadius;
                target.bottomLeftRadiusX = includeBottom ? cornerRadius : 0;
                target.bottomRightRadiusX = includeBottom ? cornerRadius : 0;
            }

            private var cornerRadius:Number;
        ]]>
    </fx:Script>

    <!-- drop shadow can't be hittable so all other graphics go in this group -->
    <s:Group left="0" right="0" top="0" bottom="0">

        <!-- layer 2: background fill -->
        <!--- Defines the appearance of the PanelSkin class's background. -->
        <s:Rect id="background"
                left="1" top="1" right="1" bottom="1">
            <s:fill>
                <s:BitmapFill id="backgroundFill" source="@Embed('Images/BG.jpg')" alpha="0.3" fillMode="repeat" />
            </s:fill>
        </s:Rect>

        <!-- layer 3: contents -->
        <!--- Contains the vertical stack of titlebar content and controlbar. -->
        <s:Group id="contents"
                 left="1" right="1" top="1" bottom="1">
            <s:layout>
                <s:VerticalLayout gap="0" horizontalAlign="justify" />
            </s:layout>

            <s:Group id="contentGroup"
                     width="100%" height="100%" minWidth="0" minHeight="0">
            </s:Group>


        </s:Group>
    </s:Group>
</s:SparkSkin>

用法：

<s:Panel id="target"             
             width="100%" height="100%" 
             skinClass="WorkspaceSkin">
    </s:Panel>

将自定义外观设置为flex移动应用程序会使所有组件消失

1 个答案: