目前正在开发使用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中);)所以请阅读下面的答案
答案 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皮肤做的基础知识。希望会帮助别人。干杯。