1

我想知道是否可以为我的 Flex移动应用程序设置皮肤视图：

我的ActivityView.as

public class ActivityView extends View

我的ActivityViewSkin.mxml（与皮肤相关）

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark">

<fx:Metadata>   
    [HostComponent("com.corp.views.activity.ActivityView")]
    ...

这是移动开发的好方法吗？

我怎样才能在这个皮肤中使用它：

<s:navigationContent>

非常感谢 ！

安东尼

4

4 回答 4

0

从目前的经验来看，您不会对视图进行蒙皮。您为 ViewNavigatorApplication 设置外观。首先，创建自定义皮肤：

public class DViewNavigatorApplicationSkin extends ViewNavigatorApplicationSkin
{
    [Embed(source="assets/wine_240.jpg")]
    protected var cornerImage:Class;

    public function DViewNavigatorApplicationSkin()
    {
        super();            
    }


    override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
    {   
        graphics.beginFill(0x000000);
        graphics.drawRect(0,0, unscaledWidth, unscaledHeight);
        graphics.endFill();
        var ba:BitmapAsset = new cornerImage() as BitmapAsset;
        var translateMatrix:Matrix = new Matrix();
        translateMatrix.tx = unscaledWidth - ba.width;
        translateMatrix.ty = unscaledHeight - ba.height;
        graphics.beginBitmapFill(ba.bitmapData, translateMatrix);
        graphics.drawRect(unscaledWidth - ba.width + 1, unscaledHeight - ba.height + 1, ba.width, ba.height);
        graphics.endFill();

    }

drawBackground 的内容将图像停靠在显示屏的右下角。你可以在这个函数中绘制任何东西。

然后在theme.css中：

s|ViewNavigatorApplication
{
    color: #ffffff;
    focusColor: #ff9999;
    skinClass:  ClassReference("com.domain.skins.mobile.ThemeName.DViewNavigatorApplicationSkin");
}

s|View
{
    backgroundAlpha: 0;
}

您在应用程序本身上绘制背景图像。然后，您使 View 完全透明，以便您可以通过它看到背景图像。

可以为每个单独的视图设置皮肤，但到目前为止，为应用程序设置皮肤似乎更实用。

于 2012-11-28T02:33:51.643 回答
0

回答这个问题有点晚了。实际上，我们可以使用 Spark Skin 对 View 组件进行皮肤处理，没有任何问题。View 只是 SkinnableContainer 的子类（它是 SkinnableComponent 的子类），因此默认情况下，您直接添加到 View 组件的 MXML 中的任何内容都将添加到 SkinnableContainer 的 contenGroup 中。

我添加了一个示例来使用 Spark Skin 对视图进行皮肤：

主要应用：

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="160">
<fx:Script>
    <![CDATA[
        import com.accessdigital.core.SimpleView;
    ]]>
</fx:Script>
<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace core "com.accessdigital.core.*";
    core|SimpleView{
        skinClass   : ClassReference("skin.view.Skin_SimpleView");
    }
</fx:Style>
<s:ViewNavigator width="100%" height="100%"
                 firstView="{SimpleView}">

</s:ViewNavigator>
</s:Application>

查看课程

public class SimpleView extends View
{
    public function SimpleView()
    {
        super();
    }

    [SkinPart(required="true")]
    public var myButton:Button;

    override protected function createChildren():void{
        super.createChildren();
        var anotherButton:Button = new Button();
        anotherButton.label = "Another button";
        anotherButton.addEventListener(MouseEvent.CLICK, onAnotherButtonClick);
        if(!actionContent){
            actionContent = [];
        }
        actionContent.push(anotherButton);
    }

    protected function onAnotherButtonClick(event:MouseEvent):void
    {
        trace("This is another button");            
    }

    override protected function partAdded(partName:String, instance:Object):void{
        super.partAdded(partName, instance);
        if(instance == myButton){
            myButton.addEventListener(MouseEvent.CLICK, onButtonClick);
        }
    }

    protected function onButtonClick(event:MouseEvent):void
    {
        trace("This is a simple button");           
    }
}

皮肤文件：

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark">
<!-- host component -->
<fx:Metadata>
    [HostComponent("com.accessdigital.core.SimpleView")]
</fx:Metadata>

<!-- states -->
<s:states>
    <s:State name="disabled" />
    <s:State name="normal" />
</s:states>

<!-- SkinParts
name=myButton, type=spark.components.Button, required=true
name=contentGroup, type=spark.components.Group, required=false
-->
<s:Rect width="100%" height="100%">
    <s:fill>
        <s:LinearGradient rotation="90">
            <s:GradientEntry color="#666666"/>
            <s:GradientEntry color="#222222"/>
        </s:LinearGradient>
    </s:fill>
</s:Rect>
<s:Group id="contentGroup" width="100%" height="100%">
    <s:Button id="myButton" label="My Button" horizontalCenter="0" verticalCenter="0"/>
</s:Group>
</s:Skin>

希望能帮助到你

于 2014-07-23T10:51:11.170 回答
0

我一直在寻找类似的信息，但是我可以从文档和博客中推断出的所有信息都表明 MobileSkin 是您为组件级皮肤（例如按钮、列表、itemRenderers 等）所做的事情，在整个过程中会被多次使用。应用程序。

认为您可能能够通过 MXML 为视图蒙皮的另一个原因是，我所看到的所有视图代码都是以声明方式完成的（MXML），并且仅使用 Skin 类对 View 子类进行蒙皮，您只是在大多数 skinnableContainer 皮肤中通过 contentGroup 添加一层层次结构。

如果您使用的是 spark.components.View，那么您使用的是关联的皮肤，因为它是 SkinnableContainer。它不是您想象的那样简单的组。

我不知道，我有点不知道应该把精力集中在哪里。我确信性能影响（如果有的话）会在开发阶段的后期出现。

于 2012-08-30T15:37:05.910 回答
0

不。Spark 皮肤未针对移动设备进行优化。你应该使用 MobileSkin 。（仅限动作脚本）。

于 2012-04-09T13:16:39.187 回答