Feb 03 2011
Creating Bottom Navigation Bar Flex Mobile Part 2
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.
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);
}
}
}
}
}
[…] 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. […]
awesome! Thanks very much…
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/
What’s up, all the time i used to check webpage posts here in the
early hours in the daylight, as i love to learn more
and more.