定义移动设备应用程序中的导航控件、标题控件和操作控件

配置 ActionBar 控件

ViewNavigator 容器可以定义 ActionBar 控件。ActionBar 控件为标题控件、导航控件和操作控件提供了标准的区域。通过该控件，可以定义可在应用程序任何位置或特定视图中访问的全局控件。例如，可以使用 ActionBar 控件添加主页按钮、搜索按钮或其他选项。

对于仅有一个部分（即只有一个 ViewNavigator 容器）的移动设备应用程序而言，所有视图共享同一个操作栏。对于带有多个部分（即带有多个 ViewNavigator 容器）的移动设备应用程序而言，每个部分都会定义各自的操作栏。

使用 ActionBar 控件定义操作栏区域。ActionBar 控件可以定义三种不同的区域，如下图所示：

A. 导航区域 B. 标题区域 C. 操作区域
ActionBar 区域

  • 导航区域

    包含可用于在该部分进行导航的组件。例如，可以在导航区域中定义主页按钮。

    可以使用 navigationContent 属性定义导航区域中所显示的组件。可以使用 navigationLayout 属性定义导航区域的布局。

  • 标题区域

    包含字符串（标题文本）或组件。如果指定组件，则不能指定标题字符串。

    可以使用 title 属性指定在标题区域中所显示的字符串。可以使用 titleContent 属性定义在标题区域中所显示的组件。可以使用 titleLayout 属性定义标题区域的布局。如果为 titleContent 属性指定一个值，则 ActionBar 外观将忽略 title 属性。

  • 操作区域

    包含多个组件，用于定义用户可在视图中执行的操作。例如，可以在操作区域中定义搜索或刷新按钮。

    可以使用 actionContent 属性定义在操作区域中所显示的组件。可以使用 actionLayout 属性定义操作区域的布局。

尽管 Adobe 建议您按上文所述方法使用导航、标题和操作区域，但对于放置在这些区域中的组件并没有任何限制。

在 ViewNavigatorApplication、ViewNavigator 或 View 容器中设置 ActionBar 属性

可以在 ViewNavigatorApplication 容器、ViewNavigator 容器或各 View 容器中设置用于定义 ActionBar 控件内容的属性。View 容器的优先级最高，其次是 ViewNavigator，再其次是 ViewNavigatorApplication 容器。因此，在 ViewNavigatorApplication 容器中设置的属性将应用于整个应用程序，但您可以在 ViewNavigator 或 View 容器中重写这些属性。
注： ActionBar 控件与 ViewNavigator 相关联，因此专用于移动设备应用程序的单个部分。因此，无法从 TabbedViewNavigatorApplication 和 TabbedViewNavigator 容器定义 ActionBar。

示例：在应用程序级别自定义 Spark ActionBar 控件

下面的示例展示了一个移动设备应用程序的主应用程序文件： 
<?xml version="1.0" encoding="utf-8"?>
<!-- containersmobileSparkActionBarSimple.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"?>
<!-- containersmobileviewsMobileViewHome.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 控件

本示例使用带有一个部分的主应用程序文件，用以在 ViewNavigatorApplication 容器的导航区域中定义“主页”按钮，并在操作区域中定义“搜索”按钮： 
<?xml version="1.0" encoding="utf-8"?>
<!-- containersmobileSparkActionBarOverride.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"?>
<!-- containersmobileviewsMobileViewHomeOverride.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"?>
<!-- containersmobileviewsSearchViewOverride.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 控件。

使用 ViewNavigator.hideActionbar() 方法可以对 ViewNavigator 所控制的所有视图隐藏 ActionBar 控件，如下例所示： 
<?xml version="1.0" encoding="utf-8"?>
<!-- containersmobileSparkSingleSectionNoAB.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，使视图布局中不再包括该控件。

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/fuland/p/3629352.html