Adobe Flex Flash developer blog

Adventures of a Flex developer

TabbedViewNavigatorApplication tabBar location

Wednesday 25 May 2011 by jonnysparkplugs

One of the Application types available in Flash builder 4.5 is the TabbedViewNavigatorApplication.  Its a pretty simple but useful starting point which gives you, your navigation for free by creating a button bar at the bottom of the application.

As seen here:





The tab bar as seen in many other applications and in the android OS, as seen in the official twitter app and the managed application view in android:

 



The only problem with the Tabbed View Navigator Application there doesn't seem to be any easy way to change the position of the tab bar. I would have expected this to be a style setting but weirdly its not included in the 4.5 sdk.

As i'm mostly developing apps for android i'd like to keep it consistent. Although not simple the tab bar can be moved quite easily by creating an Application skin and adding the following code:

   /**  
    * @private  
    */  
   override protected function createChildren():void  
   {  
     tabbedNavigator = new TabbedViewNavigator();  
     tabbedNavigator.id = "tabbedNavigator";  
     addChild(tabbedNavigator);  
           tabbedNavigator.addEventListener(FlexEvent.UPDATE_COMPLETE,onChange);  
   }  
   /**  
    * @private   
    */   
   override protected function measure():void  
   {      
     super.measure();  
     measuredWidth = tabbedNavigator.getPreferredBoundsWidth();  
     measuredHeight = tabbedNavigator.getPreferredBoundsHeight();  
   }  
      /**  
       * @private  
       */  
      override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void  
      {  
           super.layoutContents(unscaledWidth, unscaledHeight);  
           tabbedNavigator.setLayoutBoundsSize(unscaledWidth, unscaledHeight);  
           tabbedNavigator.setLayoutBoundsPosition(0,0);  
      }  
      private function reDrawTB():void  
      {  
           tabbedNavigator.y = tabbedNavigator.tabBar.height;  
           tabbedNavigator.tabBar.y = -tabbedNavigator.tabBar.height;            
      }  

You can download the project file here and the compiled apk

Filed under having  

0 comments:

Post a Comment