0

任意のデバイスの画面全体に完全に収まる背景画像を持つカスタム スキンをアプリケーションに追加しようとしています。これはスキンです：

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

どうすればこれを達成できますか? それは本当に難しく、不自然に思えます。

ありがとう

4

1 に答える 1

0

これは、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>
于 2013-09-23T08:32:40.580 に答える