Actionscript 3 如何控制Flex Mobile选项卡ViewNavigator选项卡中的图标

目前正在使用Flex mobile开发一个移动应用程序，最终完成了一些工作，并进行了一些精细的视觉布局调整。由于我的应用程序是使用选项卡式视图导航器应用程序构建的，我想添加并微调出现在选项卡式视图导航器选项卡中的图标。嗯，这是一项似乎需要几分钟的任务，最终搜索AdobeAPI文档并在谷歌上搜索几个小时，最终在几天内找到解决方案。所以我想发布我的解决方案，希望有人会需要它，并在他们自己的具体情况下使用它

这里首先要提到的是，Adobe per default有一个广泛的帮助库，用于对spark组件进行蒙皮，但最终，这些示例通常只触及特定情况和/或实现所需的表面

首先，我想说的是，我避免使用mxml皮肤，并且总是使用ClassReference在AS3类中执行spark蒙皮工作。在我看来，这种方法比在mxml中过度滥发信息要灵活、优雅和干净得多。虽然有时更难实现

因此，典型的最小TabbedViewNavigator应用程序如下所示：

<?xml version="1.0" encoding="utf-8"?>
<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                  xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="160" applicationComplete="onApplicationComplete(event)">

<fx:Style source="MyStyles.css" />

    <fx:Script>
        <![CDATA[
            import spark.components.ViewNavigator;

            private function onApplicationComplete(e:Event):void {
                for each(var vn : ViewNavigator in this.navigators){
                   /// do something with your VN's ...
                   vn.icon = "./assets/myFaboulousIcon.png";
                }
            }           

        ]]>
    </fx:Script>

    <s:ViewNavigator label="one" width="100%" height="100%" firstView="views.oneView"/>
    <s:ViewNavigator label="two" width="100%" height="100%" firstView="views.twoView"/>
    <s:ViewNavigator label="three" width="100%" height="100%" firstView="views.threeView"/>

</s:TabbedViewNavigatorApplication>

icon属性是图标图像文件的路径，作为一种类型是一个通用对象。所以你不能改变alpha或者用它做任何事情。这两个图标属性都不会为您提供对包含图标本身的显示对象的任何引用，也不会为您的juicy AS3 jonglery扑克提供任何其他您想要的内容

对于这样的任务，我们必须做一些漂亮的火花蒙皮（在AS3中）；）因此，阅读下面的答案
第一步是添加上面示例中的css文件MyStyles.css（我总是从css中引用皮肤类，发现很容易管理和更改（如果需要的话）

现在必须定义自定义的TabBarSkin类，该类可以如下所示：

/* TabBarSkin Class */
package com.myapp.skins
{
    import spark.skins.mobile.TabbedViewNavigatorTabBarSkin;
    import spark.skins.mobile.supportClasses.ButtonBarButtonClassFactory;
    import spark.components.ButtonBarButton;

    public class TabBarSkin extends TabbedViewNavigatorTabBarSkin
    {
        public function TabBarSkin() {
            super();
        }

        override protected function createChildren():void
        {
            if (!firstButton) {
                firstButton = new ButtonBarButtonClassFactory(ButtonBarButton);
                firstButton.skinClass = TabBarFirstTabSkin;
            }

            if (!lastButton) {
                lastButton = new ButtonBarButtonClassFactory(ButtonBarButton);
                lastButton.skinClass = TabBarLastTabSkin;
            }

            if (!middleButton) {
                middleButton = new ButtonBarButtonClassFactory(ButtonBarButton);
                middleButton.skinClass = TabBarLastTabSkin;
            }

            super.createChildren();
        }
    }
}

没有太多的细节，您必须知道这个自定义类TabBarSkin继承自TabbedViewNavigator Abbarskin，它有3个皮肤类，分别对应于您的#tabBar中的每个重要选项卡位置/first/mid/last/。在最简单的情况下，我们必须实现（扩展）其中的两个/first/和/last->，因为/mid/位置也使用/last/skin，在这种情况下，我们不需要单独实现它

/* TabBarFirstTabSkin Class */
package com.myapp.skins
{
    import spark.components.Group;
    import spark.skins.mobile.TabbedViewNavigatorTabBarFirstTabSkin;

    public class TabBarFirstTabSkin extends TabbedViewNavigatorTabBarFirstTabSkin
    {   
        private var __iconGroup : Group = null;

        public function TabBarFirstTabSkin() {
            super();
        }

        override protected function layoutContents(unscaledWidth : Number, unscaledHeight : Number) : void {
            super.layoutContents(unscaledWidth, unscaledHeight);    
            if(!__iconGroup) {
                __iconGroup = getIconDisplay() as Group;
            }
        }
    }
}

与/last/one相同：

/* TabBarLastTabSkin Class */
package com.myapp.skins
{

    import spark.components.Group;
    import spark.skins.mobile.TabbedViewNavigatorTabBarLastTabSkin;

    public class TabBarLastTabSkin extends TabbedViewNavigatorTabBarLastTabSkin
    {

         private var __iconGroup : Group = null;

         public function TabBarLastTabSkin() {
              super();
         }

        override protected function layoutContents(unscaledWidth : Number, unscaledHeight : Number) : void {
            super.layoutContents(unscaledWidth, unscaledHeight);    
            if(!__iconGroup) {
                __iconGroup = getIconDisplay() as Group;                
            }
        }
    }
}

最后，\uuu iconGroup成员现在将引用包含图标的组可视组件！->以及您通过mxml/或AS3代码在ViewNavigator实例中定义的。现在我们可以变脏了；）做这样的事情例如：

.
.
.

var colorTransform : ColorTransform = new ColorTransform();
colorTransform.color = 0xFF3300;
colorTransform.alphaMultiplier = 0.85;
__iconGroup.transform.colorTransform = colorTransform;

.
.
.

这将把你的图标染成红色，并给出alpha 0.85。等这是在Flex Mobile中使用spark#tabBar蒙皮所能实现的基本功能。希望能帮助别人。干杯
 第一步是添加上面示例中的css文件MyStyles.css（我总是从css中引用皮肤类，发现很容易管理和更改（如果需要）

现在必须定义自定义的TabBarSkin类，该类可以如下所示：

/* TabBarSkin Class */
package com.myapp.skins
{
    import spark.skins.mobile.TabbedViewNavigatorTabBarSkin;
    import spark.skins.mobile.supportClasses.ButtonBarButtonClassFactory;
    import spark.components.ButtonBarButton;

    public class TabBarSkin extends TabbedViewNavigatorTabBarSkin
    {
        public function TabBarSkin() {
            super();
        }

        override protected function createChildren():void
        {
            if (!firstButton) {
                firstButton = new ButtonBarButtonClassFactory(ButtonBarButton);
                firstButton.skinClass = TabBarFirstTabSkin;
            }

            if (!lastButton) {
                lastButton = new ButtonBarButtonClassFactory(ButtonBarButton);
                lastButton.skinClass = TabBarLastTabSkin;
            }

            if (!middleButton) {
                middleButton = new ButtonBarButtonClassFactory(ButtonBarButton);
                middleButton.skinClass = TabBarLastTabSkin;
            }

            super.createChildren();
        }
    }
}

没有太多的细节，您必须知道这个自定义类TabBarSkin继承自TabbedViewNavigator Abbarskin，它有3个皮肤类，分别对应于您的#tabBar中的每个重要选项卡位置/first/mid/last/。在最简单的情况下，我们必须实现（扩展）其中的两个/first/和/last->，因为/mid/位置也使用/last/skin，在这种情况下，我们不需要单独实现它

/* TabBarFirstTabSkin Class */
package com.myapp.skins
{
    import spark.components.Group;
    import spark.skins.mobile.TabbedViewNavigatorTabBarFirstTabSkin;

    public class TabBarFirstTabSkin extends TabbedViewNavigatorTabBarFirstTabSkin
    {   
        private var __iconGroup : Group = null;

        public function TabBarFirstTabSkin() {
            super();
        }

        override protected function layoutContents(unscaledWidth : Number, unscaledHeight : Number) : void {
            super.layoutContents(unscaledWidth, unscaledHeight);    
            if(!__iconGroup) {
                __iconGroup = getIconDisplay() as Group;
            }
        }
    }
}

与/last/one相同：

/* TabBarLastTabSkin Class */
package com.myapp.skins
{

    import spark.components.Group;
    import spark.skins.mobile.TabbedViewNavigatorTabBarLastTabSkin;

    public class TabBarLastTabSkin extends TabbedViewNavigatorTabBarLastTabSkin
    {

         private var __iconGroup : Group = null;

         public function TabBarLastTabSkin() {
              super();
         }

        override protected function layoutContents(unscaledWidth : Number, unscaledHeight : Number) : void {
            super.layoutContents(unscaledWidth, unscaledHeight);    
            if(!__iconGroup) {
                __iconGroup = getIconDisplay() as Group;                
            }
        }
    }
}

最后，\uuu iconGroup成员现在将引用包含图标的组可视组件！->以及您通过mxml/或AS3代码在ViewNavigator实例中定义的。现在我们可以变脏了；）做这样的事情例如：

.
.
.

var colorTransform : ColorTransform = new ColorTransform();
colorTransform.color = 0xFF3300;
colorTransform.alphaMultiplier = 0.85;
__iconGroup.transform.colorTransform = colorTransform;

.
.
.

这将把你的图标染成红色，并给出alpha 0.85。等这是在Flex Mobile中使用spark#tabBar蒙皮所能实现的基本功能。希望能帮助别人。干杯