Spark TabBar with different image as skin for each button

Problem:

To show each tab in TabBar with  different images as skin

Solution :

Spark TabBar with dataprovider

<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]private var tabs:ArrayCollection = new ArrayCollection([
{label:’Fabric’,imageIcon:’color.png’,id:’FABRIC’},
{label:’Design’,imageIcon:’design.png’,id:’DESIGN’},
{label:’Color Contrast’,imageIcon:’fabric.png’,id:’COLOR_CONTRAST’},
{label:’Measurement’,imageIcon:’measurment.png’,id:’MEASUREMENT’}
]);
]]>
</fx:Script>

<s:TabBar skinClass=”TabBarSkin” dataProvider=”{tabs}” height=”25″
labelField=”label”/>

 

TabBarSkin.mxml

<s:DataGroup id=”dataGroup” width=”100%” height=”100%”>
<s:layout>
<s:ButtonBarHorizontalLayout gap=”-1″/>
</s:layout>
<s:itemRenderer>
<fx:Component>
<s:ButtonBarButton skinClass=”IconButtonSkin” />
</fx:Component>
</s:itemRenderer>
</s:DataGroup>

IconButtonSkin:

In script file:

— create Class type for each image

[Embed(source=”measurment.png”)]
private var image1:Class;
[Embed(source=”color.png”)]
private var image2:Class;
[Embed(source=”design.png”)]
private var image3:Class;
[Embed(source=”fabric.png)]
private var image4:Class;
— Override function  updateDisplayList

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);

var btnId:String = (this as Object).hostComponent.data.id;

var label:String = (this as Object).hostComponent.data.label;
labelDisplay.text = label ;

switch(btnId)
{
case ‘FABRIC’:
icon.source = image1 ;
break;
case ‘DESIGN’:
icon.source = image2 ;
break;
case ‘COLOR_CONTRAST’:
icon.source = image3;
break;
case ‘MEASUREMENT’:
icon.source = image4 ;
break;
}

this.width = this.hostComponent.width;
this.minWidth = this.hostComponent.width;
}

<s:Label id=”labelDisplay” visible=”false” includeInLayout=”false”
textAlign=”center”
verticalAlign=”middle”
maxDisplayedLines=”1″
horizontalCenter=”0″ verticalCenter=”1″
left=”10″ right=”10″ top=”2″ bottom=”2″>
</s:Label>

<s:BitmapImage id=”icon” smooth=”true” width=”91″ height=”101″ visible=”true”
/>

 

 

 

 

 

 

Advertisements
  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: