This it’s an working example of how you can customize your tab bar navigation.
So, we have a MXML file, style file and a skin script. Let’s see them all.In MXML file we just link style.css file and I have used a TabNavigator component with 3 tabs. Style.css files contains to css classes one for TabNavigator as a component and for a single tab.To change the skin of a flex component you have to take the actionscript file from Flex SDK folder, move it to your application and customize it. Don’t forget to link this file to you new css class.For example I create a new folder in my aplication assets/skin and I put there TabSkin.as file; in css class I refer to this file for al available states lik ethis:
disabledSkin: ClassReference("assets.skins.TabSkin"); downSkin: ClassReference("assets.skins.TabSkin"); overSkin: ClassReference("assets.skins.TabSkin"); selectedDisabledSkin: ClassReference("assets.skins.TabSkin"); selectedDownSkin: ClassReference("assets.skins.TabSkin"); selectedOverSkin: ClassReference("assets.skins.TabSkin"); selectedUpSkin: ClassReference("assets.skins.TabSkin"); upSkin: ClassReference("assets.skins.TabSkin");
I hope it’s a clear exemple, for more details, please, leave us a comment.
You can also download the source of this example from here.
| ||
|
Tags: actions script, custom, style, tab bar navigation
This post was written by Stelian Crisan
Views: 19562
Articles
I read your article on skinning a Flex Tabbar. Glad you posted this. Thanks. Do you know if it’s possible to have each tab skinned differently? If so, where and how do you specify how each tab should be skinned.
I’ve been given graphics specific to what each tab should have, including it’s up, down, over, and disabled state for each tab.
Thanks for you assistance.
Hi Greg,
I know that you can have different skin for each action (up, down, over, disabled,selectedUp, selectedDown, selectedOver, selectedDisabled), also you can add more styles an use them for skins but I don’t know if you could have different skin for each tab. You can have different renderer for tab content (for each canvas content).
If you need to know more you can also have a look at a very good component made by Doug McCune here: SuperTabNavigator.
Hello,
I would love to see the source of this custom skinning tab bar if possible, as there’s no link to it anymore, it seems.
Hope you can help, thanks
Hi Yui,
The source in the zip archive posted at the bottom of the article, search for “CustomSkinForTabBar” on this page.
@Greg I’m trying to accomplish individual styles for tabs as well. We need a clean way to add a styleName attribute to the tabBar’s tabs.
I think you can do different style arguments for each tab, in this case you need to know how many tabs you have. So, there are a few steps:
1. Go to your .css file and on tab class add something like this:
bgColorTab1: #ff0000;
bgColorTab2: #00ff00;
bgColorTab3: #0000ff;
and so on for each argument you need to change.
2. Go to your skin file and define you new arguments
var bgColorTabs:Array= new Array(getStyle(“bgColorTab1″), getStyle(“bgColorTab2″), getStyle(“bgColorTab3″));
3. Find the tab index. In skin file you can add this code:
var xTab:int = 0;
if ( parent != null )
{
xTab = Math.round(parent.x/w);
}
4. Use the colors. In skin file change for example off color:
case “upSkin”:
case “overSkin”:
{
….
drawRoundRect(
1, 2, w – 4, h – 3, cr2,
uint(bgColorTabs[xTab]), 1);
…
}
I think that is the solution, for now. I will try to make an nice example in a few days, but until then you can have a look on this solution at http://www.flexer.info/…/CustomSkinForTabBar2.swf
hello friends,
could we add images to tabs like different images for mouse over and mouse down ?
thx,