How do I move the ActionBar to the bottom of a Flex mobile app?

Not yet rated

Tags:

Problem

By default, the ActionBar in a Flex mobile application appears at the top of the View, and the TabBar of a TabbedViewNavigator appears at the bottom. I want the ActionBar at the bottom of the View, and the TabBar to appear at the top.

Solution

Create a custom skin for TabbedViewNavigatorApplication to make the contentGroup and tabBar exchange places then create a custom skin for ViewNavigator to make the contentGroup and ActionBar exchange places.

Detailed explanation

Create a new skin based on ViewNavigatorSkin and find the layoutContents() method, in there you will find the following:

if (actionBar.includeInLayout)

{
        actionBarHeight = Math.min(actionBar.getPreferredBoundsHeight(), unscaledHeight);
        actionBar.setLayoutBoundsSize(unscaledWidth, actionBarHeight);
        actionBar.setLayoutBoundsPosition(0, 0);
        actionBarHeight = actionBar.getLayoutBoundsHeight();

        // update ActionBar backgroundAlpha when in overlay mode
        var backgroundAlpha:Number = (_isOverlay) ? 0.75 : 1;
        actionBar.setStyle("backgroundAlpha", backgroundAlpha);
}

if (contentGroup.includeInLayout)
{
        // If the hostComponent is in overlay mode, the contentGroup extends
        // the entire bounds of the navigator and the alpha for the action
        // bar changes
        // If this changes, also update validateEstimatedSizesOfChild
        var contentGroupHeight:Number = (_isOverlay) ? unscaledHeight : Math.max(unscaledHeight - actionBarHeight, 0);
        var contentGroupPosition:Number = (_isOverlay) ? 0 : actionBarHeight;

        contentGroup.setLayoutBoundsSize(unscaledWidth, contentGroupHeight);
        contentGroup.setLayoutBoundsPosition(0, actionBarHeight);
}

In there you change:

        actionBar.setLayoutBoundsPosition(0, 0);

to:

        actionBar.setLayoutBoundsPosition(0, unscaledHeight - actionBarHeight);

and:

        contentGroup.setLayoutBoundsPosition(0, actionBarHeight);

to:

        contentGroup.setLayoutBoundsPosition(0, 0);

Then create a skin based on TabbedViewNavigatorApplication and find the layoutContents() method, like in the last skin, we are gonna change the setLayoutBoundsPosition on tabBar and contentGroup like this:

        tabBar.setLayoutBoundsPosition(0, unscaledHeight - tabBarHeight);

to:

        tabBar.setLayoutBoundsPosition(0, 0);

and:

        contentGroup.setLayoutBoundsPosition(0, tabBarHeight);

Then create a css file were you set the skinClass of the TabbedViewNavigatorApplication and ViewNavigator to the two the skins and "import" the css via <fx:Style source="cssFile" />

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.