Flex4 scroller 自定義皮膚

十月 15, 2010 Posted by admin

flex4里引入了sparkSkin, spark包里的可視控件可以通過(guò)指定skinClass的值來(lái)修改控件的默認(rèn)皮膚。

?

下面是一個(gè)如何自定義某個(gè)scrollbar的外觀的例子。

新建一個(gè)flex project, 名字假設(shè)為myScrollerbar, 編輯mxml內(nèi)容：

<?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>

編譯運(yùn)行程序，截圖如下：

假設(shè)我們現(xiàn)在想改變右邊verticalScrollbar的樣子， 并且已經(jīng)準(zhǔn)備好了所需要的圖片：
up.png: 向上箭頭的圖片
down.png: 向下箭頭的圖片
thumb.png: 拖動(dòng)條的圖片

Scroller.verticalScrollbar 實(shí)際上是由4部分構(gòu)成，
thumb： 拖動(dòng)條 (對(duì)應(yīng)的類(lèi)為spark.components.Button)
track: 拖動(dòng)條下面的那個(gè)軌道 (對(duì)應(yīng)的類(lèi)為spark.components.Button)
decrementButton： 向上箭頭按鈕(對(duì)應(yīng)的類(lèi)為spark.components.Button)
incrementButton: 向下箭頭按鈕(對(duì)應(yīng)的類(lèi)為spark.components.Button)

對(duì)整個(gè)verticalScrollbar我們需要一個(gè)mxml來(lái)定義其皮膚， 里面每個(gè)部分也分別需要一個(gè)mxml來(lái)定義皮膚，那么我們一共需要5個(gè)mxml文件

下面是這5個(gè)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>

皮膚文件定義好了，那么現(xiàn)在修改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);

最后的樣子如下：

轉(zhuǎn)載于:https://www.cnblogs.com/jzm53550629/p/3245090.html

與50位技術(shù)專(zhuān)家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的Flex scroller皮肤的使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。