duilib教程之duilib入门简明教程8.完整的自绘标题栏

看了前面那么多教程，相信对duilib已有基本映像了，我们就快马加鞭，做出一个完整的自绘标题栏吧~    看到下面这个效果图，小伙伴们是不是有点惊呆了呢~O(∩_∩)O~

 
    duilib实现以上效果非常简单，
　　1、将按钮图片的文件夹放到exe目录，  SysBtn.zip (3.27 KB, 下载次数: 133)   
　　2、main.cpp的代码无需改动，只需改动XML，XML内容如下（受网页宽度限制，以下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"> <!-- 窗口的初始尺寸(宽800，高600)、窗口的最小尺寸(宽600，高400)、标题栏拖拽区域(高32)、可拖拽边框大小(这里添加sizeBox后就可以拖拽边框调整大小了) -->
3.     <VerticalLayout bkcolor="#FFF0F0F0" bkcolor2="#FFAAAAA0"> <!-- 整个窗口的背景色 -->
4.         <!-- 标题栏区 -->
5.         <HorizontalLayout height="32" bkcolor="#FFE6E6DC" bkcolor2="#FFAAAAA0"> <!-- 标题栏背景色 bkcolor、bkcolor2、bkcolor3分别是渐变色的三个值-->         
6.             <VerticalLayout /> <!-- 占空位，占据左边所有的空位-->
7.             <VerticalLayout width="77"> <!-- 右边三个控件所占的宽度-->
8.                 <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' "/>
9.                 <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' " />
10.                 <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' " />
11.                 <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' "/>
12.             </VerticalLayout>      
13.         </HorizontalLayout>
14.         
15.         <!-- 客户区 -->
16.         <HorizontalLayout>
17.         <Button name="btnHello" text="Hello World"/>
18.     </HorizontalLayout>
19.     </VerticalLayout>
20. </Window>

复制代码

   仅仅在XML里面加了20行代码，一个完整的标题栏居然就完成了！    试试标题栏可以拖动不，试试可以最大化不，试试有提示条不，试试按钮外观会变化不，试试可以拖拽边框调整窗口大小不？
    必须都可以！
    虽然我们并没有处理以上消息，但是很多功能都已实现，因为WindowImplBase帮我们都做好了。
    小伙伴们，继承了WindowImplBase之后，妈妈再也不用担心我的界面啦~O(∩_∩)O哈哈~

    虽然XML里面已经有很详细的注释了，鉴于以下问题在群里多次出现，所以还是重复提醒一遍：
    以下问题都在XML第二行的 <Window>节点里添加。
1、为什么标题栏不能拖动？
    需要在<Window>节点添加 caption="0,0,0,32"，这里的32是指标题栏的高度
2、怎么让窗口大小可以通过拖拽来调整？
    需要在<Window>节点添加 sizeBox="4,4,4,4"， 这里的4是指鼠标移动到边框4个像素的范围内，鼠标就会显示拖拽样式，这时就可以调整窗口大小了


    下面Alberl来一一解释下XML代码的意思。大部分地方都有明显注释了，重点要解释的就是HorizontalLayout、VerticalLayout以及Button的样式了。
    这一节先介绍Button的样式，大家可以看到关闭按钮除了鼠标移上去有不同外观，还有一个提示条。这些都是在这一行代码里指定的：

3. <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' "/>

复制代码

其中：
name="closebtn"    唯一标识按钮，其他按钮的name不能与其重复
tooltip="关闭"         就是那个提示条的文字
float="true"            代表按钮的位置是绝对定位，其位置由pos属性指定
pos="44,5,74,24"    代表按钮的位置矩阵，分别为矩阵左、上、右、下四个点
width="28"             代表按钮图片显示的宽度（这个可以不填，但是由于按钮图片没有做好，如果不填的话，图片会被拉伸有点失真）
normalimage           代表正常状态下按钮显示的图片路径
hotimage                代表鼠标移上去时，按钮显示的图片路径     
pushedimage          代表鼠标点击按钮时，按钮显示的图片路径