2013 duilib入门简明教程 -- 简单控件介绍 (12)

heye

前面的教程应该让大家对duilib的整体有所映像了，下面就来介绍下duilib具体控件的使用。
    由于官方没有提供默认的控件样式，所以我就尽量使用win7或者XP自带的按钮样式了，虽然界面比较土鳖，但是想要换成百度杀毒那样的界面，只需要更换图片即可，如果有哪位小伙伴能够提供一些控件样式，那就再好不过啦~
    首先利用一下前面教程的框架，效果图如下：


main.cpp的代码如下：

1. class CDuiFrameWnd : public WindowImplBase
2. {
3. public:
4.     virtual LPCTSTR    GetWindowClassName() const   {   return _T("DUIMainFrame");  }
5.     virtual CDuiString GetSkinFile()                {   return _T("duilib.xml");    }
6.     virtual CDuiString GetSkinFolder()              {   return _T("");  }
7. };
9. int APIENTRY _tWinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPTSTR lpCmdLine, int nCmdShow)
10. {
11.     CPaintManagerUI::SetInstance(hInstance);
13.     CDuiFrameWnd duiFrame;
14.     duiFrame.Create(NULL, _T("DUIWnd"), UI_WNDSTYLE_FRAME, WS_EX_WINDOWEDGE);
15.     duiFrame.CenterWindow();
16.     duiFrame.ShowModal();
17.     return 0;
18. }

复制代码

XML代码如下（由于前面的教程里都一一介绍了各种属性，所以以后的XML就不一一注释了）：

1. <?xml version="1.0" encoding="UTF-8"?>
2. <Window size="800,600" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4">
3.   <VerticalLayout bkcolor="#FFF0F0F0" bkcolor2="#FFAAAAA0">
4.     <!-- 标题栏区 -->
5.     <HorizontalLayout height="32" bkcolor="#FFE6E6DC" bkcolor2="#FFAAAAA0">   
6.       <VerticalLayout />
7.       <VerticalLayout width="77">
8.           <Button name="minbtn"   tooltip="最小化" float="true" pos="0,5,22,24"  width="23" normalimage=" file=&#39;SysBtn\MinNormal.bmp&#39; " hotimage=" file=&#39;SysBtn\MinFocus.bmp&#39; " pushedimage=" file=&#39;SysBtn\MinFocus.bmp&#39; "/>
9.           <Button name="maxbtn"   tooltip="最大化" float="true" pos="22,5,44,24" width="23" normalimage=" file=&#39;SysBtn\MaxNormal.bmp&#39; " hotimage=" file=&#39;SysBtn\MaxFocus.bmp&#39; " pushedimage=" file=&#39;SysBtn\MaxFocus.bmp&#39; " />
10.           <Button name="restorebtn" visible="false" tooltip="还原" float="true" pos="22,5,44,24" width="23" normalimage=" file=&#39;SysBtn\StoreNormal.bmp&#39; " hotimage=" file=&#39;SysBtn\StoreFocus.bmp&#39; " pushedimage=" file=&#39;SysBtn\StoreFocus.bmp&#39; " />
11.           <Button name="closebtn" tooltip="关闭"   float="true" pos="44,5,74,24" width="28" normalimage=" file=&#39;SysBtn\CloseNormal.bmp&#39; " hotimage=" file=&#39;SysBtn\CloseFocus.bmp&#39; " pushedimage=" file=&#39;SysBtn\CloseFocus.bmp&#39; "/>
12.         </VerticalLayout>      
13.     </HorizontalLayout>
14.   </VerticalLayout>
15. </Window>

复制代码

   前面教程的Hello World就是一个大大的按钮，大家对按钮应该很熟悉了，下面我们来几个按钮样式吧：
XP默认按钮        
win7默认按钮     
百度杀毒                   
百度卫士                   


      上述图片资源请点击这里下载，下载后解压到exe目录即可，此时Debug文件夹如下（别忘了前面教程的SysBtn文件夹哦）：

　　我们先用DuiDesigner添加一些按钮，并且把他们排整齐，如图：

　　保存之后就可以看到这几个按钮的pos等属性了，再手动将这几个Button节点加到前面的XML中，并添加图片属性，如下：

1. <?xml version="1.0" encoding="UTF-8"?>
2. <Window size="800,600" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4">
3.     <VerticalLayout bkcolor="#FFF0F0F0" bkcolor2="#FFAAAAA0">
4.         <!-- 标题栏区 -->
5.         <HorizontalLayout height="32" bkcolor="#FFE6E6DC" bkcolor2="#FFAAAAA0">   
6.             <VerticalLayout />
7.             <VerticalLayout width="77">
8.                 <Button name="minbtn"   tooltip="最小化" float="true" pos="0,5,22,24"  width="23" normalimage=" file=&#39;SysBtn\MinNormal.bmp&#39; " hotimage=" file=&#39;SysBtn\MinFocus.bmp&#39; " pushedimage=" file=&#39;SysBtn\MinFocus.bmp&#39; "/>
9.                 <Button name="maxbtn"   tooltip="最大化" float="true" pos="22,5,44,24" width="23" normalimage=" file=&#39;SysBtn\MaxNormal.bmp&#39; " hotimage=" file=&#39;SysBtn\MaxFocus.bmp&#39; " pushedimage=" file=&#39;SysBtn\MaxFocus.bmp&#39; " />
10.                 <Button name="restorebtn" visible="false" tooltip="还原" float="true" pos="22,5,44,24" width="23" normalimage=" file=&#39;SysBtn\StoreNormal.bmp&#39; " hotimage=" file=&#39;SysBtn\StoreFocus.bmp&#39; " pushedimage=" file=&#39;SysBtn\StoreFocus.bmp&#39; " />
11.                 <Button name="closebtn" tooltip="关闭"   float="true" pos="44,5,74,24" width="28" normalimage=" file=&#39;SysBtn\CloseNormal.bmp&#39; " hotimage=" file=&#39;SysBtn\CloseFocus.bmp&#39; " pushedimage=" file=&#39;SysBtn\CloseFocus.bmp&#39; "/>
12.             </VerticalLayout>      
13.         </HorizontalLayout>
15.         <!-- 客户区 -->
16.         <HorizontalLayout>
17.             <Button text="XP"       float="true" pos="20,14,0,0" width="60" height="25" normalimage=" file=&#39;BtnStyle\XP\button_nor.png&#39; " hotimage=" file=&#39;BtnStyle\XP\button_over.png&#39; " pushedimage=" file=&#39;BtnStyle\XP\button_down.png&#39; " focusedimage=" file=&#39;BtnStyle\XP\button_focus.png&#39; " />
18.             <Button text="win7"     float="true" pos="20,50,0,0" width="60" height="25" normalimage=" file=&#39;BtnStyle\win7\button_nor.png&#39; " hotimage=" file=&#39;BtnStyle\win7\button_over.png&#39; " pushedimage=" file=&#39;BtnStyle\win7\button_down.png&#39; " focusedimage=" file=&#39;BtnStyle\win7\button_focus.png&#39; " />
19.             <Button text="百度杀毒" float="true" pos="20,86,0,0" width="102" height="35" normalimage=" file=&#39;BtnStyle\BDKV\button_nor.png&#39; " hotimage=" file=&#39;BtnStyle\BDKV\button_over.png&#39; " pushedimage=" file=&#39;BtnStyle\BDKV\button_down.png&#39; " />
20.             <Button                 float="true" pos="20,132,0,0" width="171" height="46" normalimage=" file=&#39;BtnStyle\BDKV2\button_nor.png&#39; " hotimage=" file=&#39;BtnStyle\BDKV2\button_over.png&#39; " pushedimage=" file=&#39;BtnStyle\BDKV2\button_down.png&#39; " />
21.         </HorizontalLayout>
22.     </VerticalLayout>
23. </Window>

复制代码

   效果如下：


    用鼠标移上去，或者点击一下，看看是不是和系统按钮一样呢^_^
    下面我们介绍一下duilib的另一种特性，那就是可以定制默认样式，这样做有什么好处呢？
    假如我们有10个按钮，按钮样式都一样，如果用之前介绍的方式，则需要在每个Button节点都指定图片背景、宽度、高度等信息，一旦需要改动任何一个属性，则需要在10个按钮里面都改一次，所以为了方便修改，我们可以指定一个默认样式，就算有100个按钮，我们也只需要改一次属性。方法如下：
    给<Window>节点添加一个Default节点即可，其中name属性填写控件的名字，value属性添加控件的属性的值，不过需要将双引号【"】换成【"】，单引号【&#39;】换成【&#39;】,单引号也可以不转换。
XML如下（由于标题栏基本不再变化，所以后面的教程将省略<!-- 标题栏区 -->那一段XML）：

1. <Window size="800,600" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4">
2.     <Default name="Button" value="  height="25" width="60" normalimage="file=&#39;BtnStyle\XP\button_nor.png&#39;" hotimage="file=&#39;BtnStyle\XP\button_over.png&#39;" pushedimage="file=&#39;BtnStyle\XP\button_down.png&#39;" focusedimage="file=&#39;BtnStyle\XP\button_focus.png&#39;" " />
3.     <VerticalLayout bkcolor="#FFF0F0F0" bkcolor2="#FFAAAAA0">
4.         <!-- 客户区 -->
5.         <HorizontalLayout>
6.             <Button text="XP"       float="true" pos="20,14,0,0"  height="25" />
7.             <Button text="win7"     float="true" pos="20,50,0,0"  height="25" />
8.             <Button text="百度杀毒" float="true" pos="20,86,0,0"  height="25" />
9.             <Button                 float="true" pos="20,132,0,0" height="25" />
10.         </HorizontalLayout>
11.     </VerticalLayout>
12. </Window>

复制代码

    XML是不是清爽多了呢^_^  注意，这里面要指定height属性，不然会看不到按钮，估计是因为放在了HorizontalLayout水平布局里。（如果是VerticalLayout ，应该是指定width属性，这个只是猜测，暂未验证~\(^o^)/~）
    不过你会发现，启动的时候，最小化按钮图片不对了，那是因为最小化按钮没有指定focusedimage属性，所以就用了默认的focusedimage属性，只需要指定一下就行了。


    按钮的用法就介绍完啦，大家可以看到UI设计器里面还有下面这些控件，

    其中：
    Control是所有控件的基类，一般放图片啥的就用它了。
    Label和Text是用于放文字的，其中Label的对齐功能比Text要好一些，所以我一般用Label，这个对应于MFC的Static控件。
    Edit显然就是编辑框啦，Button就不用多说了吧~
    上面提到的控件都是简单控件，拖到设计器上就能直观的看到效果，绝大部分属性都和Button一样，就不赘述了，所有控件的所有属性都在duilib控件 XML属性列表里有详细说明(不过有一点点遗漏，需要去看源码)，下一节将介绍复杂控件。



来自为知笔记(Wiz)