Slider是常用控件。Adobe官方提供的控件中，fl库所带的控件不好用，便有兄弟《》。Flex库中也提供有Slider控件，但是Flex控件太重量级，动不动就是一二百K的尺寸，很多场合没法用。并且，Flex的Slider也不容易定制，比如，它的highlight track比track要低1像素，这在很多情况下是不合适的。
本文修改项目的Slider控件代码，提供一个小巧的Slider控件解决方案，本方案具有以下优势：
（1）小巧。不依赖于fl控件或Flex库，使用本控件不会让程序尺寸增加多少；
（2）容易定制。很容易定制 highlight track、track和thumb部分；
（3）可数据绑定。
MinimalComps项目提供了简单的Slider控件，该控件源代码为：
View Code /* * * Slider.as * Keith Peters * version 0.9.1 * * Abstract base slider class for HSlider and VSlider. * * Copyright (c) 2010 Keith Peters * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. */ package com.bit101.components { import flash.display.DisplayObjectContainer; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import flash.geom.Rectangle; public class Slider extends Component { protected var _handle:Sprite; private var _back:Sprite; private var _backClick: Boolean = true; protected var _value: Number = 0; protected var _max: Number = 100; protected var _min: Number = 0; protected var _orientation: String; protected var _tick: Number = 1; public static const HORIZONTAL: String = "horizontal"; public static const VERTICAL: String = "vertical"; /* * * Constructor * @param orientation Whether the slider will be horizontal or vertical. * @param parent The parent DisplayObjectContainer on which to add this Slider. * @param xpos The x position to place this component. * @param ypos The y position to place this component. * @param defaultHandler The event handling function to handle the default event for this component (change in this case). */ public function Slider(orientation: String = Slider.HORIZONTAL, parent:DisplayObjectContainer = null, xpos: Number = 0, ypos: Number = 0, defaultHandler:Function = null) { _orientation = orientation; super(parent, xpos, ypos); if(defaultHandler != null) { addEventListener(Event.CHANGE, defaultHandler); } } /* * * Initializes the component. */ override protected function init():void { super.init(); if(_orientation == HORIZONTAL) { setSize(100, 10); } else { setSize(10, 100); } } /* * * Creates and adds the child display objects of this component. */ override protected function addChildren():void { _back = new Sprite(); _back.filters = [getShadow(2, true)]; addChild(_back); _handle = new Sprite(); _handle.filters = [getShadow(1)]; _handle.addEventListener(MouseEvent.MOUSE_DOWN, onDrag); _handle.buttonMode = true; _handle.useHandCursor = true; addChild(_handle); } /* * * Draws the back of the slider. */ protected function drawBack():void { _back.graphics.clear(); _back.graphics.beginFill(Style.BACKGROUND); _back.graphics.drawRect(0, 0, _width, _height); _back.graphics.endFill(); if(_backClick) { _back.addEventListener(MouseEvent.MOUSE_DOWN, onBackClick); } else { _back.removeEventListener(MouseEvent.MOUSE_DOWN, onBackClick); } } /* * * Draws the handle of the slider. */ protected function drawHandle():void { _handle.graphics.clear(); _handle.graphics.beginFill(Style.BUTTON_FACE); if(_orientation == HORIZONTAL) { _handle.graphics.drawRect(1, 1, _height - 2, _height - 2); } else { _handle.graphics.drawRect(1, 1, _width - 2, _width - 2); } _handle.graphics.endFill(); positionHandle(); } /* * * Adjusts value to be within minimum and maximum. */ protected function correctValue():void { if(_max > _min) { _value = Math.min(_value, _max); _value = Math.max(_value, _min); } else { _value = Math.max(_value, _max); _value = Math.min(_value, _min); } } /* * * Adjusts position of handle when value, maximum or minimum have changed. * TODO: Should also be called when slider is resized. */ protected function positionHandle():void { var range: Number; if(_orientation == HORIZONTAL) { range = _width - _height; _handle.x = (_value - _min) / (_max - _min) * range; } else { range = _height - _width; _handle.y = _height - _width - (_value - _min) / (_max - _min) * range; } } // / // public methods // / /* * * Draws the visual ui of the component. */ override public function draw():void { super.draw(); drawBack(); drawHandle(); } /* * * Convenience method to set the three main parameters in one shot. * @param min The minimum value of the slider. * @param max The maximum value of the slider. * @param value The value of the slider. */ public function setSliderParams(min: Number, max: Number, value: Number):void { this.minimum = min; this.maximum = max; this.value = value; } // / // event handlers // / /* * * Handler called when user clicks the background of the slider, causing the handle to move to that point. Only active if backClick is true. * @param event The MouseEvent passed by the system. */ protected function onBackClick(event:MouseEvent):void { if(_orientation == HORIZONTAL) { _handle.x = mouseX - _height / 2; _handle.x = Math.max(_handle.x, 0); _handle.x = Math.min(_handle.x, _width - _height); _value = _handle.x / (width - _height) * (_max - _min) + _min; } else { _handle.y = mouseY - _width / 2; _handle.y = Math.max(_handle.y, 0); _handle.y = Math.min(_handle.y, _height - _width); _value = (_height - _width - _handle.y) / (height - _width) * (_max - _min) + _min; } dispatchEvent(new Event(Event.CHANGE)); } /* * * Internal mouseDown handler. Starts dragging the handle. * @param event The MouseEvent passed by the system. */ protected function onDrag(event:MouseEvent):void { stage.addEventListener(MouseEvent.MOUSE_UP, onDrop); stage.addEventListener(MouseEvent.MOUSE_MOVE, onSlide); if(_orientation == HORIZONTAL) { _handle.startDrag( false, new Rectangle(0, 0, _width - _height, 0)); } else { _handle.startDrag( false, new Rectangle(0, 0, 0, _height - _width)); } } /* * * Internal mouseUp handler. Stops dragging the handle. * @param event The MouseEvent passed by the system. */ protected function onDrop(event:MouseEvent):void { stage.removeEventListener(MouseEvent.MOUSE_UP, onDrop); stage.removeEventListener(MouseEvent.MOUSE_MOVE, onSlide); stopDrag(); } /* * * Internal mouseMove handler for when the handle is being moved. * @param event The MouseEvent passed by the system. */ protected function onSlide(event:MouseEvent):void { var oldValue: Number = _value; if(_orientation == HORIZONTAL) { _value = _handle.x / (width - _height) * (_max - _min) + _min; } else { _value = (_height - _width - _handle.y) / (height - _width) * (_max - _min) + _min; } if(_value != oldValue) { dispatchEvent(new Event(Event.CHANGE)); } } // / // getter/setters // / /* * * Sets / gets whether or not a click on the background of the slider will move the handler to that position. */ public function set backClick(b: Boolean):void { _backClick = b; invalidate(); } public function get backClick(): Boolean { return _backClick; } /* * * Sets / gets the current value of this slider. */ public function set value(v: Number):void { _value = v; correctValue(); positionHandle(); // This has the potential to set up an infinite loop if two sliders are listening to each other's change // events to sync to each other. Tentitively trying it out... dispatchEvent(new Event(Event.CHANGE)); } public function get value(): Number { return Math.round(_value / _tick) * _tick; } /* * * Gets / sets the maximum value of this slider. */ public function set maximum(m: Number):void { _max = m; correctValue(); positionHandle(); } public function get maximum(): Number { return _max; } /* * * Gets / sets the minimum value of this slider. */ public function set minimum(m: Number):void { _min = m; correctValue(); positionHandle(); } public function get minimum(): Number { return _min; } /* * * Gets / sets the tick value of this slider. This round the value to the nearest multiple of this number. */ public function set tick(t: Number):void { _tick = t; } public function get tick(): Number { return _tick; } } }
然而，MinimalComps的Slider控件的外观（）很简单，见下图。
由于外观直接写死了，没办法换皮肤，因此，难以用于生产环境。
下面是我的改写版本：
View Code /* * * Slider.as * Keith Peters * version 0.9.10 * * Abstract base slider class for HSlider and VSlider. * * Copyright (c) 2011 Keith Peters * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. * * version 1.0 * By. xiaotie@geblab.com * Changes: [2012-02-11] make it skinable */ package geb.controls { import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import flash.geom.Rectangle; import geb.common.BaseComponent; [Event(name="change", type="flash.events.Event")] public class Slider extends BaseComponent { [Bindable] public var thumb:Sprite; [Bindable] public var track:Sprite; [Bindable] public var trackHighlight:Sprite; [Bindable] public var orientation: String = "horizontal"; public var trackClickable: Boolean = true; [Bindable] public var ignoreThumbSize: Boolean = false; protected var _value: Number = 0; protected var _max: Number = 100; protected var _min: Number = 0; protected var _tick: Number = 0.01; public static const HORIZONTAL: String = "horizontal"; public static const VERTICAL: String = "vertical"; /* * * Initializes the component. */ override protected function init():void { super.init(); if(orientation == HORIZONTAL) { setSize(width, height); } else { setSize(width, height); } } /* * * Creates and adds the child display objects of this component. */ override protected function addChildren():void { super.addChildren(); } /* * * Adjusts value to be within minimum and maximum. */ protected function correctValue():void { if(_max > _min) { _value = Math.min(_value, _max); _value = Math.max(_value, _min); } else { _value = Math.max(_value, _max); _value = Math.min(_value, _min); } } private function get thumbSize(): Number { if(thumb == null || ignoreThumbSize == true) return 0; else if(orientation == HORIZONTAL) { return thumb.width; } else { return thumb.height; } } /* * * Adjusts position of handle when value, maximum or minimum have changed. * TODO: Should also be called when slider is resized. */ protected function updateDislpay():void { var range: Number; var highlightRange: Number; var pos: Number; var ts: Number = thumbSize; if(orientation == HORIZONTAL) { range = _width - ts; pos = (_value - _min) / (_max - _min) * range; highlightRange = pos + ts * 0.5; if(thumb!= null) { thumb.x = pos - (ignoreThumbSize ? thumb.width * 0.5 : 0); thumb.y = 0.5 * (this.height - thumb.height); } if(trackHighlight != null) { trackHighlight.width = pos + 0.5 * ts; trackHighlight.height = Math.min(height,trackHighlight.height); trackHighlight.y = Math.max(0, 0.5 * (height - trackHighlight.height)); if(trackHighlight is BaseComponent) { BaseComponent(trackHighlight).invalidate( false); } } if(track != null) { track.width = width; track.height = Math.min(height,track.height); track.y = Math.max(0, 0.5 * (height - track.height)); if(track is BaseComponent) { BaseComponent(track).invalidate( false); } } } else { range = _height - ts; pos = height - ts - (_value - _min) / (_max - _min) * range; highlightRange = pos + ts * 0.5; if(thumb != null) { thumb.x = 0.5 * (this.width - thumb.width); thumb.y = pos - (ignoreThumbSize ? thumb.height * 0.5 : 0); } if(trackHighlight != null) { trackHighlight.width = Math.min(width,trackHighlight.width); trackHighlight.y = pos + 0.5 * ts; trackHighlight.height = height - trackHighlight.y; trackHighlight.x = Math.max(0, 0.5 * (width - trackHighlight.width)); if(trackHighlight is BaseComponent) { BaseComponent(trackHighlight).invalidate( false); } } if(track != null) { track.height = height; track.width = Math.min(width,track.width); track.x = Math.max(0, 0.5 * (width - track.width)); if(track is BaseComponent) { BaseComponent(track).invalidate( false); } } } if(track != null && this.contains(track) == false) { addChild(track); if(trackClickable) { track.useHandCursor = true; track.buttonMode = true; track.addEventListener(MouseEvent.MOUSE_DOWN, onBackClick); } else { track.removeEventListener(MouseEvent.MOUSE_DOWN, onBackClick); } } if(trackHighlight != null && this.contains(trackHighlight) == false) { addChild(trackHighlight); if(trackClickable) { trackHighlight.useHandCursor = true; trackHighlight.buttonMode = true; trackHighlight.addEventListener(MouseEvent.MOUSE_DOWN, onBackClick); } else { trackHighlight.removeEventListener(MouseEvent.MOUSE_DOWN, onBackClick); } } if(thumb != null && this.contains(thumb) == false) { thumb.addEventListener(MouseEvent.MOUSE_DOWN, onDrag); thumb.buttonMode = true; thumb.useHandCursor = true; addChild(thumb); } } // / // public methods // / /* * * Draws the visual ui of the component. */ override public function draw():void { super.draw(); updateDislpay(); } /* * * Convenience method to set the three main parameters in one shot. * @param min The minimum value of the slider. * @param max The maximum value of the slider. * @param value The value of the slider. */ public function setSliderParams(min: Number, max: Number, value: Number):void { this.minimum = min; this.maximum = max; this.value = value; } // / // event handlers // / /* * * Handler called when user clicks the background of the slider, causing the handle to move to that point. Only active if backClick is true. * @param event The MouseEvent passed by the system. */ protected function onBackClick(event:MouseEvent):void { var ts: Number = thumbSize; var pos: Number; if(orientation == HORIZONTAL) { pos = mouseX - ( ignoreThumbSize ? 0 : thumb.width * 0.5); pos = Math.max(pos, 0); pos = Math.min(pos, _width - ts); value = pos / (width - ts) * (_max - _min) + _min; } else { pos = mouseY - ( ignoreThumbSize ? 0 : thumb.height * 0.5); pos = Math.max(pos, 0); pos = Math.min(pos, _height - ts); value = (_height - ts - pos) / (height - ts) * (_max - _min) + _min; } dispatchEvent(new Event(Event.CHANGE)); } /* * * Internal mouseDown handler. Starts dragging the handle. * @param event The MouseEvent passed by the system. */ protected function onDrag(event:MouseEvent):void { stage.addEventListener(MouseEvent.MOUSE_UP, onDrop); stage.addEventListener(MouseEvent.MOUSE_MOVE, onSlide); if(orientation == HORIZONTAL) { var xStart: Number = ignoreThumbSize? - thumb.width * 0.5 : 0; thumb.startDrag( false, new Rectangle(xStart, thumb.y, _width - thumbSize, 0)); } else { var yStart: Number = ignoreThumbSize? - thumb.height * 0.5 : 0; thumb.startDrag( false, new Rectangle(thumb.x, yStart, 0, _height - thumbSize)); } } /* * * Internal mouseUp handler. Stops dragging the handle. * @param event The MouseEvent passed by the system. */ protected function onDrop(event:MouseEvent):void { stage.removeEventListener(MouseEvent.MOUSE_UP, onDrop); stage.removeEventListener(MouseEvent.MOUSE_MOVE, onSlide); stopDrag(); } /* * * Internal mouseMove handler for when the handle is being moved. * @param event The MouseEvent passed by the system. */ protected function onSlide(event:MouseEvent):void { var oldValue: Number = _value; var pos: Number; if(orientation == HORIZONTAL) { pos = ignoreThumbSize ? (thumb.x + thumb.width * 0.5) : thumb.x; value = pos / (width - thumbSize) * (_max - _min) + _min; } else { pos = ignoreThumbSize ? (thumb.y + thumb.height * 0.5) : thumb.y; value = (height - thumbSize - pos) / (height - thumbSize) * (_max - _min) + _min; } if(value != oldValue) { dispatchEvent(new Event(Event.CHANGE)); } } // / // getter/setters // / /* * * Sets / gets whether or not a click on the background of the slider will move the handler to that position. */ public function set backClick(b: Boolean):void { trackClickable = b; invalidate(); } public function get backClick(): Boolean { return trackClickable; } /* * * Sets / gets the current value of this slider. */ [Bindable] public function set value(v: Number):void { _value = v; correctValue(); updateDislpay(); } [Bindable] public function get value(): Number { return Math.round(_value / _tick) * _tick; } /* * * Gets the value of the slider without rounding it per the tick value. */ public function get rawValue(): Number { return _value; } [Bindable] /* * * Gets / sets the maximum value of this slider. */ public function set maximum(m: Number):void { _max = m; correctValue(); updateDislpay(); } public function get maximum(): Number { return _max; } [Bindable] /* * * Gets / sets the minimum value of this slider. */ public function set minimum(m: Number):void { _min = m; correctValue(); updateDislpay(); } public function get minimum(): Number { return _min; } /* * * Gets / sets the tick value of this slider. This round the value to the nearest multiple of this number. */ public function set tick(t: Number):void { _tick = t; } public function get tick(): Number { return _tick; } } }
BaseComponent类见我的其它博文：《只学一点点：我的技术学习策略 》（http://www.cnblogs.com/xiaotie/archive/2011/12/10/2283384.html）和《使用铁哥SmartFlash快速开发方案：66行代码搞定抽奖程序！》（http://www.cnblogs.com/xiaotie/archive/2011/06/15/2081386.html）。
下面演示Slider控件的使用：
View Code <? xml version="1.0" encoding="utf-8" ?> < common:Application xmlns:fx ="http://ns.adobe.com/mxml/2009" xmlns:local ="*" xmlns:common ="geb.common.*" xmlns:gc ="geb.controls.*" xmlns:shapes ="geb.shapes.*" xmlns:containers ="geb.containers.*" fillMode ="false" width ="300" height ="300" > < fx:Declarations > <!-- 定义slider1外观的三个形状 --> < shapes:Rectangle id ="trackHighlight" color ="0x125894" height ="5" /> < shapes:Rectangle id ="track" color ="0x343434" height ="5" /> < shapes:Ellipse id ="thumb" color ="0x999999" width ="10" height ="10" /> <!-- 定义slider3外观的三个形状 --> < shapes:Rectangle id ="trackHighlight2" color ="0x125894" width ="5" /> < shapes:Rectangle id ="track2" color ="0x343434" width ="5" /> < shapes:Ellipse id ="thumb2" color ="0x999999" width ="10" height ="10" /> <!-- 定义slider2外观的三个图片 --> < gc:Image id ="thumbImage" height ="10" width ="10" source ="@Embed(source='assets/sliderAssets/thumbSkin.png')" /> < gc:Image id ="trackHighlightImage" height ="4" width ="10" source ="@Embed(source='assets/sliderAssets/trackHighlightSkin.png')" /> < gc:Image id ="trackImage" height ="4" width ="10" source ="@Embed(source='assets/sliderAssets/trackSkin.png')" /> </ fx:Declarations > < shapes:Rectangle width ="{width}" height ="{height}" color ="0xEEEEEE" /> < gc:Slider id ="slider1" x ="50" y ="50" width ="70" height ="20" trackHighlight ="{trackHighlight}" track ="{track}" thumb ="{thumb}" ignoreThumbSize ="false" > </ gc:Slider > < gc:Label x ="130" y ="50" autoSize ="true" text ="{slider1.value}" /> < gc:Slider id ="slider2" x ="50" y ="100" width ="70" height ="20" trackHighlight ="{trackHighlightImage}" value ="20" maximum ="50" track ="{trackImage}" thumb ="{thumbImage}" ignoreThumbSize ="true" > </ gc:Slider > < gc:Label x ="130" y ="100" autoSize ="true" text ="{slider2.value}" /> < gc:Slider id ="slider3" x ="50" y ="150" width ="10" height ="70" trackHighlight ="{trackHighlight2}" orientation ="vertical" track ="{track2}" thumb ="{thumb2}" ignoreThumbSize ="true" > </ gc:Slider > </ common:Application >
在线演示：
从上到下，可以看到三个Slider：
第一个Slider的皮肤由三个形状组成，track是黑色矩形，highlightTrack是蓝色矩形，thumb是圆。highlightTrack和track都规定了高度，这个高度，就是显示出来的highlightTrack和track高度，如果想让highlightTrack和track变粗，改变它的高度即可。Thumb规定了长和宽，如果修改thumb的大小，改变它的长宽即可，当然，如果长宽不等，则就是椭圆而非圆形了。
第二个Slider是由三个图片组成的，以应对复杂精致的皮肤，所使用的三个图片如下：
使用不同的图片，便是不同的Slider外观。
第二个Slider和第一个Slider还有个不同，就是ignoreThumbSize属性为true。第一个Slider的thumb是圆形，把thumb拖到两端可以发现，thumb遮盖不住两端（如果是方形的thumb则没这个问题），因此，引入了ignoreThumbSize字段。ignoreThumbSize字段默认为false，当ignoreThumbSize为true时，以thumb的中线为定位基准，这样便可避免当thumb是圆形时移动到两端，盖不住track两端的情况。
第三个Slider的orientation设为vertical，因此，便是竖着的Slider。
Slider可供数据绑定，比如：
<gc:Label x="130" y="50" autoSize="true" text="{slider1.value}" />
通过这样简单的代码便可使slider1的值改变时，对应的Lable的文本也发生变化。
是不是既小巧、又易用又灵活呢？