定制Flex菜单图标

2018-09-06 13:15

阅读:527

  默认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 {

  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 {

  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();

  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);

  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=

  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=

  15 </root>

  16 </mx:XML>

  17 </code>


评论


亲,登录后才可以留言!