2. 簡(jiǎn)單空白窗體界面

此處以創(chuàng)建一個(gè)簡(jiǎn)單的空白的灰色背景窗體為例。對(duì)應(yīng)的XML布局文件對(duì)應(yīng)的也就很簡(jiǎn)單。如下：

1<?xml version="1.0" encoding="UTF-8"?>

2

3

4

5

根據(jù)字面意思可以很容易看出XML文件所表示的窗體屬性，窗體大小(size)為800X600，窗口圓角大小(roundcorner)為(3,3)等等。

接下來，創(chuàng)建DuilibDemo程序來讀取解析該XML文件創(chuàng)建對(duì)應(yīng)的窗體(注：對(duì)應(yīng)的具體實(shí)現(xiàn)代碼暫不作具體解釋，在筆記最后會(huì)給出配對(duì)的代碼方便下載查閱。本節(jié)主要是針對(duì)XML窗體布局部分，具體代碼如何顯示后續(xù)會(huì)具體單獨(dú)詳解)，效果如下：

3. 標(biāo)題欄創(chuàng)建

通過第二步中創(chuàng)建的簡(jiǎn)單空白窗體，可能發(fā)現(xiàn)最終窗體效果和MFC方式創(chuàng)建的并沒什么太大區(qū)別。因?yàn)樯鲜龊?jiǎn)單窗體的創(chuàng)建只是讀取解析XML然后創(chuàng)建對(duì)應(yīng)的窗體，具體的相關(guān)消息流程都暫未做處理。所以，接下來，我們通過做一個(gè)標(biāo)題欄的創(chuàng)建來演示說明。

3.1 屏蔽系統(tǒng)標(biāo)題欄

在此之間，我們得屏蔽掉系統(tǒng)標(biāo)題欄。在消息處理函數(shù)中，我們通過在消息處理函數(shù)HandleMessage中對(duì)消息WM_NCACTIVATE、WM_NCCALCSIZE、WM_NCPAINT處理來屏蔽系統(tǒng)標(biāo)題欄，具體屏蔽消息處理代碼如下(可在配對(duì)的代碼中查看)：

1LRESULT CMainWndDlg::OnNcActivate(UINT uMsg,WPARAM wParam,LPARAM lParam,BOOL& bHandled)

2{

3if( ::IsIconic(*this) ) bHandled = FALSE;

4return (wParam == 0) ? TRUE : FALSE;

5}

6LRESULT CMainWndDlg::OnNcCalcSize(UINT uMsg,WPARAM wParam,LPARAM lParam,BOOL& bHandled)

7{

8return 0;

9}

10LRESULT CMainWndDlg::OnNcPaint(UINT uMsg,WPARAM wParam,LPARAM lParam,BOOL& bHandled)

11{

12return 0;

13}

這樣之后運(yùn)行就會(huì)得到一個(gè)不帶系統(tǒng)標(biāo)題欄的灰色空白窗體。

3.2 創(chuàng)建自繪標(biāo)題欄

屏蔽系統(tǒng)標(biāo)題欄之后，接下來就可以創(chuàng)建自繪標(biāo)題欄了。其實(shí)創(chuàng)建自繪標(biāo)題欄不需要額外修改程序代碼部分，只需要在XML中添加標(biāo)題欄Caption部

分的布局即可。對(duì)于標(biāo)題欄，我們所熟知的主要是分為兩部分：左上角的title和右上角的系統(tǒng)按鈕。再加上標(biāo)題欄本身占有一部分區(qū)域，而且在該區(qū)域可以支

持鼠標(biāo)拖動(dòng)窗體的，所有在原有的xml文件基礎(chǔ)上對(duì)應(yīng)的我們需要添加修改的地方有三處：

3.2.1)區(qū)域大小聲明。在創(chuàng)建窗體的時(shí)候根據(jù)需要提前指定窗體可拖動(dòng)標(biāo)題欄大小邊距。

1

3.2.2)Title區(qū)域

1

2

3

4

5

6

7

3.2.3)系統(tǒng)按鈕區(qū)域

1

2

3

4

5

6

7

注意：為了使界面更加美觀，引入了一些圖片資源。比如窗體背景、按鈕圖片等等。具體使用方法很簡(jiǎn)單，參考代碼使用即可。雖

然界面效果達(dá)到了，但細(xì)心的人可能會(huì)發(fā)現(xiàn)，鼠標(biāo)點(diǎn)擊標(biāo)題欄區(qū)域時(shí)還是會(huì)彈出系統(tǒng)自帶的菜單等。這是因?yàn)槲覀兡壳爸皇窃诮缑嫔线_(dá)到了屏蔽了系統(tǒng)自帶標(biāo)題欄，

并自繪標(biāo)題欄的效果，但消息的處理還沒改變。所以此處還需要添加對(duì)點(diǎn)擊等操作的消息處理，即在HandleMessage中添加對(duì)消息

WM_NCHITTEST的處理。對(duì)應(yīng)OnNcHitTest分支下的處理函數(shù)如下：

1LRESULT CMainWndDlg::OnNcHitTest(UINT uMsg,WPARAM wParam,LPARAM lParam,BOOL& bHandled)

2{

3POINT pt; pt.x = GET_X_LPARAM(lParam); pt.y = GET_Y_LPARAM(lParam);

4::ScreenToClient(*this, &pt);

5RECT rcClient;

6::GetClientRect(*this, &rcClient);

7RECT rcCaption = m_PaintManager.GetCaptionRect();

8if( pt.x >= rcClient.left + rcCaption.left && pt.x < rcClient.right - rcCaption.right \

9&& pt.y >= rcCaption.top && pt.y < rcCaption.bottom ) {

10CControlUI* pControl =static_cast(m_PaintManager.FindControl(pt));

11if( pControl && _tcscmp(pControl->GetClass(), _T("ButtonUI")) != 0 &&

12_tcscmp(pControl->GetClass(), _T("OptionUI")) != 0 &&

13_tcscmp(pControl->GetClass(), _T("TextUI")) != 0 )

14return HTCAPTION;

15}

16return HTCLIENT;

17}

這樣一來也就達(dá)到了預(yù)期的效果。當(dāng)然，這只是最簡(jiǎn)單的界面效果，想要得到復(fù)雜的界面效果，首先還需要根據(jù)實(shí)際需要在界面添加相關(guān)控件繪制等等。具體

的布局可以直接在上述XML文件中繼續(xù)添加完善；其次，還需要對(duì)界面一些控件的消息響應(yīng)的處理，具體消息效應(yīng)會(huì)在后續(xù)章節(jié)提到。上述布局完成后對(duì)應(yīng)的效果

如下：

4. UIDesigner

Duilib中實(shí)際上提供了所見即所得的窗體設(shè)計(jì)器UIDesigner。如下圖所示：

對(duì)于習(xí)慣了MFC對(duì)話框中直接拖控件來布局的人來說或許很喜歡這個(gè)設(shè)計(jì)器。這個(gè)設(shè)計(jì)器同樣也是可以直接拖放相關(guān)控件來完成布局，最終保存會(huì)自動(dòng)生成

對(duì)應(yīng)的XMl文件。如果熟悉了XML布局后，實(shí)際上手寫起來或許會(huì)更方便，而且對(duì)于一些復(fù)雜的界面布局來說，手動(dòng)寫XML文件應(yīng)該比用該設(shè)計(jì)器要方便的

多。

5. 補(bǔ)充說明

1)上述的布局只是簡(jiǎn)單的布局，在布局中很多控件的屬性可以參考下載的duilib中的“屬性文件.xml”中羅列的信息。

2)全局屬性。在上述最終的Demo圖片中可以發(fā)現(xiàn)字體和默認(rèn)的有些不一樣，實(shí)際上是進(jìn)行了相關(guān)設(shè)置。對(duì)于字體、Default之類的的屬性設(shè)置具體參考例子代碼：

1

2

3

4

這里我們定義了四種字體樣式，序號(hào)默認(rèn)從0開始依次遞增。而要具體使用時(shí)，如Demo中標(biāo)題欄的字體設(shè)置：

1

這里font=”3″就表示Label中的文字使用序號(hào)3對(duì)應(yīng)的這種樣式。

3)布局這塊，上述只是簡(jiǎn)單的一個(gè)布局，引導(dǎo)大家熟悉。對(duì)于如何更好的學(xué)會(huì)布局，一方面可以隨著后續(xù)深入學(xué)習(xí)，進(jìn)一步熟悉相關(guān)控件及屬性后，要能靈

活運(yùn)用大到實(shí)際例子中；另一方面，一個(gè)很好的方法就是查看一些例子，通過例子來學(xué)習(xí)。對(duì)于設(shè)計(jì)好的布局，可以直接通過UIDesigner來打開XML文

件可以很方便的即時(shí)查看界面樣例。

最后附上本節(jié)對(duì)應(yīng)的代碼(說明，后續(xù)章節(jié)都是基于此代碼逐步完善)。代碼下載

總結(jié)

以上是生活随笔為你收集整理的duilib 子窗口位置_Duilib学习笔记《02》— 界面布局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。