Redrain 通用菜单控件使用方法和说明(附源码和demo)

转载请说明原出处,谢谢~~:

大概半年前我写过博客说明怎么改造duilib的原代MenuDemo来支持消息发送(地址为:),而后在仿酷狗项目里也用到了菜单类,并且菜单类岁仿酷狗一起开源了。但是仿酷狗里面的菜单是专门针对仿酷狗的需求而修改的,所以通用性还不够。考虑到菜单也比较常用。所以今天就把菜单控件重整,修改为通用的控件,并且把它集成了到我的duilib库里,可以直接使用。

在此我把通用菜单控件的使用方法说明一下,源码和Demo可以在我的duilib库中下载到。

一、首先看看这个菜单的功能:

1、可以展现多级菜单

2、可内嵌自定义控件,并且控件可以向主窗体发送消息,如图的红色叹号就是个按钮控件,可以制作酷狗音乐的托盘菜单的播放暂停按钮和进度控制进度条。

3、菜单拥有阴影效果(使用我库里的阴影类完成)

4、菜单可以自定义前方显示小图标,并且可以控制图标的大小和是否显示

5、菜单可以根据是否拥有子菜单决定是否显示小箭头

6、菜单可以添加分割线(控制分割线的样式和位置)

7、每个菜单项都可以实现复选或者单选功能

8、优化菜单的xml描述文件,编写方便容易

9、可以通过键盘的按钮控制菜单的选项

10、每个菜单项的高度和宽度是任意调整的

二、接着是我更新后的属性列表:

<Menu parent="CListUI" notifies="setfocus killfocus timer menu itemselect windowinit(root)"><Attribute name="inset" default="0,0,0,0" type="RECT" comment="菜单的高度等于所有菜单项的高度之和,加上inset属性的top和bottom"/><!– Menu标签的属性要通过Default来定义,为了让下级菜单也能拥有同样的外观,,其他属性设置见List –></Menu><MenuElement parent="CListContainerElementUI" notifies="click valuechanged WM_MENUCLICK"><Attribute name="icon" default="" type="STRING" comment="菜单项的图标图片"/><Attribute name="iconsize" default="0,0" type="SIZE" comment="图片的大小,最大为26×26"/><Attribute name="checkitem" default="false" type="BOOL" comment="是否有复选功能"/><Attribute name="ischeck" default="false" type="BOOL" comment="是否被选中(前提是开启了复选功能,复选功能属性应该写在本属性的前面)"/><Attribute name="linetype" default="false" type="BOOL" comment="是否是分割线(开启后将不会显示图标)"/><Attribute name="linepadding" default="29,0,7,0" type="RECT" comment="分割线的外边据"/><Attribute name="linecolor" default="0xFFBCBFC4" type="DWORD" comment="分割线的颜色"/><Attribute name="expland" default="false" type="BOOL" comment="是否显示下级菜单的小三角图片(需要通过Default标签设置ExplandIcon属性图片的路径)"/><Attribute name="height" default="30" type="INT" comment="菜单项高度(分割线默认高度是6)"/></MenuElement> 三、下面给出动态效果图对应的布局代码:

<?xml version="1.0" encoding="utf-8"?><Window showshadow="true" shadowimage="shadow.png" shadowcorner="23,13,23,33"><Font name="微软雅黑" size="12" bold="false" default="true" /><Font name="微软雅黑" size="12" bold="true"/><!– Menu标签的属性要通过Default来定义,为了让下级菜单也能拥有同样的外观 –><Default name="Menu" value="bordersize="1" borderround="2,2" bordercolor="0x303132" inset="2,2,2,2" itemtextpadding="30,0,0,0" bkimage="file='menu_bk.png' corner='26,2,2,2' source='6,6,44,24'" itemselectedbkcolor="0xFF338ACA"" /><!– ExplandIcon属性定义了下级菜单的小图标的样子 –><Default name="ExplandIcon" value="menu_expand.png" /><Menu><MenuElement text="菜单测试0" expland="true" ><MenuElement text="菜单测试01" id="102"/><MenuElement text="菜单测试02" /></MenuElement><MenuElement height="120" ><VerticalLayout bkcolor="#FFFFFFFE"><Button name="Menu_btn" height="118" normalimage="error.png" hotimage="check_hover.png" pushedimage="check_pressed.png"/></VerticalLayout></MenuElement><MenuElement name="Menu_Test1" text="菜单测试3" icon="right.png" iconsize="9,9" checkitem="true" ischeck="true" /><MenuElement name="Menu_Test2" text="菜单测试31" /><MenuElement name="Menu_Test3" text="菜单测试32" icon="right.png" iconsize="9,9" checkitem="true" ischeck="true" /><MenuElement linetype="true" /><MenuElement text="菜单测试4" icon="right.png" iconsize="9,9" expland="true" ><MenuElement text="菜单测试5" expland="true" icon="WebSit.png" ><MenuElement text="菜单测试6" icon="Virus.png" /><MenuElement text="菜单测试7" /></MenuElement><MenuElement text="菜单测试8" expland="true"><MenuElement text="菜单测试a" /><MenuElement text="菜单测试b" /></MenuElement></MenuElement> </Menu></Window> 这里我说明一下使用菜单需要注意的一些地方:

1、需要通过Default来定义Menu的样式,这是为了可以让所有菜单(包括各个下级菜单)使用统一的样式

2、用Default标签定义ExplandIcon属性来制定下级菜单的小图标的路径

3、MenuElement如果要用单选或者复选功能,checkitem属性要写在ischeck属性前面

4、指定Menu的inset内边距属性的top和bottom属性,会自动让菜单增高(很多情况需要这样做来设置菜单的内边距)

5、MenuElement的linepadding属性可以设置分割线的外边距,默认为"29,0,7,0",这个值要根据实际的素材和需求来设置

四、使用菜单的c++代码:

菜单的创建:

沿途跟着一条河,你看着它在晨光暮霭中变换着色彩,

Redrain 通用菜单控件使用方法和说明(附源码和demo)

相关文章:

你感兴趣的文章:

标签云: