Flex scroller皮肤的使用

Flex4 scroller 自定义皮肤

十月 15, 2010

Posted by admin

flex4里引入了sparkSkin, spark包里的可视控件可以通过指定skinClass的值来修改控件的默认皮肤。

下面是一个如何自定义某个scrollbar的外观的例子。

新建一个flex project, 名字假设为myScrollerbar, 编辑mxml内容：

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

			   xmlns:s="library://ns.adobe.com/flex/spark"

			   xmlns:mx="library://ns.adobe.com/flex/mx" width="300" height="400" >

	<fx:Declarations>

		<!-- Place non-visual elements (e.g., services, value objects) here -->

 

	</fx:Declarations>

	<s:Scroller percentWidth="100" percentHeight="100" id="scroller">

		<s:Group>

			<s:Rect percentWidth="100" height="800">

				<s:fill>

					<s:LinearGradient rotation='250'>

						<s:GradientEntry color='0x000000' ratio='0'/>

						<s:GradientEntry color='0xffffff' ratio='1'/>

					</s:LinearGradient>

				</s:fill>

			</s:Rect>

		</s:Group>

	</s:Scroller>

</s:Application>

编译运行程序，截图如下：

假设我们现在想改变右边verticalScrollbar的样子， 并且已经准备好了所需要的图片：
up.png: 向上箭头的图片
down.png: 向下箭头的图片
thumb.png: 拖动条的图片

Scroller.verticalScrollbar 实际上是由4部分构成，
thumb： 拖动条 (对应的类为spark.components.Button)
track: 拖动条下面的那个轨道 (对应的类为spark.components.Button)
decrementButton： 向上箭头按钮(对应的类为spark.components.Button)
incrementButton: 向下箭头按钮(对应的类为spark.components.Button)

对整个verticalScrollbar我们需要一个mxml来定义其皮肤， 里面每个部分也分别需要一个mxml来定义皮肤，那么我们一共需要5个mxml文件

下面是这5个mxml皮肤文件的定义：

1. MyVScrollBarSkin.mxml

<?xml version="1.0" encoding="utf-8"?>

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"

			 xmlns:s="library://ns.adobe.com/flex/spark"

			 xmlns:mx="library://ns.adobe.com/flex/mx"

			 alpha.disabled="0.5"

			 alpha.inactive="0.5"

 

>

	<s:states>

		<s:State name="normal" />

		<s:State name="disabled" />

		<s:State name="inactive" />

	</s:states>

 

	<fx:Metadata>

		<![CDATA[

		[HostComponent("spark.components.VScrollBar")]

		]]>

	</fx:Metadata>

 

 

	<s:Button id="track" top="30" bottom="30" focusEnabled="false" horizontalCenter="0"

			  skinClass="skins.MyVScrollBarTrackSkin"

	/>

	<s:Button id="thumb" focusEnabled="false" horizontalCenter="0"

			  skinClass="skins.MyVScrollBarThumbSkin"

 	/>

	<s:Button id="decrementButton" top="0"  focusEnabled="false" horizontalCenter="0"

			  skinClass="skins.MyVScrollBarDecrementButtonSkin"

			  />

	<s:Button id="incrementButton" bottom="0"  focusEnabled="false" horizontalCenter="0"

			  skinClass="skins.MyVScrollBarIncrementButtonSkin"

			  />

</s:SparkSkin>

2.MyVScrollBarThumbSkin.mxml

<?xml version="1.0" encoding="utf-8"?>

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"

		xmlns:s="library://ns.adobe.com/flex/spark"

		xmlns:mx="library://ns.adobe.com/flex/mx"

		xmlns:pwg="com.perfectworld.gamelibs.pwgraphics.*"

 

		>

	<fx:Metadata>

		[HostComponent("spark.components.Button")]

	</fx:Metadata>

	<s:states>

		<s:State name="up" />

		<s:State name="over" />

		<s:State name="down" />

		<s:State name="disabled" />

	</s:states>

 

	<mx:Image  source="@Embed('thumb.png')" />

 

</s:Skin>

3.MyVScrollBarTrackSkin.mxml

<?xml version="1.0" encoding="utf-8"?>

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"

		xmlns:s="library://ns.adobe.com/flex/spark"

		xmlns:mx="library://ns.adobe.com/flex/mx"

		xmlns:pwg="com.perfectworld.gamelibs.pwgraphics.*"

 

		>

	<fx:Metadata>

		[HostComponent("spark.components.Button")]

	</fx:Metadata>

	<s:states>

		<s:State name="up" />

		<s:State name="over" />

		<s:State name="down" />

		<s:State name="disabled" />

	</s:states>

 

	<s:Rect top="0" bottom="0" width="29">

		<s:fill>

			<s:SolidColor  color="0x131313" alpha="0.3" />

		</s:fill>

	</s:Rect>

 

</s:Skin>

4.MyVScrollBarDecrementButtonSkin.mxml

<?xml version="1.0" encoding="utf-8"?>

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"

		xmlns:s="library://ns.adobe.com/flex/spark"

		xmlns:mx="library://ns.adobe.com/flex/mx"

		xmlns:pwg="com.perfectworld.gamelibs.pwgraphics.*"

		>

	<fx:Metadata>

		[HostComponent("spark.components.Button")]

	</fx:Metadata>

	<s:states>

		<s:State name="up" />

		<s:State name="over" />

		<s:State name="down" />

		<s:State name="disabled" />

	</s:states>

	<mx:Image  source="@Embed('up.png')"/>

</s:Skin>

5. MyVScrollBarIncrementButtonSkin.mxml

<?xml version="1.0" encoding="utf-8"?>

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"

		xmlns:s="library://ns.adobe.com/flex/spark"

		xmlns:mx="library://ns.adobe.com/flex/mx"

		xmlns:pwg="com.perfectworld.gamelibs.pwgraphics.*"

		>

	<fx:Metadata>

		[HostComponent("spark.components.Button")]

	</fx:Metadata>

	<s:states>

		<s:State name="up" />

		<s:State name="over" />

		<s:State name="down" />

		<s:State name="disabled" />

	</s:states>

 

	<mx:Image  source="@Embed('down.png')"/>

</s:Skin>

皮肤文件定义好了，那么现在修改mySCrollbar.mxml为 scroller.verticalScrollbar指定skinClass:

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

			   xmlns:s="library://ns.adobe.com/flex/spark"

			   xmlns:mx="library://ns.adobe.com/flex/mx" width="300" height="400" creationComplete="init()">

	<fx:Declarations>

		<!-- Place non-visual elements (e.g., services, value objects) here -->

 

	</fx:Declarations>

	<fx:Script>

		<![CDATA[

			import skins.MyVScrollBarSkin;

			private function init():void {

				scroller.verticalScrollBar.setStyle("skinClass", MyVScrollBarSkin);

				scroller.verticalScrollBar.setStyle( "fixedThumbSize", true);

			}

		]]>

	</fx:Script>

 

	<s:Scroller percentWidth="100" percentHeight="100" id="scroller">

		<s:Group>

			<s:Rect percentWidth="100" height="800">

				<s:fill>

					<s:LinearGradient rotation='250'>

						<s:GradientEntry color='0x000000' ratio='0'/>

						<s:GradientEntry color='0xffffff' ratio='1'/>

					</s:LinearGradient>

				</s:fill>

			</s:Rect>

		</s:Group>

	</s:Scroller>

</s:Application>

主要是加了这2行代码：

scroller.verticalScrollBar.setStyle("skinClass", MyVScrollBarSkin);

scroller.verticalScrollBar.setStyle( "fixedThumbSize", true);

最后的样子如下：