定义移动设备应用程序中的导航控件、标题控件和操作控件
配置 ActionBar 控件
ViewNavigator 容器可以定义 ActionBar 控件。ActionBar 控件为标题控件、导航控件和操作控件提供了标准的区域。通过该控件，可以定义可在应用程序任何位置或特定视图中访问的全局控件。例如，可以使用 ActionBar 控件添加主页按钮、搜索按钮或其他选项。
使用 ActionBar 控件定义操作栏区域。ActionBar 控件可以定义三种不同的区域，如下图所示：
-
导航区域
包含可用于在该部分进行导航的组件。例如，可以在导航区域中定义主页按钮。
可以使用 navigationContent 属性定义导航区域中所显示的组件。可以使用 navigationLayout 属性定义导航区域的布局。
-
标题区域
包含字符串（标题文本）或组件。如果指定组件，则不能指定标题字符串。
可以使用 title 属性指定在标题区域中所显示的字符串。可以使用 titleContent 属性定义在标题区域中所显示的组件。可以使用 titleLayout 属性定义标题区域的布局。如果为 titleContent 属性指定一个值，则 ActionBar 外观将忽略 title 属性。
-
操作区域
包含多个组件，用于定义用户可在视图中执行的操作。例如，可以在操作区域中定义搜索或刷新按钮。
可以使用 actionContent 属性定义在操作区域中所显示的组件。可以使用 actionLayout 属性定义操作区域的布局。
尽管 Adobe 建议您按上文所述方法使用导航、标题和操作区域，但对于放置在这些区域中的组件并没有任何限制。
在 ViewNavigatorApplication、ViewNavigator 或 View 容器中设置 ActionBar 属性
示例：在应用程序级别自定义 Spark ActionBar 控件
<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\SparkActionBarSimple.mxml -->
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
firstView="views.MobileViewHome">
<fx:Script>
<![CDATA[
protected function button1_clickHandler(event:MouseEvent):void {
// Perform a refresh
}
]]>
</fx:Script>
<s:navigationContent>
<s:Button label="Home" click="navigator.popToFirstView();"/>
</s:navigationContent>
<s:actionContent>
<s:Button label="Refresh" click="button1_clickHandler(event);"/>
</s:actionContent>
</s:ViewNavigatorApplication>
此示例在 ActionBar 控件的导航内容区域中定义“主页”按钮，在操作内容区域定义“刷新”按钮。
下面的示例定义了 MobileViewHome View 容器，该容器定义应用程序的第一个视图。View 容器定义了标题字符串“Home View”，但不重写 ActionBar 控件的导航内容或操作内容区域。
<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\views\MobileViewHome.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="Home View">
<s:layout>
<s:VerticalLayout paddingTop="10"/>
</s:layout>
<s:Label text="Home View"/>
<s:Button label="Submit"/>
</s:View>
示例：在 View 容器中自定义 ActionBar 控件
<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\SparkActionBarOverride.mxml -->
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
firstView="views.MobileViewHomeOverride">
<fx:Script>
<![CDATA[
protected function button1_clickHandler(event:MouseEvent):void {
navigator.popToFirstView();
}
protected function button2_clickHandler(event:MouseEvent):void {
// Handle search
}
]]>
</fx:Script>
<s:navigationContent>
<s:Button icon="@Embed(source='assets/Home.png')"
click="button1_clickHandler(event);"/>
</s:navigationContent>
<s:actionContent>
<s:Button icon="@Embed(source='assets/Search.png')"
click="button2_clickHandler(event);"/>
</s:actionContent>
</s:ViewNavigatorApplication>
此应用程序的第一个视图是 MobileViewHomeOverride 视图。MobileViewHomeOverride 视图定义 Button 控件，用以导航到定义“Search”页面的另一个 View 容器：
<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\views\MobileViewHomeOverride.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="Home View">
<s:layout>
<s:VerticalLayout paddingTop="10"/>
</s:layout>
<fx:Script>
<![CDATA[
// Navigate to the Search view.
protected function button1_clickHandler(event:MouseEvent):void {
navigator.pushView(SearchViewOverride);
}
]]>
</fx:Script>
<s:Label text="Home View"/>
<s:Button label="Search" click="button1_clickHandler(event)"/>
</s:View>
定义“Search”页面的 View 容器将重写 ActionBar 控件的标题区域和操作区域，如下所示：
<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\views\SearchViewOverride.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:layout>
<s:VerticalLayout paddingTop="10"
paddingLeft="10" paddingRight="10"/>
</s:layout>
<fx:Script>
<![CDATA[
protected function button1_clickHandler(event:MouseEvent):void {
// Perform a search.
}
]]>
</fx:Script>
<!-- Override the title to insert a TextInput control. -->
<s:titleContent>
<s:TextInput text="Enter search text ..." textAlpha="0.5"
width="250"/>
</s:titleContent>
<!-- Override the action area to insert a Search button. -->
<s:actionContent>
<s:Button label="Search" click="button1_clickHandler(event);"/>
</s:actionContent>
<s:Label text="Search View"/>
<s:TextArea text="Search results appear here ..."
height="75%"/>
</s:View>
下图显示了此视图的 ActionBar 控件：
由于“Search”视图不重写 ActionBar 控件的导航区域，因此导航区域仍显示“Home”按钮。
隐藏 ActionBar 控件
可以通过将 View.actionBarVisible 属性设置为 false，来隐藏任何视图中的 ActionBar 控件。默认情况下，actionBarVisible 属性的值为 true，表示显示 ActionBar 控件。
<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\SparkSingleSectionNoAB.mxml -->
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
firstView="views.HomeView"
creationComplete="creationCompleteHandler(event);">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function creationCompleteHandler(event:FlexEvent):void {
// Access the ViewNavigator using the ViewNavigatorApplication.navigator property.
navigator.hideActionBar();
}
]]>
</fx:Script>
</s:ViewNavigatorApplication>
您可以定义隐藏 ActionBar 或使 ActionBar 可见时 ActionBar 的自定义效果。默认情况下，ActionBar 在显示或隐藏时使用 Animate 效果。可以通过重写 ViewNavigator.createActionBarHideEffect() 和 ViewNavigator.createActionBarShowEffect() 方法来更改默认效果。在应用 ActionBar 隐藏效果后，将其visible 和 includeInLayout 属性设置为 false，使视图布局中不再包括该控件。
浙公网安备 33010602011771号