自定義List被選中項的外觀

自定義List被選中項的外觀

5.13.1.問題
爲List 組件中的選中項貼上一個圖片
5.13.2.解決方法
覆蓋ListBase 類的drawSelectionIndicator 方法並修改由該方法使用的指示器Sprite 對象。
5.13.3.討論
List 控件通過drawSelectionIndicator 方法爲在列表中選中的itemRenderer 創建外觀。
該方法的信息如下：

+展開

-ActionScript

override protected function drawSelectionIndicator(indicator:Sprite, x:Number, y:Number,width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void

所有的偏移量，大小，色彩信息都可以由x, y, width, height, 和color 屬性來設置。第一個參數indicator,是一個畫在選中項上的flash.display.Sprite 實例，最後一個參數itemRenderer 是將被選擇的條目渲染器。

實現方法的例子添加了一個圖片到指示器Sprite 對象，由於當itemRenderer 被撤消選中時sprite 對象被移除和銷燬，所以不必擔心後面的回收。

除了應用於所有高光的itemRenderer ， drawHighlightIndicatory 方法和drawSelectionIndicator 方法功能一樣， itemRenderer 被用戶鼠標滑過，但不選擇，請看：

+展開

-ActionScript

override protected function drawHighlightIndicator(indicator:Sprite, x:Number, y:Number,width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void

用一張單獨的圖片來表現高光，放到itemRenderer 的邊緣，並在用戶鼠標滑過列表的itemRenderer 時顯示。
下面是該技術的完整清單：

+展開

-XML

<?xml version="1.0" encoding="utf-8"?>
<mx:List xmlns:mx="http://www.adobe.com/2006/mxml" width="71" height="48"
 backgroundImage="liebiao.png">
 <mx:Script>
 <![CDATA[
  import mx.controls.listClasses.IListItemRenderer;
  [Embed("xuanzhong.png")]
  private var img:Class;
  [Embed("xuanzhong.png")]
  private var highlight_img:Class;
   override protected function drawHighlightIndicator(indicator:Sprite, x:Number,y:Number, width:Number, height:Number, color:uint,itemRenderer:IListItemRenderer):void {
   var this_img:Object = new highlight_img();
   indicator.addChild((this_img as DisplayObject));
   (this_img as DisplayObject).x =0;//itemRenderer.width -(this_img as DisplayObject).width;  0xA4A3A1
   super.drawHighlightIndicator(indicator, x, y+2, width, height, 0xA4A3A1,itemRenderer);
   indicator.x=3;
   indicator.width=64;
   indicator.height=20;
   indicator.alpha=1;
   indicator.graphics.clear();
  }
  override protected function drawCaretIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void
     {
      super.drawCaretIndicator(indicator, 0, y, 65, 20, 0xffffff,itemRenderer);
      indicator.x=3;
   indicator.width=64;
   indicator.height=20;
   indicator.alpha=1;
   indicator.graphics.clear();
     }
  override protected function drawSelectionIndicator(indicator:Sprite, x:Number,y:Number, width:Number, height:Number, color:uint,itemRenderer:IListItemRenderer):void{
   var this_img:Object = new img();
   indicator.addChild((this_img as DisplayObject));
   (this_img as DisplayObject).x = 0;//itemRenderer.width - (this_img as DisplayObject).width
   super.drawSelectionIndicator(indicator, x, y+2, width,height, 0xA42011,itemRenderer);
   indicator.x=3;
   indicator.width=64;
   indicator.height=20;
   indicator.alpha=1;
   indicator.graphics.clear();
  }
 
 ]]>
 </mx:Script>
</mx:List>