Flex4中Slider 自定义Flex3中的labels样式

转自
http://prsync.com/adobe/creating-a-custom-skin-to-add-tics-and-labels-to-spark-sliders-7788/

There has been some recent discussion over how to get tics and labels on Spark Sliders. Halo Sliders contained built in support for tics and labels, however, this feature does not yet exist for Spark Sliders. While built in support may be added in the future, for the time being the way to get tics and labels for a Spark Slider is to implement a custom skin. With the new Spark skinning architecture, this is relatively easy to do.

For example, to get labels for an HSlider, you could simply copy, rename, and then modify the HSliderSkin.mxml file.

First, copy HSliderSkin.mxml and give it a new name, i.e. CustomHSliderSkin.mxml. When you define the HSlider in your application, use the skinClass style to point to the new skin.

<s:HSlider skinClass="CustomHSliderSkin"/>

This assumes that the CustomHSliderSkin.mxml file is in the same directory as the application file. If it is in another directory, the full path to the file must be specified. For example, if the CustomHSliderSkin.mxml file were in a sub-directory named "skins", you would specify it as "skins.CustomHSliderSkin".

In the CustomHSliderSkin file you can add labels in any number of ways. For this example I will use the SimpleText component, but really anything from a BitmapGraphic to a Rect could be used.

To add a label that displays the string "min" to the left hand side of the HSlider, you can define a SimpleText component as follows:

<s:SimpleText id="leftLabel" left="0" top="0" text="min"/>

Since the SimpleText component above has been positioned flush with the left hand side of the container, the HSlider track needs to be moved over so that they do not overlap. To do so, set the "left" style constraint on the track to a value that gives the label enough room to be displayed and provides the spacing that you find aesthetically pleasing. In this case a value of 30 would be sufficient to display the label "min".

Using the same approach, a label can be added to the right side of the HSlider. For example:

<s:SimpleText id="rightLabel" right="0" top="0" text="max"/>

Again, space needs to be given to ensure that the HSlider track and the right side SimpleText component do not overlap. In this case, setting the "right" style constraint on the HSlider track to 30 will work as well.

The skin would therefore contain the following:

<!-- Defines the left label -->
<s:SimpleText id="leftLabel" left="0" top="0" text="min"/>

<!--- Defines the skin class for the CustomHSliderSkin's track. The default skin class is CustomHSliderTrackSkin. -->
<s:Button id="track" left="30" right="30" top="0" bottom="0" skinClass="skins.CustomHSliderTrackSkin" />

<!--- Defines the skin class for the CustomHSliderSkin's thumb. The default skin class is CustomHSliderThumbSkin. -->
<s:Button id="thumb" top="0" bottom="0" width="11" height="11" skinClass="skins.CustomHSliderThumbSkin" />

<!-- Defines the right label -->
<s:SimpleText id="rightLabel" right="0" top="0" text="max"/>

By modifying the style constrains used above you can move the labels above or below the HSlider track in whatever way you want. For example, for labels on top of the HSlider, you could simply move the Slider track and thumb down by setting the top style constraint for both to 20, and leaving left and right as 0. In that case, the skin would contain the following:

<!-- Defines the top left label -->
<s:SimpleText id="leftLabel" left="0" top="0" text="min"/>

<!--- Defines the skin class for the CustomHSliderSkin's track. The default skin class is CustomHSliderTrackSkin. -->
<s:Button id="track" left="0" right="0" top="20" bottom="0" skinClass="skins.CustomHSliderTrackSkin" />

<!--- Defines the skin class for the CustomHSliderSkin's thumb. The default skin class is CustomHSliderThumbSkin. -->
<s:Button id="thumb" top="20" bottom="0" width="11" height="11" skinClass="skins.CustomHSliderThumbSkin" />

<!-- Defines the top right label -->
<s:SimpleText id="rightLabel" right="0" top="0" text="max"/>

In this way, labels of any type can be very quickly added to an HSlider, and of course the same approach can be used to VSlider.

To add tics, a similar approach is used.

Like labels, tics can be implemented in any number of ways. The most straight forward way is to simply insert them manually at the desired position on the Slider track.

Anything can be used as a tic - a BitmapGraphic, a Rect, a Line - anything the developer chooses. In keeping with the label example above, the following method can be used to insert tics using a SimpleText component. The hardest part of adding tics is determining where they should be placed. In the example below, the x property is used to specify the location of the tic.

These tics would be useful for an HSlider with the snapInterval property set to 25 since they are positioned in a rough correspondence to multiples of 25 on a HSlider track with a minimum of 0 and maximum of 100, i.e. the HSlider would look like this in the application:

<s:HSlider minimum="0" maximum="100" snapInterval="25" skinClass="CustomHSliderSkin"/>

CustomHSliderSkin.mxml would then contain the following:

<!-- Define tics -->
<s:SimpleText text="|" x="34"/>
<s:SimpleText text="|" x="66"/>
<s:SimpleText text="|" x="99"/>
<s:SimpleText text="|" x="131"/>
<s:SimpleText text="|" x="164"/>

<s:SimpleText id="leftLabel" left="0" top="12" text="min"/>

<!--- Defines the skin class for the CustomHSliderSkin's track. The default skin class is CustomHSliderTrackSkin. -->
<s:Button id="track" left="30" right="30" top="12" bottom="0" skinClass="spark.skins.spark.HSliderTrackSkin" />

<!--- Defines the skin class for the CustomHSliderSkin's thumb. The default skin class is CustomHSliderThumbSkin. -->
<s:Button id="thumb" top="12" bottom="0" width="11" height="11" skinClass="spark.skins.spark.HSliderThumbSkin" />

<s:SimpleText id="rightLabel" right="0" top="12" text="max"/>

With this approach, tics and labels can be manually added to a Slider skin.