定制Flex菜单图标-白红宇

定制Flex菜单图标

阅读量：6554 次

发布时间：2019-06-24

本文共 2477 字，大约阅读时间需要 8 分钟。

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

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

private var image:UIComponent = new UIComponent();

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

override protected function measure():void {	super.measure();	if (separatorIcon || listData == null) {		return;	}	var imageAsset:IImageAsset = Utils.getImageAsset(data.@iconName);	if(imageAsset == null){		return;	}	measuredWidth += imageAsset.width;	if(imageAsset.height > measuredHeight){		measuredHeight = imageAsset.height;	}}

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

override protected function commitProperties():void {	super.commitProperties();	if (separatorIcon || listData == null) {		return;	}	var imageAsset:IImageAsset = Utils.getImageAsset(data.@iconName);	if(imageAsset == null){		return;	}	image.width = imageAsset.width;	image.height = imageAsset.height;	image.graphics.beginBitmapFill(imageAsset.getBitmapData());	image.graphics.drawRect(0, 0, image.width, image.height);	image.graphics.endFill();	if(!this.contains(image)){		this.addChild(image);	}}

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

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{	super.updateDisplayList(unscaledWidth, unscaledHeight);	if (separatorIcon || listData == null) {		return;	}	var imageAsset:IImageAsset = Utils.getImageAsset(data.@iconName);	if(imageAsset == null){		return;	}	if(typeIcon){		typeIcon.x += imageAsset.width;	}	if(label){		label.x += imageAsset.width;	}}

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

override public function get measuredIconWidth():Number {	var imageAsset:IImageAsset = Utils.getImageAsset(data.@iconName);	if(imageAsset == null){		return 0 ;	}else{		var horizontalGap:Number = getStyle("horizontalGap");		return imageAsset.width + horizontalGap;	}}

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

var menu:Menu = Menu.createMenu(network, myMenuData, false);menu.labelField = "@label";menu.itemRenderer = new ClassFactory(CustomMenuItemRenderer);var point:Point = network.getLogicalPoint(event.mouseEvent);network.callLater(function():void{	menu.show(point.x, point.y);});

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

需要源代码请留言更多关于MenuItemRenderer的用法参见官方文档：

转载于:https://my.oschina.net/monolog/blog/404802

你可能感兴趣的文章