2013 duilib入门简明教程 -- 简单控件介绍 (12)
2014-04-30 01:10
876 查看
前面的教程应该让大家对duilib的整体有所映像了,下面就来介绍下duilib具体控件的使用。
由于官方没有提供默认的控件样式,所以我就尽量使用win7或者XP自带的按钮样式了,虽然界面比较土鳖,但是想要换成百度杀毒那样的界面,只需要更换图片即可,如果有哪位小伙伴能够提供一些控件样式,那就再好不过啦~
首先利用一下前面教程的框架,效果图如下:
![](http://images.cnitblog.com/blog/570549/201309/29142241-34383f68eb48423a908f97f1fbc1f7bd.png)
main.cpp的代码如下:
XP默认按钮
![](http://images.cnitblog.com/blog/570549/201309/29142242-41b21a6656024c6592a75854ee3fd92d.png)
![](http://images.cnitblog.com/blog/570549/201309/29142243-108e816be89d444da31054f55545f5ff.png)
![](http://images.cnitblog.com/blog/570549/201309/29142243-065210a266a84c5ab2b1b315610e39b7.png)
![](http://images.cnitblog.com/blog/570549/201309/29142243-925a1cec851941adb07f795097bb2881.png)
win7默认按钮
![](http://images.cnitblog.com/blog/570549/201309/29143238-343024d08b44483ab7a7e0a27a6a0bc4.png)
![](http://images.cnitblog.com/blog/570549/201309/29143253-09ac93e9466447b68d02919b664b81d0.png)
![](http://images.cnitblog.com/blog/570549/201309/29142244-dddad60722f54296ba08c00e28693d15.png)
![](http://images.cnitblog.com/blog/570549/201309/29143301-2909fd16717e48cc969ac407e2790b01.png)
百度杀毒
![](http://images.cnitblog.com/blog/570549/201309/29143519-772a4bae33ad4907a04d9f5418b66644.png)
![](http://images.cnitblog.com/blog/570549/201309/29143527-4e4ac4f8667b40869d2745ca30bfdf53.png)
![](http://images.cnitblog.com/blog/570549/201309/29143541-33661a8f91c34889a9e288b78c454c20.png)
百度卫士
![](http://images.cnitblog.com/blog/570549/201309/29142243-a2fb4712e9054dea8175fe52a1850b29.png)
![](http://images.cnitblog.com/blog/570549/201309/29142244-f4c30145bef5435b9b1635d76ea16122.png)
![](http://images.cnitblog.com/blog/570549/201309/29142244-7464d1cfbef3475d80a8caed9e3b82e3.png)
上述图片资源请点击这里下载,下载后解压到exe目录即可,此时Debug文件夹如下(别忘了前面教程的SysBtn文件夹哦):
![](http://images.cnitblog.com/blog/570549/201309/29144001-cd8b5d493fa945e784ec56d059ed56a3.jpg)
我们先用DuiDesigner添加一些按钮,并且把他们排整齐,如图:
![](http://images.cnitblog.com/blog/570549/201309/29142244-8c4d380384254c61920bda97dc4dd0cd.png)
保存之后就可以看到这几个按钮的pos等属性了,再手动将这几个Button节点加到前面的XML中,并添加图片属性,如下:
效果如下:
![](http://images.cnitblog.com/blog/570549/201309/29142244-463f0db59d2742878e9e45df91c71a92.png)
用鼠标移上去,或者点击一下,看看是不是和系统按钮一样呢^_^
下面我们介绍一下duilib的另一种特性,那就是可以定制默认样式,这样做有什么好处呢?
假如我们有10个按钮,按钮样式都一样,如果用之前介绍的方式,则需要在每个Button节点都指定图片背景、宽度、高度等信息,一旦需要改动任何一个属性,则需要在10个按钮里面都改一次,所以为了方便修改,我们可以指定一个默认样式,就算有100个按钮,我们也只需要改一次属性。方法如下:
给<Window>节点添加一个Default节点即可,其中name属性填写控件的名字,value属性添加控件的属性的值,不过需要将双引号【"】换成【"】,单引号【'】换成【'】,单引号也可以不转换。
XML如下(由于标题栏基本不再变化,所以后面的教程将省略<!-- 标题栏区 -->那一段XML):
![](http://images.cnitblog.com/blog/570549/201309/29142245-91c86e27308f44b9bf01533a2c333ce4.png)
XML是不是清爽多了呢^_^ 注意,这里面要指定height属性,不然会看不到按钮,估计是因为放在了HorizontalLayout水平布局里。(如果是VerticalLayout ,应该是指定width属性,这个只是猜测,暂未验证~\(^o^)/~)
不过你会发现,启动的时候,最小化按钮图片不对了,那是因为最小化按钮没有指定focusedimage属性,所以就用了默认的focusedimage属性,只需要指定一下就行了。
![](http://images.cnitblog.com/blog/570549/201309/29142245-982e7211b74a4e79a6b5ec31340f49a7.png)
按钮的用法就介绍完啦,大家可以看到UI设计器里面还有下面这些控件,
![](http://images.cnitblog.com/blog/570549/201309/29142245-1368673a72ac41b2a33d3dd44c7b117c.png)
其中:
Control是所有控件的基类,一般放图片啥的就用它了。
Label和Text是用于放文字的,其中Label的对齐功能比Text要好一些,所以我一般用Label,这个对应于MFC的Static控件。
Edit显然就是编辑框啦,Button就不用多说了吧~
上面提到的控件都是简单控件,拖到设计器上就能直观的看到效果,绝大部分属性都和Button一样,就不赘述了,所有控件的所有属性都在【duilib控件 XML属性列表】里有详细说明(不过有一点点遗漏,需要去看源码),下一节将介绍复杂控件。
由于官方没有提供默认的控件样式,所以我就尽量使用win7或者XP自带的按钮样式了,虽然界面比较土鳖,但是想要换成百度杀毒那样的界面,只需要更换图片即可,如果有哪位小伙伴能够提供一些控件样式,那就再好不过啦~
首先利用一下前面教程的框架,效果图如下:
![](http://images.cnitblog.com/blog/570549/201309/29142241-34383f68eb48423a908f97f1fbc1f7bd.png)
main.cpp的代码如下:
class CDuiFrameWnd : public WindowImplBase { public: virtual LPCTSTR GetWindowClassName() const { return _T("DUIMainFrame"); } virtual CDuiString GetSkinFile() { return _T("duilib.xml"); } virtual CDuiString GetSkinFolder() { return _T(""); } }; int APIENTRY _tWinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPTSTR lpCmdLine, int nCmdShow) { CPaintManagerUI::SetInstance(hInstance); CDuiFrameWnd duiFrame; duiFrame.Create(NULL, _T("DUIWnd"), UI_WNDSTYLE_FRAME, WS_EX_WINDOWEDGE); duiFrame.CenterWindow(); duiFrame.ShowModal(); return 0; }XML代码如下(由于前面的教程里都一一介绍了各种属性,所以以后的XML就不一一注释了):
<?xml version="1.0" encoding="UTF-8"?> <Window size="800,600" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4"> <VerticalLayout bkcolor="#FFF0F0F0" bkcolor2="#FFAAAAA0"> <!-- 标题栏区 --> <HorizontalLayout height="32" bkcolor="#FFE6E6DC" bkcolor2="#FFAAAAA0"> <VerticalLayout /> <VerticalLayout width="77"> <Button name="minbtn" tooltip="最小化" float="true" pos="0,5,22,24" width="23" normalimage=" file='SysBtn\MinNormal.bmp' " hotimage=" file='SysBtn\MinFocus.bmp' " pushedimage=" file='SysBtn\MinFocus.bmp' "/> <Button name="maxbtn" tooltip="最大化" float="true" pos="22,5,44,24" width="23" normalimage=" file='SysBtn\MaxNormal.bmp' " hotimage=" file='SysBtn\MaxFocus.bmp' " pushedimage=" file='SysBtn\MaxFocus.bmp' " /> <Button name="restorebtn" visible="false" tooltip="还原" float="true" pos="22,5,44,24" width="23" normalimage=" file='SysBtn\StoreNormal.bmp' " hotimage=" file='SysBtn\StoreFocus.bmp' " pushedimage=" file='SysBtn\StoreFocus.bmp' " /> <Button name="closebtn" tooltip="关闭" float="true" pos="44,5,74,24" width="28" normalimage=" file='SysBtn\CloseNormal.bmp' " hotimage=" file='SysBtn\CloseFocus.bmp' " pushedimage=" file='SysBtn\CloseFocus.bmp' "/> </VerticalLayout> </HorizontalLayout> </VerticalLayout> </Window>前面教程的Hello World就是一个大大的按钮,大家对按钮应该很熟悉了,下面我们来几个按钮样式吧:
XP默认按钮
![](http://images.cnitblog.com/blog/570549/201309/29142242-41b21a6656024c6592a75854ee3fd92d.png)
![](http://images.cnitblog.com/blog/570549/201309/29142243-108e816be89d444da31054f55545f5ff.png)
![](http://images.cnitblog.com/blog/570549/201309/29142243-065210a266a84c5ab2b1b315610e39b7.png)
![](http://images.cnitblog.com/blog/570549/201309/29142243-925a1cec851941adb07f795097bb2881.png)
win7默认按钮
![](http://images.cnitblog.com/blog/570549/201309/29143238-343024d08b44483ab7a7e0a27a6a0bc4.png)
![](http://images.cnitblog.com/blog/570549/201309/29143253-09ac93e9466447b68d02919b664b81d0.png)
![](http://images.cnitblog.com/blog/570549/201309/29142244-dddad60722f54296ba08c00e28693d15.png)
![](http://images.cnitblog.com/blog/570549/201309/29143301-2909fd16717e48cc969ac407e2790b01.png)
百度杀毒
![](http://images.cnitblog.com/blog/570549/201309/29143519-772a4bae33ad4907a04d9f5418b66644.png)
![](http://images.cnitblog.com/blog/570549/201309/29143527-4e4ac4f8667b40869d2745ca30bfdf53.png)
![](http://images.cnitblog.com/blog/570549/201309/29143541-33661a8f91c34889a9e288b78c454c20.png)
百度卫士
![](http://images.cnitblog.com/blog/570549/201309/29142243-a2fb4712e9054dea8175fe52a1850b29.png)
![](http://images.cnitblog.com/blog/570549/201309/29142244-f4c30145bef5435b9b1635d76ea16122.png)
![](http://images.cnitblog.com/blog/570549/201309/29142244-7464d1cfbef3475d80a8caed9e3b82e3.png)
上述图片资源请点击这里下载,下载后解压到exe目录即可,此时Debug文件夹如下(别忘了前面教程的SysBtn文件夹哦):
![](http://images.cnitblog.com/blog/570549/201309/29144001-cd8b5d493fa945e784ec56d059ed56a3.jpg)
我们先用DuiDesigner添加一些按钮,并且把他们排整齐,如图:
![](http://images.cnitblog.com/blog/570549/201309/29142244-8c4d380384254c61920bda97dc4dd0cd.png)
保存之后就可以看到这几个按钮的pos等属性了,再手动将这几个Button节点加到前面的XML中,并添加图片属性,如下:
<?xml version="1.0" encoding="UTF-8"?> <Window size="800,600" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4"> <VerticalLayout bkcolor="#FFF0F0F0" bkcolor2="#FFAAAAA0"> <!-- 标题栏区 --> <HorizontalLayout height="32" bkcolor="#FFE6E6DC" bkcolor2="#FFAAAAA0"> <VerticalLayout /> <VerticalLayout width="77"> <Button name="minbtn" tooltip="最小化" float="true" pos="0,5,22,24" width="23" normalimage=" file='SysBtn\MinNormal.bmp' " hotimage=" file='SysBtn\MinFocus.bmp' " pushedimage=" file='SysBtn\MinFocus.bmp' "/> <Button name="maxbtn" tooltip="最大化" float="true" pos="22,5,44,24" width="23" normalimage=" file='SysBtn\MaxNormal.bmp' " hotimage=" file='SysBtn\MaxFocus.bmp' " pushedimage=" file='SysBtn\MaxFocus.bmp' " /> <Button name="restorebtn" visible="false" tooltip="还原" float="true" pos="22,5,44,24" width="23" normalimage=" file='SysBtn\StoreNormal.bmp' " hotimage=" file='SysBtn\StoreFocus.bmp' " pushedimage=" file='SysBtn\StoreFocus.bmp' " /> <Button name="closebtn" tooltip="关闭" float="true" pos="44,5,74,24" width="28" normalimage=" file='SysBtn\CloseNormal.bmp' " hotimage=" file='SysBtn\CloseFocus.bmp' " pushedimage=" file='SysBtn\CloseFocus.bmp' "/> </VerticalLayout> </HorizontalLayout> <!-- 客户区 --> <HorizontalLayout> <Button text="XP" float="true" pos="20,14,0,0" width="60" height="25" normalimage=" file='BtnStyle\XP\button_nor.png' " hotimage=" file='BtnStyle\XP\button_over.png' " pushedimage=" file='BtnStyle\XP\button_down.png' " focusedimage=" file='BtnStyle\XP\button_focus.png' " /> <Button text="win7" float="true" pos="20,50,0,0" width="60" height="25" normalimage=" file='BtnStyle\win7\button_nor.png' " hotimage=" file='BtnStyle\win7\button_over.png' " pushedimage=" file='BtnStyle\win7\button_down.png' " focusedimage=" file='BtnStyle\win7\button_focus.png' " /> <Button text="百度杀毒" float="true" pos="20,86,0,0" width="102" height="35" normalimage=" file='BtnStyle\BDKV\button_nor.png' " hotimage=" file='BtnStyle\BDKV\button_over.png' " pushedimage=" file='BtnStyle\BDKV\button_down.png' " /> <Button float="true" pos="20,132,0,0" width="171" height="46" normalimage=" file='BtnStyle\BDKV2\button_nor.png' " hotimage=" file='BtnStyle\BDKV2\button_over.png' " pushedimage=" file='BtnStyle\BDKV2\button_down.png' " /> </HorizontalLayout> </VerticalLayout> </Window>
效果如下:
![](http://images.cnitblog.com/blog/570549/201309/29142244-463f0db59d2742878e9e45df91c71a92.png)
用鼠标移上去,或者点击一下,看看是不是和系统按钮一样呢^_^
下面我们介绍一下duilib的另一种特性,那就是可以定制默认样式,这样做有什么好处呢?
假如我们有10个按钮,按钮样式都一样,如果用之前介绍的方式,则需要在每个Button节点都指定图片背景、宽度、高度等信息,一旦需要改动任何一个属性,则需要在10个按钮里面都改一次,所以为了方便修改,我们可以指定一个默认样式,就算有100个按钮,我们也只需要改一次属性。方法如下:
给<Window>节点添加一个Default节点即可,其中name属性填写控件的名字,value属性添加控件的属性的值,不过需要将双引号【"】换成【"】,单引号【'】换成【'】,单引号也可以不转换。
XML如下(由于标题栏基本不再变化,所以后面的教程将省略<!-- 标题栏区 -->那一段XML):
<Window size="800,600" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4"> <Default name="Button" value=" height="25" width="60" normalimage="file='BtnStyle\XP\button_nor.png'" hotimage="file='BtnStyle\XP\button_over.png'" pushedimage="file='BtnStyle\XP\button_down.png'" focusedimage="file='BtnStyle\XP\button_focus.png'" " /> <VerticalLayout bkcolor="#FFF0F0F0" bkcolor2="#FFAAAAA0"> <!-- 客户区 --> <HorizontalLayout> <Button text="XP" float="true" pos="20,14,0,0" height="25" /> <Button text="win7" float="true" pos="20,50,0,0" height="25" /> <Button text="百度杀毒" float="true" pos="20,86,0,0" height="25" /> <Button float="true" pos="20,132,0,0" height="25" /> </HorizontalLayout> </VerticalLayout> </Window>
![](http://images.cnitblog.com/blog/570549/201309/29142245-91c86e27308f44b9bf01533a2c333ce4.png)
XML是不是清爽多了呢^_^ 注意,这里面要指定height属性,不然会看不到按钮,估计是因为放在了HorizontalLayout水平布局里。(如果是VerticalLayout ,应该是指定width属性,这个只是猜测,暂未验证~\(^o^)/~)
不过你会发现,启动的时候,最小化按钮图片不对了,那是因为最小化按钮没有指定focusedimage属性,所以就用了默认的focusedimage属性,只需要指定一下就行了。
![](http://images.cnitblog.com/blog/570549/201309/29142245-982e7211b74a4e79a6b5ec31340f49a7.png)
按钮的用法就介绍完啦,大家可以看到UI设计器里面还有下面这些控件,
![](http://images.cnitblog.com/blog/570549/201309/29142245-1368673a72ac41b2a33d3dd44c7b117c.png)
其中:
Control是所有控件的基类,一般放图片啥的就用它了。
Label和Text是用于放文字的,其中Label的对齐功能比Text要好一些,所以我一般用Label,这个对应于MFC的Static控件。
Edit显然就是编辑框啦,Button就不用多说了吧~
上面提到的控件都是简单控件,拖到设计器上就能直观的看到效果,绝大部分属性都和Button一样,就不赘述了,所有控件的所有属性都在【duilib控件 XML属性列表】里有详细说明(不过有一点点遗漏,需要去看源码),下一节将介绍复杂控件。
相关文章推荐
- 2013 duilib入门简明教程 -- 简单控件介绍 (12)
- 2013 duilib入门简明教程 -- 复杂控件介绍 (13)
- 2013 duilib入门简明教程 -- 复杂控件介绍 (13)
- 2013 duilib入门简明教程 -- 自绘控件 (15)
- 2013 duilib入门简明教程 -- 自绘控件 (15)
- 2013 duilib入门简明教程 -- 响应按钮事件(4)
- 2013 duilib入门简明教程 -- 完整的自绘标题栏(8)
- 2013 duilib入门简明教程 -- 总结 (20)
- 2013 duilib入门简明教程 -- 自绘标题栏(5)
- 2013 duilib入门简明教程 -- 其他 (18)
- 2013 duilib入门简明教程 -- XML配置界面(6)
- 2013 duilib入门简明教程 -- FAQ (19)
- 2013 duilib入门简明教程 -- XML基础类(7)
- 2013 duilib入门简明教程 -- FAQ (19)
- 2013 duilib入门简明教程 -- 总结 (20)
- 2013 duilib入门简明教程 -- XML基础类(7)
- 2013 duilib入门简明教程 -- 完整的自绘标题栏(8)
- 2013 duilib入门简明教程 -- 部分bug 2 (14)
- 2013 duilib入门简明教程 -- 部分bug (11)
- 2013 duilib入门简明教程 -- 事件处理和消息响应 (17)