1

由于目前正在使用 Flex Mobile 开发移动应用程序，因此需要完成一些事情并进行一些精细的视觉布局调整。由于我的应用程序是使用TabbedViewNavigatorApplication在部分中构建的，因此我想添加和微调出现在TabbedViewNavigator #tabBar 选项卡中的图标。嗯，这是那些似乎需要几分钟的任务之一，最后是搜索 Adob​​e api 文档并在谷歌上搜索了几个小时，最终在几天内找到了解决方案。说所以我想发布我的解决方案，希望有人需要它并在他们自己的特定情况下使用它。

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

首先我想说我避免使用mxml皮肤，并且总是使用ClassReference在 AS3 类中做我的火花皮肤工作。在我看来，这种方法比 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>

在这个典型配置中，您可以访问ViewNavigator图标属性并在您的 mxml 或 AS3 中设置它（例如在上面的 for 循环中），最终添加一个 switch 语句来为每个选项卡选择不同的图标......但这就是您的故事结束。当某个ViewNavigator由可视组件表示时，使用 ViewNavigator 图标属性。这意味着在您的#tabBar 中，ViewNavigator在视觉上表示为导航器堆栈的一部分，并且是合乎逻辑的 - 在这种情况下，它使用指定的图标。

现在让我们假设现在您想以编程方式更改 alpha 或为您的图标着色，这意味着您总是使用一组图标但在不同的情况下——你给它们不同的视觉属性，其中一种情况可能是——它们在应用程序中的视觉吸引力#标签栏。

图标属性是图标图像文件的路径，并且作为类型是通用对象。所以你不能改变 alpha 或用它做任何其他事情。这两个图标属性都不会为您提供对包含图标本身的显示对象的任何引用，也不会为您提供多汁的 AS3 jonglery pokery 所需的任何其他内容...

对于这样的任务，我们必须做一些漂亮的火花蒙皮（在 AS3 中）；）所以请阅读下面的答案

4

1 回答 1

1

第一步是从上面的MyStyles.css示例中添加您的 css 文件（我总是在 css 中进行皮肤类引用，发现它很容易在需要时进行管理和更改）......

/* MyStyle.css example */

.
.

s|TabbedViewNavigator #tabBar {
    skinClass: ClassReference("com.myapp.skins.TabBarSkin");
}

.
.

您现在必须定义您的自定义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继承自TabbedViewNavigatorTabBarSkin，它为你的#tabBar 中的每个重要选项卡位置/第一个/中间/最后一个/有 3 个皮肤类。在最简单的情况下我们必须实现（扩展）其中两个 /first/ 和 /last -> 因为 /mid/ 位置也使用 /last/ 皮肤，在这种情况下我们不需要单独实现它。

/* 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;                
            }
        }
    }
}

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

.
.
.

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

.
.
.

这会将您的图标着色为红色并提供 alpha 0.85。等等...这确实是您可以在 Flex Mobile 中使用 spark #tabBar 蒙皮的基础知识。希望能帮助某人。干杯。

于 2012-12-05T15:09:37.580 回答