当前位置: 移动技术网 > IT编程>开发语言>.net > 定制Flex菜单图标

定制Flex菜单图标

2018年04月10日  | 移动技术网IT编程  | 我要评论

乐文屋,验孕棒什么时候用最准确,关闭硬件加速

默认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="" 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="> 

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

15         </root> 

16     </mx:XML> 

17 </code>

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网