定制Flex菜单图标

默认Menu上的Icon必须通过iconField和iconFunction去指定，但是这两种方式都必须用嵌入资源Class名字去指定Icon，如果想用动态的图片（比如URL）作为Menu的Icon，就必须定制一把MenuItemRenderer。

 

首先写个类CustomMenuItemRenderer继承MenuItemRenderer，里面增加一个如下变量作为自定义Icon的组件：

view sourceprint?1 private var image:UIComponent = new UIComponent();

然后里面重写measure方法（计算MenuItem的宽高）：

view sourceprint?01 override protected function measure():void { 

02     super.measure(); 

03   

04     if (separatorIcon || listData == null) { 

05         return; 

06     } 

07   

08     var imageAsset:IImageAsset = Utils.getImageAsset(data.@iconName); 

09     if(imageAsset == null){ 

10         return; 

11     } 

12     measuredWidth += imageAsset.width; 

13     if(imageAsset.height > measuredHeight){ 

14         measuredHeight = imageAsset.height; 

15     } 

16 }

重写commitProperties方法（重画并增加Icon，指定Icon宽高）：

view sourceprint?01 override protected function commitProperties():void { 

02     super.commitProperties(); 

03   

04     if (separatorIcon || listData == null) { 

05         return; 

06     } 

07   

08     var imageAsset:IImageAsset = Utils.getImageAsset(data.@iconName); 

09     if(imageAsset == null){ 

10         return; 

11     } 

12     image.width = imageAsset.width; 

13     image.height = imageAsset.height; 

14     image.graphics.beginBitmapFill(imageAsset.getBitmapData()); 

15     image.graphics.drawRect(0, 0, image.width, image.height); 

16     image.graphics.endFill(); 

17     if(!this.contains(image)){ 

18         this.addChild(image); 

19     } 

20 }

重写updateDisplayList方法（指定Icon的位置，由于Icon在左边，所以super一把后，再移动Labe等的位置）：

view sourceprint?01 override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{ 

02     super.updateDisplayList(unscaledWidth, unscaledHeight); 

03   

04     if (separatorIcon || listData == null) { 

05         return; 

06     } 

07   

08     var imageAsset:IImageAsset = Utils.getImageAsset(data.@iconName); 

09     if(imageAsset == null){ 

10         return; 

11     } 

12     if(typeIcon){ 

13         typeIcon.x += imageAsset.width; 

14     } 

15     if(label){ 

16         label.x += imageAsset.width; 

17     } 

18 }

重写measuredIconWidth方法（计算Icon的宽度）：

view sourceprint?1 override public function get measuredIconWidth():Number { 

2     var imageAsset:IImageAsset = Utils.getImageAsset(data.@iconName); 

3     if(imageAsset == null){ 

4         return 0 ; 

5     }else{ 

6         var horizontalGap:Number = getStyle("horizontalGap"); 

7         return imageAsset.width + horizontalGap; 

8     } 

9 }

最后用自定义的CustomMenuItemRenderer指定Menu的ItemRenderer，注意使用iconName指定icon的名字（这里为TWaver注册图片的名字）。也可以用别的名字，注意把CustomMenuItemRenderer里面的@iconName换一下

view sourceprint?1 var menu:Menu = Menu.createMenu(network, myMenuData, false); 

2 menu.labelField = "@label"; 

3 menu.itemRenderer = new ClassFactory(CustomMenuItemRenderer); 

4 var point:Point = network.getLogicalPoint(event.mouseEvent); 

5 network.callLater(function():void{ 

6     menu.show(point.x, point.y); 

7 });

指定Menu数据的XML文件如下：

view sourceprint?01     <mx:XML format="e4x" id="myMenuData"> 

02         <root> 

03             <menuitem label="www.servasoftware.com" iconName="databox_icon"> 

04                 <menuitem label="TWaver" type="check" toggled="true"> 

05                     <menuitem label="Java" type="radio" groupName="one"/> 

06                     <menuitem label="Web" type="radio" groupName="one" toggled="true"/> 

07                     <menuitem label="Flex" type="radio" groupName="one" iconName="bus_icon"/> 

08                     <menuitem label="Silverlight" type="radio" groupName="one"/> 

09                 </menuitem> 

10                 <menuitem type="separator"/> 

11                 <menuitem label="2BizBox" iconName="data_icon"/> 

12             </menuitem> 

13             <menuitem label="www.2bizbox.com"/> 

14             <menuitem label="twaver.servasoft.com"/> 

15         </root> 

16     </mx:XML> 

17 </code>