Flex TileList自定義間距和theme樣式
更新時間:2009年06月16日 22:57:10 作者:
使用過TileList的朋友可能知道,該組件沒有Item與Item之間的間距設(shè)置。而且theme也沒有辦法象linkbar那樣設(shè)置樣式corner-radius改變形狀。
唯一的解決辦法就是重寫TileList組件中drawSelectionIndicator 和drawHighlightIndicator 。
/**
* Author Dante
* Email:rubbish86630@yahoo.com.cn
* CreatedTime:2009.04.13
* Description:
* 該組件實現(xiàn)選中和劃過theme樣式,并且添加間距
* **/
package myLib {
import flash.display.Graphics;
import flash.display.Sprite;
import mx.controls.TileList;
import mx.controls.listClasses.IListItemRenderer;
public class MyTileList extends TileList {
[Bindable]
private var _verticalGap:Number = 0;
[Bindable]
private var _horizontalGap:Number = 0;
public function MyTileList() {
super();
}
/**
* 重寫鼠標劃過高亮
* @indicator:Sprite
* @x:Number
* @y:Number
* @width:Number
* @height:Number
* @color:uint
* @itemRenderer:IListItemRenderer
* return void
* **/
override protected function drawHighlightIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void {
//繪圖
var g:Graphics = indicator.graphics;
g.clear();
g.beginFill(color);
//畫橢圓
g.drawEllipse(0, 0, width - _horizontalGap, height - _verticalGap);
g.endFill();
indicator.x = x;
indicator.y = y;
}
/**
* 重寫選中高亮
* @indicator:Sprite
* @x:Number
* @y:Number
* @width:Number
* @height:Number
* @color:uint
* @itemRenderer:IListItemRenderer
* return void
* **/
override protected function drawSelectionIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void {
//繪圖
var g:Graphics = indicator.graphics;
g.clear();
g.beginFill(color);
//畫橢圓
g.drawEllipse(0, 0, width - _horizontalGap, height - _verticalGap);
g.endFill();
indicator.x = x;
indicator.y = y;
}
//=============================
// set and get
//=============================
public function set verticalGap(value:Number):void {
_verticalGap = value;
}
public function get verticalGap():Number {
return _verticalGap;
}
public function set horizontalGap(value:Number):void {
_horizontalGap = value;
}
public function get horizontalGap():Number {
return _horizontalGap;
}
}
}
復(fù)制代碼 代碼如下:
/**
* Author Dante
* Email:rubbish86630@yahoo.com.cn
* CreatedTime:2009.04.13
* Description:
* 該組件實現(xiàn)選中和劃過theme樣式,并且添加間距
* **/
package myLib {
import flash.display.Graphics;
import flash.display.Sprite;
import mx.controls.TileList;
import mx.controls.listClasses.IListItemRenderer;
public class MyTileList extends TileList {
[Bindable]
private var _verticalGap:Number = 0;
[Bindable]
private var _horizontalGap:Number = 0;
public function MyTileList() {
super();
}
/**
* 重寫鼠標劃過高亮
* @indicator:Sprite
* @x:Number
* @y:Number
* @width:Number
* @height:Number
* @color:uint
* @itemRenderer:IListItemRenderer
* return void
* **/
override protected function drawHighlightIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void {
//繪圖
var g:Graphics = indicator.graphics;
g.clear();
g.beginFill(color);
//畫橢圓
g.drawEllipse(0, 0, width - _horizontalGap, height - _verticalGap);
g.endFill();
indicator.x = x;
indicator.y = y;
}
/**
* 重寫選中高亮
* @indicator:Sprite
* @x:Number
* @y:Number
* @width:Number
* @height:Number
* @color:uint
* @itemRenderer:IListItemRenderer
* return void
* **/
override protected function drawSelectionIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void {
//繪圖
var g:Graphics = indicator.graphics;
g.clear();
g.beginFill(color);
//畫橢圓
g.drawEllipse(0, 0, width - _horizontalGap, height - _verticalGap);
g.endFill();
indicator.x = x;
indicator.y = y;
}
//=============================
// set and get
//=============================
public function set verticalGap(value:Number):void {
_verticalGap = value;
}
public function get verticalGap():Number {
return _verticalGap;
}
public function set horizontalGap(value:Number):void {
_horizontalGap = value;
}
public function get horizontalGap():Number {
return _horizontalGap;
}
}
}
相關(guān)文章
Flex 編程注意之Flex Complier參數(shù)
由于上一篇文章《Flex編程注意之Namespace的用法》引出了Flex編譯時自帶的兩個參數(shù):-namespace -include-namespace,正好想到可以寫一篇關(guān)于Flex Complier時的一些自定義參數(shù)。2009-07-07Flex 動態(tài)綁定BindingUtils.bindProperty
Flex 動態(tài)綁定BindingUtils.bindProperty實現(xiàn)代碼。2009-06-06基于WebService的數(shù)據(jù)訪問(上) Flex與.NET互操作(二)
Flex提供了<mx:WebService>、<mx:HTTPService>和<mx:RemoteObject>標簽來直接訪問遠程數(shù)據(jù),這用于與各種不同語言環(huán)境開發(fā)提供的遠程服務(wù)端數(shù)據(jù)源(如WebService)進行數(shù)據(jù)交互通信顯得更加容易.2009-06-06Flex結(jié)合JavaScript讀取本地路徑的方法
鑒于adobe并沒有提供FileReference對瀏覽的文件的完整路徑的接口。只能采用JS和fileinput控件來獲取本地路徑了。2009-02-02