如何在Flex Mobile的选项卡式视图导航器选项卡中控制图标

时间:2012-12-05 15:09:38

标签: actionscript-3 flex air flash-builder flex4.5

目前正在开发使用Flex Mobile的移动应用程序,最终确定了一些内容并进行了一些精细的视觉布局调整。由于我的应用程序是使用 TabbedViewNavigatorApplication 部分构建的,我想添加和微调 TabbedViewNavigator #tabBar选项卡中显示的图标。好吧,这是其中一项似乎需要几分钟的任务,最后搜索Adobe api文档并搜索数小时,最终在几天内找到解决方案。说我想发布我的解决方案,希望有人会需要它并在他们自己的特定情况下使用它。

这里首先要提到的是,默认情况下,Adobe有一个用于为火花组件设置皮肤的广泛帮助库,但最终还是最终 - 这些示例通常只划分特定情况和/或实现所需的表面

首先,我想说我避免使用 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或为你的图标着色,这意味着你总是使用一组图标,但在不同情况下 - 你给它们不同的视觉属性,其中一种情况可能是 - 它们的视觉吸引力在应用程序#tabBar。

图标属性是图标图像文件的路径,类型是通用对象。所以你不能改变alpha或用它做任何其他事情。这两个icon属性都不会给你任何包含图标本身的显示对象的引用,也不会为你多汁的AS3 jonglery pokery提供你想要的任何东西......

对于这样的任务,我们必须做一些漂亮的火花皮肤(在AS3中);)所以请阅读下面的答案

1 个答案:

答案 0 :(得分:1)

第一步是从 MyStyles.css 上面的例子中添加你的css文件(我总是从css中做皮肤类引用,发现它很容易管理,如果需要也可以改变)... < / p>

/* 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中/上/后。在最简单的情况下,我们必须实现(扩展)其中两个/ first /和/ last - &gt;因为/ mid / position也使用/ 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;                
            }
        }
    }
}

最后, __ iconGroup 成员现在将引用包含您图标的Group可视组件! - &GT;您通过mxml /或AS3代码在ViewNavigator实例中定义的。现在我们可以去脏;)并做这样的事情,例如:

.
.
.

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

.
.
.

将以红色为您的图标着色并给出0.85的alpha值。等等......这真的是你可以用Flex Mobile中的spark #tabBar皮肤做的基础知识。希望会帮助别人。干杯。