效果預覽:
由於Label控件沒有borderStyle屬性,也就是它不支持邊框與背景圖.所以我們可以通過擴展Label控件來實現邊框與背景圖!其他不支持邊框或者背景的控件如:Text、Image用同樣方法可以擴展它。下面運用到自定義Flex控件的[Style]元素標籤。
下表描述了[Style]元數據標籤的屬性：
| 選項 | 類型 | 描述 |
|---|---|---|
|
name |
String | (必須) 指定樣式名稱。 |
|
type |
String | 指定樣式屬性值的數據類型。如果類型不是一個像Number、Date這樣的ActionScript類型，就要使用packageName.className。 |
|
arrayType |
String | 如果type是Array，那麼arrayType指定Array元素的數據類型。如果類型不是一個像Number、Date這樣的ActionScript類型，就要使用 packageName.className。 |
|
format |
String | 指定屬性單元。比如，如果你指定類型爲”Number”，你可能指定format=”Length”表示該樣式定義像素長度。或者，你指定type=”uint”，設置format=”Color”，表示該樣式定義一個RGB顏色。 |
|
enumeration |
String | 指定該樣式屬性可能的枚舉列表值。 |
|
inherit |
String | 指定該屬性是否爲繼承的。有效的值爲yes和no。該屬性引用CSS繼承結構，而非面向對象的繼承結構。所有的子類都自動用面向對象的繼承從超類繼承定義的樣式屬性。一些樣式屬性以CSS繼承的方式繼承樣式屬性。如果你在父容器上定義了一個可繼承的樣式屬性，它的孩子都會繼承該樣式屬性。比如，如果你把一個Panel容器的fontFamily定義成Times，該容器的所有孩子都會使用Times作爲fontFamily，除非它們覆蓋了這個屬性。如果設置了非可繼承的樣式，比如在父容器上設置textDecoration，那麼只有這個父容器而非它的孩子使用這個樣式。更多關於可繼承的樣式屬性的信息，請閱讀 關於樣式繼承。 |
|
states |
String |
對於皮膚屬性，你可以使用這個樣式指定組件多種狀態中的一種狀態。例如，Slider.thumbSkin樣式的定義使用下面的[Style]元數據標籤：[Style(name="thumbSkin",
type="Class", inherit="no", states="disabled, down, over, up")] 這一行說明你可以使用Slider.thumbSkin樣式指定Slider控件的disable, down, over, 和 up 的狀態。更多信息，請閱讀 創建皮膚. |
LabelBorder.as
- package
- {
- import mx.controls.Label;
- //自定義樣式
- [Style(name="borderColor", type="uint", format="Color", inherit="no")]
- [Style(name="borderWidth", type="Number", format="Length", inherit="no")]
- [Style(name = "borderAlpha", type = "Number", format = "Length", inherit = "no")]
- 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'), getStyle('borderAlpha'), false);
- var x:Number = -(getStyle('borderWidth') / 2);
- var y:Number = -(getStyle('borderWidth') / 2);
- var width:Number = textWidth + getStyle('borderWidth') + 3;
- var height:Number = textHeight + getStyle('borderWidth');
- graphics.drawRect(x, y, width, height);
- }
- }
- }
LabelImage.as
- package
- {
- import mx.controls.Label;
- import flash.display.Loader;
- import flash.net.URLRequest;
- //自定義背景屬性
- [Style(name="imgPath", type="String", inherit="no")]
- public class LabelImage extends Label
- {
- private var _loader:Loader = new Loader();
- public function LabelImage()
- {
- super();
- }
- override protected function updateDisplayList(w:Number, h:Number):void
- {
- super.updateDisplayList(w, h);
- _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" y="10" text="邊框顏色:" />
- <mx:Label x="500" y="50" text="邊框透明度:" />
- <mx:Label x="500" y="100" text="邊框寬度:" />
- <mx:ColorPicker id="colorTool" x="570" y="10" color="#FDFDFD" />
- <mx:HSlider id="aBar" x="500" y="70" minimum="0" maximum="1" value="1" 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>