定制Flex菜单图标

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

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

1
private var image:UIComponent = new UIComponent();

然后里面重写measure方法(计算MenuItem的宽高):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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宽高):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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等的位置):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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的宽度):

1
2
3
4
5
6
7
8
9
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换一下

1
2
3
4
5
6
7
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文件如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    <mx:XML format="e4x" id="myMenuData">
        <root>
            <menuitem label="www.servasoftware.com" iconName="databox_icon">
                <menuitem label="TWaver" type="check" toggled="true">
                    <menuitem label="Java" type="radio" groupName="one"/>
                    <menuitem label="Web" type="radio" groupName="one" toggled="true"/>
                    <menuitem label="Flex" type="radio" groupName="one" iconName="bus_icon"/>
                    <menuitem label="Silverlight" type="radio" groupName="one"/>
                </menuitem>
                <menuitem type="separator"/>
                <menuitem label="2BizBox" iconName="data_icon"/>
            </menuitem>
            <menuitem label="www.2bizbox.com"/>
            <menuitem label="twaver.servasoft.com"/>
        </root>
    </mx:XML>
</code>
需要源代码请留言更多关于MenuItemRenderer的用法参见官方文档:
http://livedocs.adobe.com/flex/3/html/help.html?content=menucontrols_3.html
posted @   twaver  阅读(2295)  评论(1编辑  收藏  举报
编辑推荐:
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
阅读排行:
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· Winform-耗时操作导致界面渲染滞后
· Phi小模型开发教程:C#使用本地模型Phi视觉模型分析图像,实现图片分类、搜索等功能
· 语音处理 开源项目 EchoSharp
· drools 规则引擎和 solon-flow 哪个好?solon-flow 简明教程
点击右上角即可分享
微信分享提示