Archive for February, 2011

Feb 03 2011

Creating Bottom Navigation Bar Flex Mobile Part 2

Published by 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);
                }
            }
        }
       
    }
}

4 responses so far