Duilib学习笔记《02》— 界面布局

Duilib主要是通过XML来进行界面的布局配置，程序通过读取并解析XML文件来创建对应的窗体。DuiLib的页面布局分为三类：窗体（Window）、容器（Contain）和控件（Control）。顾名思义窗体就是要创建的窗口，容器则相当于是窗体内的一个子窗体，可以在容器内添加容器或者控件，当然定义的位置也都是相对与容器内的左上顶点；控件就是一些常用的Button、Edit、Label等窗体上的基本元素。

容器经常使用的有VerticalLayout（垂直布局容器）、HorizontalLayout（水平布局容器）、TabLayout（页标签布局容器）、RichEdit（富文本框）、Combo（下拉文本框）、List（列表）

控件经常使用的有Label（标签）、Button（按钮）、Option（选择框）、Edit（文本框）、ScrollBar（滚动条）等等。

首先根节点必须是Window，这个表示窗体，然后在跟节点内可以添加内容。各节点可以添加属性，属性包含名字、位置、大小、背景色、前景色、背景图片、显示文本、鼠标悬浮提示等等。（注：在duilib中有一份”属性列表.xml”的文件，详细罗列了每个空间对应的属性，方便使用时查阅）

此处以创建一个简单的空白的灰色背景窗体为例。对应的XML布局文件对应的也就很简单。如下：

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

<code><</code><code>Window</code> <code>size</code><code>=</code><code>"800,600"</code> <code>roundcorner</code><code>=</code><code>"4,4"</code><code>></code>

<code> </code><code><</code><code>VerticalLayout</code> <code>bkcolor</code><code>=</code><code>"#AAA0AAA0"</code><code>></code>

<code> </code><code></</code><code>VerticalLayout</code><code>></code>

<code></</code><code>Window</code><code>></code>

根据字面意思可以很容易看出XML文件所表示的窗体属性，窗体大小（size）为800X600，窗口圆角大小（roundcorner）为(3,3)等等。

接下来，创建DuilibDemo程序来读取解析该XML文件创建对应的窗体（注：对应的具体实现代码暂不作具体解释，在笔记最后会给出配对的代码方便下载查阅。

通过第二步中创建的简单空白窗体，可能发现最终窗体效果和MFC方式创建的并没什么太大区别。因为上述简单窗体的创建只是读取解析XML然后创建对应的窗体，具体的相关消息流程都暂未做处理。所以，接下来，我们通过做一个标题栏的创建来演示说明。

3.1 屏蔽系统标题栏

在此之间，我们得屏蔽掉系统标题栏。在消息处理函数中，我们通过在消息处理函数HandleMessage中对消息WM_NCACTIVATE、WM_NCCALCSIZE、WM_NCPAINT处理来屏蔽系统标题栏，具体屏蔽消息处理代码如下（可在配对的代码中查看）：

<code>LRESULT</code> <code>CMainWndDlg::OnNcActivate(</code><code>UINT</code> <code>uMsg,</code><code>WPARAM</code> <code>wParam,</code><code>LPARAM</code> <code>lParam,</code><code>BOOL</code><code>& bHandled)</code>

<code> </code><code>if</code><code>( ::IsIconic(*</code><code>this</code><code>) ) bHandled = FALSE;</code>

<code> </code><code>return</code> <code>(wParam == 0) ? TRUE : FALSE;</code>

<code>LRESULT</code> <code>CMainWndDlg::OnNcCalcSize(</code><code>UINT</code> <code>uMsg,</code><code>WPARAM</code> <code>wParam,</code><code>LPARAM</code> <code>lParam,</code><code>BOOL</code><code>& bHandled)</code>

<code> </code><code>return</code> <code>0;</code>

<code>LRESULT</code> <code>CMainWndDlg::OnNcPaint(</code><code>UINT</code> <code>uMsg,</code><code>WPARAM</code> <code>wParam,</code><code>LPARAM</code> <code>lParam,</code><code>BOOL</code><code>& bHandled)</code>

这样之后运行就会得到一个不带系统标题栏的灰色空白窗体。

3.2 创建自绘标题栏

屏蔽系统标题栏之后，接下来就可以创建自绘标题栏了。其实创建自绘标题栏不需要额外修改程序代码部分，只需要在XML中添加标题栏Caption部分的布局即可。对于标题栏，我们所熟知的主要是分为两部分：左上角的title和右上角的系统按钮。再加上标题栏本身占有一部分区域，而且在该区域可以支持鼠标拖动窗体的，所有在原有的xml文件基础上对应的我们需要添加修改的地方有三处：

3.2.1）区域大小声明。在创建窗体的时候根据需要提前指定窗体可拖动标题栏大小边距。

<code><Window size=</code><code>"800,600"</code> <code>caption=</code><code>"0,0,0,64"</code> <code>roundcorner=</code><code>"4,4"</code><code>></code>

3.2.2）Title区域

<code><</code><code>HorizontalLayout</code> <code>name</code><code>=</code><code>"captionTitle"</code> <code>childpadding</code><code>=</code><code>"6"</code><code>></code>

<code> </code><code><</code><code>Control</code> <code>width</code><code>=</code><code>"10"</code> <code>/> </code><code></code>

<code> </code><code><</code><code>VerticalLayout</code><code>></code>

<code> </code><code><</code><code>Control</code> <code>height</code><code>=</code><code>"20"</code> <code>/></code>

<code> </code><code><</code><code>Label</code> <code>text</code><code>=</code><code>"Demo演示窗体"</code> <code>textcolor</code><code>=</code><code>"#FF447AA1"</code> <code>width</code><code>=</code><code>"200"</code> <code>/></code>

<code></</code><code>HorizontalLayout</code><code>></code>

3.2.3）系统按钮区域

<code><</code><code>HorizontalLayout</code> <code>name</code><code>=</code><code>"captionSysBtn"</code> <code>width</code><code>=</code><code>"126"</code> <code>height</code><code>=</code><code>"24"</code> <code>inset</code><code>=</code><code>"0,1,0,0"</code><code>></code>

<code> </code><code><</code><code>Button</code> <code>name</code><code>=</code><code>"menuBtn"</code> <code>maxwidth</code><code>=</code><code>"26"</code> <code>maxheight</code><code>=</code><code>"17"</code> <code>normalimage</code><code>=</code><code>"file='sys_dlg_menu.png' source='52,0,78,17'"</code> <code>hotimage</code><code>=</code><code>"file='sys_dlg_menu.png' source='26,0,52,17'"</code> <code>pushedimage</code><code>=</code><code>"file='sys_dlg_menu.png' source='0,0,26,17'"</code><code>/></code>

<code> </code><code><</code><code>Button</code> <code>name</code><code>=</code><code>"minBtn"</code> <code>maxwidth</code><code>=</code><code>"26"</code> <code>maxheight</code><code>=</code><code>"17"</code> <code>normalimage</code><code>=</code><code>"file='sys_dlg_min.png' source='52,0,78,17'"</code> <code>hotimage</code><code>=</code><code>"file='sys_dlg_min.png' source='26,0,52,17'"</code> <code>pushedimage</code><code>=</code><code>"file='sys_dlg_min.png' source='0,0,26,17'"</code><code>/></code>

<code> </code><code><</code><code>Button</code> <code>name</code><code>=</code><code>"maxBtn"</code> <code>maxwidth</code><code>=</code><code>"26"</code> <code>maxheight</code><code>=</code><code>"17"</code> <code>normalimage</code><code>=</code><code>"file='sys_dlg_max.png' source='52,0,78,17'"</code> <code>hotimage</code><code>=</code><code>"file='sys_dlg_max.png' source='26,0,52,18'"</code> <code>pushedimage</code><code>=</code><code>"file='sys_dlg_max.png' source='0,0,26,17'"</code><code>/></code>

<code> </code><code><</code><code>Button</code> <code>name</code><code>=</code><code>"restoreBtn"</code> <code>visible</code><code>=</code><code>"false"</code> <code>maxwidth</code><code>=</code><code>"26"</code> <code>maxheight</code><code>=</code><code>"17"</code> <code>normalimage</code><code>=</code><code>"file='sys_dlg_restore.png' source='52,0,78,17'"</code> <code>hotimage</code><code>=</code><code>"file='sys_dlg_restore.png' source='26,0,52,17'"</code> <code>pushedimage</code><code>=</code><code>"file='sys_dlg_restore.png' source='0,0,26,17'"</code> <code>/></code>

<code> </code><code><</code><code>Button</code> <code>name</code><code>=</code><code>"closeBtn"</code> <code>maxwidth</code><code>=</code><code>"45"</code> <code>maxheight</code><code>=</code><code>"17"</code> <code>normalimage</code><code>=</code><code>"file='sys_dlg_close.png' source='90,0,135,17'"</code> <code>hotimage</code><code>=</code><code>"file='sys_dlg_close.png' source='45,0,90,17'"</code> <code>pushedimage</code><code>=</code><code>"file='sys_dlg_close.png' source='0,0,45,17'"</code><code>/></code>

注意：为了使界面更加美观，引入了一些图片资源。比如窗体背景、按钮图片等等。具体使用方法很简单，参考代码使用即可。虽然界面效果达到了，但细心的人可能会发现，鼠标点击标题栏区域时还是会弹出系统自带的菜单等。这是因为我们目前只是在界面上达到了屏蔽了系统自带标题栏，并自绘标题栏的效果，但消息的处理还没改变。所以此处还需要添加对点击等操作的消息处理，即在HandleMessage中添加对消息WM_NCHITTEST的处理。对应OnNcHitTest分支下的处理函数如下：

<code>LRESULT</code> <code>CMainWndDlg::OnNcHitTest(</code><code>UINT</code> <code>uMsg,</code><code>WPARAM</code> <code>wParam,</code><code>LPARAM</code> <code>lParam,</code><code>BOOL</code><code>& bHandled)</code>

<code> </code><code>POINT pt; pt.x = GET_X_LPARAM(lParam); pt.y = GET_Y_LPARAM(lParam);</code>

<code> </code><code>::ScreenToClient(*</code><code>this</code><code>, &pt);</code>

<code> </code><code>RECT rcClient;</code>

<code> </code><code>::GetClientRect(*</code><code>this</code><code>, &rcClient);</code>

<code> </code><code>RECT rcCaption = m_PaintManager.GetCaptionRect();</code>

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

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

<code> </code><code>CControlUI* pControl =</code><code>static_cast</code><code><CControlUI*>(m_PaintManager.FindControl(pt));</code>

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

<code> </code><code>_tcscmp(pControl->GetClass(), _T(</code><code>"OptionUI"</code><code>)) != 0 &&</code>

<code> </code><code>_tcscmp(pControl->GetClass(), _T(</code><code>"TextUI"</code><code>)) != 0 )</code>

<code> </code><code>return</code> <code>HTCAPTION;</code>

<code> </code><code>return</code> <code>HTCLIENT;</code>

这样一来也就达到了预期的效果。当然，这只是最简单的界面效果，想要得到复杂的界面效果，首先还需要根据实际需要在界面添加相关控件绘制等等。具体的布局可以直接在上述XML文件中继续添加完善；其次，还需要对界面一些控件的消息响应的处理，具体消息效应会在后续章节提到。

Duilib中实际上提供了所见即所得的窗体设计器UIDesigner。

对于习惯了MFC对话框中直接拖控件来布局的人来说或许很喜欢这个设计器。这个设计器同样也是可以直接拖放相关控件来完成布局，最终保存会自动生成对应的XMl文件。如果熟悉了XML布局后，实际上手写起来或许会更方便，而且对于一些复杂的界面布局来说，手动写XML文件应该比用该设计器要方便的多。

1）上述的布局只是简单的布局，在布局中很多控件的属性可以参考下载的duilib中的“属性文件.xml”中罗列的信息。

2）全局属性。在上述最终的Demo图片中可以发现字体和默认的有些不一样，实际上是进行了相关设置。对于字体、Default之类的的属性设置具体参考例子代码：

<code><</code><code>Font</code> <code>name</code><code>=</code><code>"宋体"</code> <code>size</code><code>=</code><code>"12"</code> <code>bold</code><code>=</code><code>"true"</code> <code>underline</code><code>=</code><code>"true"</code><code>/></code>

这里我们定义了四种字体样式，序号默认从0开始依次递增。而要具体使用时，如Demo中标题栏的字体设置：

<code><</code><code>Label</code> <code>text</code><code>=</code><code>"Demo演示窗体"</code> <code>textcolor</code><code>=</code><code>"#FF447AA1"</code> <code>width</code><code>=</code><code>"200"</code> <code>font</code><code>=</code><code>"3"</code> <code>/></code>

这里font=”3″就表示Label中的文字使用序号3对应的<Font name=”宋体” size=”22″ bold=”true”/>这种样式。

3）布局这块，上述只是简单的一个布局，引导大家熟悉。对于如何更好的学会布局，一方面可以随着后续深入学习，进一步熟悉相关控件及属性后，要能灵活运用大到实际例子中；另一方面，一个很好的方法就是查看一些例子，通过例子来学习。对于设计好的布局，可以直接通过UIDesigner来打开XML文件可以很方便的即时查看界面样例。

Duilib学习笔记《02》— 界面布局

继续阅读

关于Flex及AS3的百多条小小知识

Socket套接字类 AS3

Flash AS3 连续加载外部若干图片

tomcat conf目录下web.xml tomcat-users.xml server.xml context.xml这四个文件的作用

Silverlight调用WCF服务，在添加WCF服务引用时，报错如下：

Docker-compose 进行Doris自动化编排部署

sqli-labs第一关--报错注入练习

小程序自定义button组件获取用户信息（用户授权登录）

服装信息化数字化变革

写一个Junit类...在Spring中

jqGrid的使用笔记：5. 事件

invalid byte 1 of 1-byte UTF-8 sequence

出现invalid byte 1 of 1-byte UTF-8 sequence问题

为什么要选择UniDAC

SIP Presence SUBSCRIBE-NOTIFY

QName是什么