为应用程序的选项卡及ActionBar设置样式

示例文件  flex-mobile-dev-tips-tricks-pt2.zip

关于Flex移动开发的提示和技巧有一系列文章，这是其中的第二部分。第一部分集中讲解如何在视图切换及应用程序操作切换之间处理数据。本部分的主要内容是为ActionBar及选项卡组件设置样式。
    当您在Flex4.5中构建TabbedViewNavigatorApplication时，您可以通过几种不同的方法个性化应用程序的选项卡及ActionBar（即标题栏，包含标题文本以及其他组件或导航内容）。其中一种方法是利用您自定义的素材资产（asset）（比如利用FXG或者皮肤）来设置选项卡的样式。但是如果您的应用程序不需要大量的个性化定制，您也可以借助简单的CSS属性。CSS样式设计让您能够方便快捷地对默认的、乏味的灰色选项卡做出重大改变。
    我创建了一个选项卡式的示例应用程序，借以解释创建过程。在下面的例子中，您将会看到如何通过添加简单的属性以及仅仅几行CSS语句来快速改变ActionBar和移动应用程序的选项卡！

添加图标至选项卡
   仔细思考如下代码，代码定义了FlexTabbedViewNavigatorApplication的三个标签，每一标签对应自身的第一个视图：

<?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">
<s:ViewNavigator id="trends" label="Trends" width="100%" height="100%" firstView="views.TrendsView"/>
<s:ViewNavigator id="attach" label="Attach" width="100%" height="100%" firstView="views.AttachView"/>
<s:ViewNavigator id="call" label="Call Center" width="100%" height="100%" firstView="views.CallView"/>
</s:TabbedViewNavigatorApplication>

默认情况下，当您创建了一个Flex移动项目，Mobile主题将自动应用（参看图1）。

图1 使用默认Mobile主题的示例应用程序。
    当然，这不值得欣喜。为了使之更有魅力，可以在选项卡上添加图标。
    为了添加图标至选项卡，您可以在每一个ViewNavigator组件上为所选择的图标设置图标属性。在如下代码中，我添加了从自己项目根目录下的素材资产（asset）目录里挑选出的3个图标。

<?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">
<s:ViewNavigator id="trends" label="Trends" width="100%" height="100%" firstView="views.TrendsView" icon="@Embed('assets/column-chart-icon32.png')"/>
<s:ViewNavigator id="attach" label="Attach" width="100%" height="100%" firstView="views.AttachView" icon="@Embed('assets/paperclip-icon32.png')"/>
<s:ViewNavigator id="call" label="Call Center" width="100%" height="100%" firstView="views.CallView" icon="@Embed('assets/receptionist-icon32.png')"/>
</s:TabbedViewNavigatorApplication>

只需要做些简单的改变，您就可以为自己的选项卡添加特性（参看图2）。

图2选项卡带有图标的示例应用程序。
设置ActionBar的样式
   在选项卡上添加图标是个不错的开端。但如果您和我一样，急切地想要换掉ActionBar组件和选项卡的暗灰色调，从而搭配自己心仪的主题，那么您可以通过CSS实现。
   您可以简单地利用针对ActionBar组件的Spark选择器来指定任意的支持样式或继承样式进行更换。
   注：Flex4.5 ActionScript API documentation展示了支持任意组件的样式属性，包括继承样式。同时，文件中还展示了哪些样式属性具有CSS继承性。如果您检查API中的ActionBar组件，您就能知晓哪些可以设置样式。
   在开始变更样式之前，您可能有兴趣知道各项默认值。比如，您可能想知道默认字体大小和字体灰度，这两者可能不如字体颜色显而易见。您可以查看Mobile主题的默认CSS属性以更好地了解自己设置的样式。Mac操作系统中，默认的css文件可在路径/Applications/Adobe Flash Builder4.5/ sdks/4.5/ frameworks/ projects/ mobiletheme/defaults.css中找到，Windows操作系统中，文件所在路径可能为C:\Program Files (x86)\Adobe\Adobe FlashBuilder 4.5\ sdks\4.5.0\ frameworks\ projects\mobiletheme\defaults.css。
这里有css文件中关于ActionBar及其标题的两段代码：

ActionBar
{
    chromeColor: #484848;
    defaultButtonAppearance: normal;
    skinClass: ClassReference("spark.skins.mobile.ActionBarSkin");
    textShadowAlpha: .65;
    textShadowColor: #000000;
    paddingBottom: 1;
    paddingLeft: 0;
    paddingRight: 0;
    paddingTop: 1;
}
...
ActionBar #titleDisplay
{
    color: #FFFFFF;
    fontSize: 28;
    fontWeight: bold;
}

请注意，字体颜色、大小、灰度是通过titleDisplay ID选择器进行设置的。
  由于我的示例应用程序中ActionBar没有太多内容——仅是文本标题而已——所以我只能个性化标题。如果您的ActionBar上有按钮和其他组件，您也可以为它们定制支持样式。
   ActionBar的titleDisplay皮肤部分可以很容易地通过CSS设置样式。我在此用<fx:style>  标签给我的示例应用程序设置如下CSS属性：

s|ActionBar
{
    chromeColor: #229988;
        titleAlign: center;
}

s|ActionBar #titleDisplay
{
    color: #CCCCCC; /* default color is white */
    fontSize: 40;
    fontFamily: "Comic Sans MS";
}

现在ActionBar中，文本为Comic Sans字体，居中显示，浅绿色背景。（参看图3）

图3 设置过ActionBar样式的示例应用程序。
设置选项卡的样式
   您也可以通过CSS来为选项卡栏中的选项卡设置样式。首先，您需要在CSS规则中定义TabbedViewNavigator组件的tabBar皮肤部分。此后，再次查看Mobile主题的css文件以获得皮肤部分的默认设置：

TabbedViewNavigator #tabBar
{
    chromeColor: #484848;
    color: #FFFFFF;
    fontSize: 20;
    fontWeight: normal;
    iconPlacement: top;
    interactionMode: mouse;
    skinClass: ClassReference("spark.skins.mobile.TabbedViewNavigatorTabBarSkin");
    textShadowAlpha: .65;
    textShadowColor: #000000;
}

注：TabbedViewNavigator组件中定义的tabBar其实是ButtonBar。移动应用中的Spark TabBar还未优化。知道这一点对个性化皮肤来说很重要，因为TabbedViewNavigatorTabBarSkin实际上包含了ButtonBarSkin。
    我可以在应用程序的<fx:style>标签中再次添加一条CSS规则，通过加入我自己的样式来个性化组件的外观：

TabbedViewNavigator #tabBar
{
    chromeColor: #229988;
    color: #CCCCCC;
    fontFamily: "Comic Sans MS";
    iconPlacement:left;
    textDecoration:underline;
}

现在，选项卡的字体变为Comic Sans，背景色也同ActionBar相搭（参看图4）。请记住，我不善于设计，但显而易见的是我们只需简单地在应用程序中加入CSS块就能够改变程序的外观。

图4 原始的示例应用程序（左）和设置过选项卡样式的应用程序（右）。
  以下给出选项卡式主应用程序文件的完整源代码。除了CSS以外，代码还包括在ViewNavigator对象中分别设置views.TrendsView、views.AttachView、views.CallView的firstView属性，这涉及到视图文件夹中的基本视图

<?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">
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";

s|ActionBar
        {
            chromeColor: #229988;
            titleAlign: center;
        }

s|ActionBar #titleDisplay
        {
            color: #CCCCCC;
            fontSize: 40;
            fontFamily: "Comic Sans MS";
        }

s|TabbedViewNavigator #tabBar
        {
            chromeColor: #229988;
            color: #CCCCCC;
            fontFamily: "Comic Sans MS";
            iconPlacement:left;
            textDecoration:underline;
        }
    </fx:Style>

<s:ViewNavigator id="trends" label="Trends" width="100%" height="100%" firstView="views.TrendsView" icon="@Embed('assets/column-chart-icon32.png')"/>
<s:ViewNavigator id="attach" label="Attach" width="100%" height="100%" firstView="views.AttachView" icon="@Embed('assets/paperclip-icon32.png')"/>
<s:ViewNavigator id="call" label="Call Center" width="100%" height="100%" firstView="views.CallView" icon="@Embed('assets/receptionist-icon32.png')"/>
</s:TabbedViewNavigatorApplication>

注：出于对简明性的考虑，上述例子包括MXML应用程序内部的样式。但是，通常情况下，建议创建单独的CSS文件来容纳您所有的样式，并在主应用程序文件中建立同CSS文件的关联。
   您可以下载本文中的示例文件并导入，从而能够研究该项目的完整代码。
下一步可以做什么
    现在您已经知道了为Flex移动应用程序设置样式有多容易了。以下是一些您需要记住的一般准则：
  · 如果您要设置颜色、文本、对齐方式、图标等，请使用CSS。
  · 如果您想要创建包含更多图形元素的外观，请使用FXG、自定义皮肤、图片。
  ·如果需要设置样式的设备有不同的每英寸点数（DPI）密度，那么为每种DPI载入不同的CSS滤镜或FXG中特殊的skin类。不同的设备和不同的操作系统都会出现DPI不同的情况。IPhone 4 或者iPad （两者皆为320 DPI）的密度都比安卓NexusOne（240 DPI）和摩托罗拉Xoom（160 DPI）高。Flex 4.5内置多种功能，可以支持不同的屏幕密度。如果想了解更多，一定要阅读贾森圣乔斯（Jason San Jose）的文章《Flexmobile skins – Part 2: Handling different pixel densities》。
注：如果您面向的是某一具体设备，而且您不知道它的DPI，那么在Flash Builder的运行配置或者调试配置对话框中选择该设备，在设备上运行该程序（或者通过模拟器），并通过跟踪语句或在调试器中观察runtimeDPI在根移动应用程序之外（TabbedViewNavigatorApplication或者ViewNavigatorApplication皆可）的属性。
  特别注意阅读贾森圣乔斯（JasonSan Jose）系列文章中的其他部分。这一系列文章以《Flex移动皮肤——第一部分：皮肤优化基础知识》作为开篇，所提供的大量信息有助于用FXG定制皮肤及创建有密度感知功能的皮肤。

<ignore_js_op>

4.gif (22.19 KB, 下载次数: 9)

图四

<ignore_js_op>

3.gif (18.65 KB, 下载次数: 2)

图三

<ignore_js_op>

2.gif (19.04 KB, 下载次数: 4)

图二

<ignore_js_op>

1.gif (19.09 KB, 下载次数: 3)

图一