flex 4 scroller skin自定义2

根据前一篇的理论，想要自定义一个scroller皮肤，最简易的。用于dropdownlist以及datagrid等组件。要求如下：

1.没有上下按钮

2.thumb（拖动条）宽度细一些

3.鼠标划过和按住的时候显示橙色#ff9900，其他时候是灰色#222222

4.确保加载到dropdownlist上时不影响其他功能。

经过测试，代码和效果图如下：

1.dropdownlist skin添加

s:Scroller skinClass="skins.skin_scroller"

2.新建皮肤skin_scroller,自定义VScrollBar皮肤

<!--- A vertical scrollbar that lets you control the portion of data that is displayed

when there is too much data to fit vertically in a display area.

The Scroller determines whether the vertical ScrollBar is visible. -->

<s:VScrollBar id="verticalScrollBar" visible="false" skinClass="skins.myVscrollBar" fixedThumbSize="false"/>

3.新建皮肤myVscrollBar

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

<!--

AdobE SYstemS INCORPORATED

NOTICE: Adobe permits you to use,modify,and distribute this file

in accordance with the terms of the license agreement accompanying it.

-->

<!--- The default skin class for the Spark VScrollBar component. The thumb and track skins are defined by the

VScrollBarThumbSkin and VScrollBarTrackSkin classes,respectively.

@see spark.components.VScrollBar

@see spark.skins.spark.VScrollBarThumbSkin

@see spark.skins.spark.VScrollBarTrackSkin

@langversion 3.0

@playerversion Flash 10

@playerversion AIR 1.5

@productversion Flex 4

-->

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

xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="15" minHeight="35"

alpha.disabled="0.5" alpha.inactive="0.5" >

<fx:Metadata>

<![CDATA[

/**

* @copy spark.skins.spark.ApplicationSkin#hostComponent

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

]]>

</fx:Metadata>

<fx:Script fb:purpose="styling">

/* Define the skin elements that should not be colorized.

For scroll bar,the skin itself is colorized but the individual parts are not. */

static private const exclusions:Array = ["track","thumb"];

/**

* @private

override public function get colorizeExclusions():Array {return exclusions;}

/**

* @private

override protected function initializationComplete():void

{

useChromeColor = true;

super.initializationComplete();

}

</fx:Script>

<s:states>

<s:State name="normal" />

<s:State name="disabled" />

<s:State name="inactive" />

</s:states>

<!--- The default skin class is VScrollBarTrackSkin.

@copy spark.components.supportClasses.TrackBase#track

@see spark.skins.spark.VScrollBarTrackSkin -->

<s:Button id="track" top="5" bottom="5" height="54"

focusEnabled="false" tabEnabled="false" visible="false"

skinClass="spark.skins.spark.VScrollBarTrackSkin" />

<!--- The default skin class is VScrollBarThumbSkin.

@copy spark.components.supportClasses.TrackBase#thumb

@see spark.skins.spark.VScrollBarThumbSkin -->

<s:Button id="thumb" skinClass="skins.skin_Vscroller_thumb" horizontalCenter="0" width="6"

focusEnabled="false" visible.inactive="false" tabEnabled="false"

</s:SparkSkin>

4.新建skin_Vscroller_thumb

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

<!--

AdobE SYstemS INCORPORATED

NOTICE: Adobe permits you to use,and distribute this file

in accordance with the terms of the license agreement accompanying it.

-->

<!--- The default skin class for the Spark Button component.

@see spark.components.Button

@langversion 3.0

@playerversion Flash 10

@playerversion AIR 1.5

@productversion Flex 4

-->

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

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

xmlns:fb="http://ns.adobe.com/flashbuilder/2009"

alpha.disabled="0.5">

<fx:Metadata>

<![CDATA[

/**

* @copy spark.skins.spark.ApplicationSkin#hostComponent

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

]]>

</fx:Metadata>

<fx:Script fb:purpose="styling">

<![CDATA[

import spark.components.Group;

/* Define the skin elements that should not be colorized.

For button,the graphics are colorized but the label is not. */

static private const exclusions:Array = ["labeldisplay"];

/**

* @private

override public function get colorizeExclusions():Array {return exclusions;}

/**

* @private

override protected function initializationComplete():void

{

useChromeColor = true;

super.initializationComplete();

}

]]>

</fx:Script>

<s:states>

<s:State name="up" />

<s:State name="over" />

<s:State name="down" />

<s:State name="disabled" />

</s:states>

<s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="0">

<s:fill>

<s:LinearGradient rotation="90">

<s:GradientEntry color="0x000000"

color.down="0xFFFFFF"

alpha="0.01"

alpha.down="0" />

<s:GradientEntry color="0x000000"

color.down="0xFFFFFF"

alpha="0.07"

alpha.down="0.5" />

</s:LinearGradient>

</s:fill>

</s:Rect>

<s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="0">

<s:fill>

<s:LinearGradient rotation="90">

<s:GradientEntry color="0x222222"

color.over="0xff9900"

color.down="0xee7700"

alpha="0.85" />

<s:GradientEntry color="0x222222"

color.over="0xff9900"

color.down="0xee7700"

alpha="0.85" />

</s:LinearGradient>

</s:fill>

</s:Rect>

<s:Rect id="highlightstroke" left="1" right="1" top="1" bottom="1" radiusX="0" excludeFrom="down">

<s:stroke>

<s:LinearGradientstroke rotation="90" weight="1">

<s:GradientEntry color="0x222222" alpha.over="0.22" />

</s:LinearGradientstroke>

</s:stroke>

</s:Rect>

<s:Rect id="hldownstroke1" left="1" right="1" top="1" bottom="1" radiusX="0" includeIn="down">

<s:stroke>

<s:LinearGradientstroke rotation="90" weight="1">

<s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0" />

<s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001" />

<s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011" />

<s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965" />

<s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651" />

</s:LinearGradientstroke>

</s:stroke>

</s:Rect>

<s:Rect id="hldownstroke2" left="2" right="2" top="2" bottom="2" radiusX="0" includeIn="down">

<s:stroke>

<s:LinearGradientstroke rotation="90" weight="1">

<s:GradientEntry color="0x000000" alpha="0.09" ratio="0.0" />

<s:GradientEntry color="0x000000" alpha="0.00" ratio="0.0001" />

</s:LinearGradientstroke>

</s:stroke>

</s:Rect>

</s:SparkButtonSkin>

flex 4 scroller skin自定义2

相关推荐