how to get ActionBar at the bottom in Flex mobile Application

ViewNavigator has ActionBar on top by default. I want move at the bottom.

navigator.actionbar.y=415 //gets actionbar at bottom

but in next view it comes back on top. You开发者_如何学C can set height in each view but it will show bar at the top for few seconds before bring back to bottom.

You want to skin the ViewNavigator to put the ActionBar on the bottom.

In the main app, you can add a style:

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";

    s|ViewNavigator {
        skinClass: ClassReference("CustomViewNavigatorSkin")
    }

</fx:Style>

Then, create your CustomViewNavigatorSkin class:

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark">
    <!-- host component -->
    <fx:Metadata>
        [HostComponent("spark.components.ViewNavigator")]
    </fx:Metadata>

    <!-- states -->
    <s:states>
        <s:State name="landscapeAndOverlay" />
        <s:State name="portraitAndOverlay" />
        <s:State name="landscape" />
        <s:State name="portrait" />
        <s:State name="disabled" />
        <s:State name="normal" />
    </s:states>

    <s:VGroup width="100%" height="100%">
        <s:VGroup id="contentGroup" height="100%" width="100%" />
        <s:ActionBar id="actionBar" width="100%" />
    </s:VGroup>

</s:Skin>