Duilib教程－控件練習

1、控件消息的響應。

在HelloDuilib例子中，程序不能退出，在這裏，我將添加一個關閉按鈕，當點擊它時，調用PostQuitMessage進行退出。

首先在界面的右上角添加一個關閉按鈕，並取名爲「btnClose」。

而後在 CHelloDuilibWnd 中重載 WindowImplBase::Notify ();

代碼以下：

void CHelloDuilibWnd::Notify( TNotifyUI& msg )
{
    if (msg.sType == DUI_MSGTYPE_CLICK) // 先判斷消息類型，若是是單擊
    {
        if (msg.pSender->GetName() == _T ("btnClose")) // 若是控件名爲 btnClose
        {
            PostQuitMessage(0);
        }
    }
}

 

如是便可退出程序。

 

2、獲取XML中的控件。

通常的狀況下，能夠在窗口初始化的時候獲取一個控件，固然你在何時獲取都是能夠的，在初始化獲取，之後你就能夠任意地使用了。

添加劇載函數：WindowImplBae::InitWindow，代碼以下：

void CHelloDuilibWnd::InitWindow()
{
    m_btnClose = static_cast <CButtonUI*> (m_PaintManager.FindControl(_T ("btnCloase")));
    ASSERT(m_btnClose != NULL);
}

把上面咱們添加的關閉按鈕對象保存起來。

請注意，是使用 m_PaintManager 進行獲取，該對象負責管理全部工做，包括消息的傳遞，調用控件的繪製函數等，均由它處理。

 

3、標題欄

窗口有一個屬性 caption 指定了窗口標題欄的位置。默認0表明了窗口的最大值。好比說，咱們想要標題欄高度爲30像素，便可設爲：(0,0,0,30)。left, top, right都爲0，只有bottom爲30，right爲0表示爲最右邊。固然若是所有設爲0，會被認爲沒有標題欄。

 

4、示例程序的練習。

在這裏，我並不會爲你介紹全部控件的編寫，只是做一個簡單的介紹，而後控件的編寫還須要你本身動手，只有本身寫過的代碼纔是掌握了的代碼。若是以天天學一個控件的效率的話，大概頂多兩週即基本掌握全部控件的寫法。下面是我之前學習的一個例子，截圖以下，最後我也會附件貼上，但願對您的學習有所幫助。

固然我並無編寫全部的控件，好比menu、progressbar、sliderbar、tree等控件，這個示例是很久之前寫的了。

 

關於控件特定的屬性，若是你用心用過 DuiDesigner.exe的話，相信你已經知道它在哪裏了，DuiDesigner會將每一個控件的特殊的屬性，單獨列出來，以下圖中Button控件的屬性：

 

其它控件亦是如此。

 

1.控件的基本屬性：

1）Name，名稱，即類 CControlUI::GetName () 所返回的值。

2）Text, 標題

3）TextPadding，文字偏移。好比文字從第2個像素開始顯示，則可設爲(2,0,0,0)。注意，若是是使用單選框或是複選框，必定要使用到這個屬性，使文字顯示在圖片的右邊，即TextPadding的left爲設置爲圖片的寬或更寬。

4）ShowHtml，標誌Text屬性的值是否爲html。注意：這裏的HTML並非真的HTML，它不能使用HTML標籤，只能使用內定的，如<i> 表示圖片或文字傾斜等。

5）EndEllipsis，標誌Text屬性，當顯示不徹底時，最後是否以 ... 進行顯示。

 

關於float及 Layout 的 insert、childpadding、hscrollbar、vscrollbar等屬性，我會在自動佈局中進行說明。

 

2.控件的特殊說明

1）DUILIB中並無 TAB 控件。它的實現方式爲：

 

使用OptionUI即單選框表明TAB選擇框，TabLayout表明窗口顯示的區域。當Option被選擇的時候，調用CTabLayoutUI::Select (index)，便可。具體如何操做，請參看示例。

 

2）DUILIB中並無單選框。

單選框和複選框都用OPTION表示，固然如今也有了CCheckBoxUI類，但我並不喜歡用，緣由是DuiDesigner中並無提供這個控件，因此我不會使用它，以避免形成沒必要要的麻煩。

區分單選框和複選框主要是靠 Group屬性，當指定了Group屬性時，這個OPTION就是一個單選框，且全部 Group相同的Option都是同一組，即他們中只有有一個處於選中狀態。若是Group爲空，那它就是一個複選框。

 

3）Label顯示的文字是單行。Text控件顯示的文本是多行。

 

4）Combox 它的子項設置以下圖，designer並無提供設置項，並且若是你的XML原來有COMBOX的子項設置項，這時候你用designer打開，並進行保存時，你的子項會被刪除，因此要注意副本保存工做。

 

使用 ListLabelElement。

若是使用代碼動態添加子項，就要使用類 CListLabelElementUI或是CListLabelContainerUI，前者只是TEXT項，固然可使用 ShowHtml屬性進行圖片顯示。後者則能夠添加多個控件，請試驗之。

 

4、關於BUG。

1.Align屬性。

UILabel第181行。代碼以下：

if( _tcscmp(pstrName, _T("align")) == 0 ) {
            if( _tcsstr(pstrValue, _T("left")) != NULL ) {
                m_uTextStyle &= ~(DT_CENTER | DT_RIGHT | DT_VCENTER | DT_SINGLELINE);
                m_uTextStyle |= DT_LEFT;
            }
            if( _tcsstr(pstrValue, _T("center")) != NULL ) {
                m_uTextStyle &= ~(DT_LEFT | DT_RIGHT );
                m_uTextStyle |= DT_CENTER;
            }
            if( _tcsstr(pstrValue, _T("right")) != NULL ) {
                m_uTextStyle &= ~(DT_LEFT | DT_CENTER | DT_VCENTER | DT_SINGLELINE);
                m_uTextStyle |= DT_RIGHT;
            }
            if( _tcsstr(pstrValue, _T("top")) != NULL ) {
                m_uTextStyle &= ~(DT_BOTTOM | DT_VCENTER | DT_VCENTER);
                m_uTextStyle |= (DT_TOP | DT_SINGLELINE);
            }
            if( _tcsstr(pstrValue, _T("vcenter")) != NULL ) { m_uTextStyle &= ~(DT_TOP | DT_BOTTOM ); m_uTextStyle |= (DT_CENTER | DT_VCENTER | DT_SINGLELINE); } if( _tcsstr(pstrValue, _T("bottom")) != NULL ) {
                m_uTextStyle &= ~(DT_TOP | DT_VCENTER | DT_VCENTER);
                m_uTextStyle |= (DT_BOTTOM | DT_SINGLELINE);
            }
        }

 

咱們能夠看到，它使用_tcsstr，即字符串查找，因此若是你使用了vcenter後，左、右對齊屬性均失效的。因此，顯示圖片+文字的時候，很是蛋疼的問題來了，文字顯示左對齊時，同時也是向上對齊的，它不垂直居中。。。舊版本沒有這個問題，這個是新版本改出來的BUG。

 

2.若是你是手動編寫XML，且裏面包含中文，必定要將該XML使用UTF-8方式進行保存，不然會遇到相似文字顯示不出來的BUG。

 

3.使用CListUI::SortItems時，若是你使用了自定義參數，會致使崩潰，由於它並無將你的自定義參數保存，只保存了你的比較函數，若是你在比較函數中使用了自定義參數，很明顯會崩潰。

具體代碼在 UIList 866行，dwData該參數並未保存。

而在901行的函數ItemComareFunc中，卻使用了未初始化的m_compareData。

 

4.Tree控件，也有BUG。

在 UITreeView.cpp中的31行，看代碼：

this->SetFixedHeight(18);
this->SetFixedWidth(250);

很顯然，一個TREE_ITEM寬度竟然只有250像素，當你的TREE寬度大於250的時候，就會顯示該BUG了。

 

5、當你編寫完全部示例以後，就會知道爲何我在上一節中說，爲何一個WND必定要有一個Layout。其具體加載的流程以下：

 

Root即爲第一個 Layout.

 

個人示例代碼：Duilib_test.zip

固然，你必定要熟悉DUILIB中全部DEMO，你不用全部代碼都去看過，但必定要知道他們都有些什麼功能，當你在項目中遇到類似的狀況時，能夠從中去找解決方案。

好比，

360中OPTION的應用。

GAME中DEFAULT屬性應用，分隔條使用。

QQ有自動換膚、加載ZIP資源代碼。

TEST_APP中關於自動佈局。。等等。

你必定要過目一遍甚至多遍。