2013 duilib入門簡明教程 -- 完整的自繪標題欄(8)

    看了前面那么多教程，相信對duilib已有基本映像了，我們就快馬加鞭，做出一個完整的自繪標題欄吧~

    看到下面這個效果圖，小伙伴們是不是有點驚呆了呢~O(∩_∩)O~

 

    duilib實現以上效果非常簡單，

　　1、將按鈕圖片的文件夾放到exe目錄， 點此下載

　　2、main.cpp的代碼無需改動，只需改動XML，XML內容如下（受網頁寬度限制，以下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"> <!-- 窗口的初始尺寸(寬800，高600)、窗口的最小尺寸(寬600，高400)、標題欄拖拽區域(高32)、可拖拽邊框大小(這里添加sizebox后就可以拖拽邊框調整大小了) -->
    <VerticalLayout bkcolor="#FFF0F0F0" bkcolor2="#FFAAAAA0"> <!-- 整個窗口的背景色 -->
        <!-- 標題欄區 -->
        <HorizontalLayout height="32" bkcolor="#FFE6E6DC" bkcolor2="#FFAAAAA0"> <!-- 標題欄背景色 bkcolor、bkcolor2、bkcolor3分別是漸變色的三個值-->         
            <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 name="btnHello" text="Hello World"/>
    </HorizontalLayout>
    </VerticalLayout>
</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的樣式，大家可以看到關閉按鈕除了鼠標移上去有不同外觀，還有一個提示條。這些都是在這一行代碼里指定的：

<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          代表鼠標點擊按鈕時，按鈕顯示的圖片路徑     

        

下一節將會介紹HorizontalLayout、VerticalLayout。

來自為知筆記(Wiz)