效果预览:
由于Label控件没有borderStyle属性,也就是它不支持边框与背景图.所以我们可以通过扩展Label控件来实现边框与背景图!其他不支持边框或者背景的控件如:Text、Image用同样方法可以扩展它。下面运用到自定义Flex控件的[Style]元素标签。
下表描述了[Style]元数据标签的属性：
| 选项 | 类型 | 描述 |
|---|---|---|
| name |
String | (必须) 指定样式名称。 |
| type |
指定样式属性值的数据类型。如果类型不是一个像Number、Date这样的ActionScript类型，就要使用packageName.className。 | |
| arrayType |
如果type是Array，那么arrayType指定Array元素的数据类型。如果类型不是一个像Number、Date这样的ActionScript类型，就要使用?packageName.className。 | |
| format |
指定属性单元。比如，如果你指定类型为”Number”，你可能指定format=”Length”表示该样式定义像素长度。或者，你指定type=”uint”，设置format=”Color”，表示该样式定义一个RGB颜色。 | |
| enumeration |
指定该样式属性可能的枚举列表值。 | |
| inherit |
指定该属性是否为继承的。有效的值为yes和no。该属性引用CSS继承结构，而非面向对象的继承结构。所有的子类都自动用面向对象的继承从超类继承定义的样式属性。一些样式属性以CSS继承的方式继承样式属性。如果你在父容器上定义了一个可继承的样式属性，它的孩子都会继承该样式属性。比如，如果你把一个Panel容器的fontFamily定义成Times，该容器的所有孩子都会使用Times作为fontFamily，除非它们覆盖了这个属性。如果设置了非可继承的样式，比如在父容器上设置textDecoration，那么只有这个父容器而非它的孩子使用这个样式。更多关于可继承的样式属性的信息，请阅读?关于样式继承。 | |
| states |
对于皮肤属性，你可以使用这个样式指定组件多种状态中的一种状态。例如，Slider.thumbSkin样式的定义使用下面的[Style]元数据标签：[Style(name="thumbSkin",type="Class",inherit="no",states="disabled,down, over,up")] 这一行说明你可以使用Slider.thumbSkin样式指定Slider控件的disable,over,和 up 的状态。更多信息，请阅读?创建皮肤. |
LabelBorder.as
- package?
- {
- ? ??import?mx.controls.Label;
- ? ??//自定义样式
- ? ??[Style(name="borderColor",?type="uintformat="Colorinherit="no")]??
- "borderWidth"Number"Length ? ??[Style(name?=?"borderAlphatype?=?format?=?inherit?=?")]?
- ? ?
- ? ??public?class?LabelBorder?extends?Label
- ? ??{
- ? ? ? ??public?function?LabelBorder()
- ? ? ? ??{
- ? ? ? ? ? ??super();
- ? ? ? ??}
- ? ? ? ?
- ? ? ? ??override?protected?function?updateDisplayList(w:Number,?h:Number):void
- ? ? ? ? ? ??super.updateDisplayList(w,?h);
- ? ? ? ? ? ??graphics.clear();
- ? ? ? ? ? ??graphics.lineStyle(getStyle('borderWidth'),?getStyle('borderColor'borderAlphafalse);
- ? ? ? ? ? ??var?x:Number?= -(getStyle(')?/?2);
- ? ? ? ? ? ? var y:Number = -(getStyle('borderWidth')?/?2);
- ? ? ? ? ? ??var?width:Number?=?textWidth?+?getStyle(')?+?3;
- ? ? ? ? ? ??var?height:Number?=?textHeight?+?getStyle(');
- ? ? ? ? ? ??graphics.drawRect(x,?y,?width,?height);
- ? ??}
- }
LabelImage.as
? ??import?mx.controls.Label;?
? ??import?flash.display.Loader;
? ??import?flash.net.URLRequest;
//自定义背景属性
"imgPath"String ? ??public?class?LabelImage?extends?Label
? ? ? ??private?var?_loader:Loader?=?new?Loader();
? ? ? ??public?function?LabelImage()
? ? ? ? ? ??_loader.load(new?URLRequest(getStyle('imgPath')));
? ? ? ? ? ??addChild(_loader);
? ? ? ? ? ??_loader.x?= -15;
? ? ? ? ? ??setChildIndex(_loader,?0);
LabelBorderDemo.mxml
- <?xml?version="1.0"?encoding="utf-8"?>
- <mx:Application?xmlns:mx="http://www.adobe.com/2006/mxml"?xmlns:jian="*"?layout="absolute">
- ? ? <jian:LabelBorder?
- ? ? ? ??x="180"?y="62"
- ? ? ? ??text="这里是扩展的自定义标签 ? ? ? ??borderAlpha="{aBar.value}"? ?
- ? ? ? ??borderWidth="{wBar.value} ? ? ? ??borderColor="{colorTool.selectedColor}"?/>
- <jian:LabelImage text="这里是自定义背景标签" imgPath="mood.gif" x="180" y="100"?/>
- ? ? ? ? ??
- ? ? <mx:Label?x="500"10"?text="边框颜色:/>??
- ? ? <mx:Label x="500" y="50" text="边框透明度:"?/>??
- "100"边框宽度: ? ? ??
- ? ? <mx:ColorPicker id="colorTool" x="570" y="10" color="#FDFDFD"? ? ? <mx:HSlider?id="aBar"?x="70"?minimum="0"?maximum="1"?value="?snapInterval="0.1"?liveDragging="true" ? ? <mx:HSlider id="wBar" x="500" y="120" minimum="0" maximum="6" snapInterval="1" value="1" liveDragging="true"/>?
- </mx:Application>
转载自：http://www.gnria.com/flex/flex-label-border.html