Feb 03 2011

Creating Bottom Navigation Bar Flex Mobile Part 2

Published by at 7:39 pm under Flex,Mobile

In my earlier post i wrote about a way how you can create a bottom navigation bar in your Flex mobile applications. But recently i came across TabbedMobileApplication which has a Tabbar component built in but the tabbar is on top.

It was fairly easy for me to modify the skin for this application’s TabbedViewNavigator component so that it would have the tabbar in bottom and the viewnavigator on top.

This is how the application looks,



I just copied the skin file from TabbedViewNavigatorSkin and modified it little to achieve the result.

This is how my custom skin class looks as below, you can download the project file here.

package skins {
    import spark.components.ButtonBar;
    import spark.components.Group;
    import spark.skins.mobile.TabbedViewNavigatorSkin;
    import spark.skins.spark.ButtonBarSkin;
   
    public class MySkin extends TabbedViewNavigatorSkin {
       
        public function MySkin() {
            super();
        }
       
       
        protected override function createChildren():void{
            contentGroup = new Group();
            contentGroup.id = "contentGroup";
           
            tabBar = new ButtonBar();
            tabBar.id = "tabBar";
            tabBar.requireSelection = true;
            tabBar.setStyle("skinClass", ButtonBarSkin);
            tabBar.height = 40;
            addChild(tabBar);
            addChild(contentGroup);
           
        }
       
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
           
            var tabBarHeight:Number = 0;
           
            if (tabBar.includeInLayout)
            {
                tabBarHeight = Math.min(tabBar.getPreferredBoundsHeight(), unscaledHeight);
                tabBar.setLayoutBoundsSize(unscaledWidth, tabBarHeight);
               
                tabBarHeight = tabBar.getLayoutBoundsHeight();
            }
           
            if (currentState == "portraitAndOverlay" || currentState == "landscapeAndOverlay")
            {
                tabBar.alpha = .6;
               
                if (contentGroup.includeInLayout)
                {
                    contentGroup.setLayoutBoundsSize(unscaledWidth, unscaledHeight);
                    contentGroup.setLayoutBoundsPosition(0, 0);
                }
            }
            else
            {
                tabBar.alpha = 1.0;
               
                if (contentGroup.includeInLayout)
                {
                    var contentGroupHeight:Number = Math.max(unscaledHeight - tabBarHeight, 0);
                   
                    contentGroup.setLayoutBoundsSize(unscaledWidth, contentGroupHeight);
                    contentGroup.setLayoutBoundsPosition(0, 0);
                }
                if (tabBar.includeInLayout){
                    tabBar.setLayoutBoundsPosition(0, contentGroupHeight);
                }
            }
        }
       
    }
}

3 responses so far

3 Responses to “Creating Bottom Navigation Bar Flex Mobile Part 2”

  1. […] ok i have to admit, putting code like this doesn’t make any sense but you will have to trust me that when you run this application you will have a bottom navigation bar which stays in place all the time during lifetime of your application. There might be other ways to do it and i would like to know but so far i have found this way to be effective. It would be cool if inside the MobileApplication.as there would be this functionality to add a bottombar and then every view for that button has a “master” viewstack instead of one single viewstack as it is the case right now. There is one more way of achieving this you can read about it here. […]

  2. mateoon 12 Apr 2011 at 2:10 pm

    awesome! Thanks very much…

  3. Brian Bishopon 02 Nov 2011 at 5:09 am

    You can also add ViewNavigator components to the application in mxml, and they will then appear at the bottom. See dev girls blog: http://devgirl.org/2011/04/11/flash-builder-4-5-mobile-highlights/

Trackback URI | Comments RSS

Leave a Reply