Duilib学习笔记《02》— 界面布局
1. 界面描述XML文件
Duilib主要是通过XML来进行界面的布局配置,程序通过读取并解析XML文件来创建对应的窗体。DuiLib的页面布局分为三类:窗体(Window)、容器(Contain)和控件(Control)。顾名思义窗体就是要创建的窗口,容器则相当于是窗体内的一个子窗体,可以在容器内添加容器或者控件,当然定义的位置也都是相对与容器内的左上顶点;控件就是一些常用的Button、Edit、Label等窗体上的基本元素。
容器经常使用的有VerticalLayout(垂直布局容器)、HorizontalLayout(水平布局容器)、TabLayout(页标签布局容器)、RichEdit(富文本框)、Combo(下拉文本框)、List(列表)
控件经常使用的有Label(标签)、Button(按钮)、Option(选择框)、Edit(文本框)、ScrollBar(滚动条)等等。
首先根节点必须是Window,这个表示窗体,然后在跟节点内可以添加内容。各节点可以添加属性,属性包含 名字、位置、大小、背景色、前景色、背景图片、显示文本、鼠标悬浮提示等等。(注:在duilib中有一份”属性列表.xml”的文件,详细罗列了每个空间对应的属性,方便使用时查阅)
2. 简单空白窗体界面
此处以创建一个简单的空白的灰色背景窗体为例。对应的XML布局文件对应的也就很简单。如下:
<?xml version="1.0" encoding="UTF-8"?>
<Window size="800,600" roundcorner="4,4">
<VerticalLayout bkcolor="#AAA0AAA0">
</VerticalLayout>
</Window>
根据字面意思可以很容易看出XML文件所表示的窗体属性,窗体大小(size)为800X600,窗口圆角大小(roundcorner)为(3,3)等等。
接下来,创建DuilibDemo程序来读取解析该XML文件创建对应的窗体(注:对应的具体实现代码暂不作具体解释,在笔记最后会给出配对的代码方便下载查阅。本节主要是针对XML窗体布局部分,具体代码如何显示后续会具体单独详解),效果如下:

3. 标题栏创建
在此之间,我们得屏蔽掉系统标题栏。在消息处理函数中,我们通过在消息处理函数HandleMessage中对消息WM_NCACTIVATE、WM_NCCALCSIZE、WM_NCPAINT处理来屏蔽系统标题栏,具体屏蔽消息处理代码如下(可在配对的代码中查看):
LRESULT CMainWndDlg::OnNcActivate(UINT uMsg, WPARAM wParam, LPARAM lParam, BOOL& bHandled)
{
if( ::IsIconic(*this) ) bHandled = FALSE;
return (wParam == ) ? TRUE : FALSE;
}
LRESULT CMainWndDlg::OnNcCalcSize(UINT uMsg, WPARAM wParam, LPARAM lParam, BOOL& bHandled)
{
return ;
}
LRESULT CMainWndDlg::OnNcPaint(UINT uMsg, WPARAM wParam, LPARAM lParam, BOOL& bHandled)
{
return ;
}
这样之后运行就会得到一个不带系统标题栏的灰色空白窗体。
屏蔽系统标题栏之后,接下来就可以创建自绘标题栏了。其实创建自绘标题栏不需要额外修改程序代码部分,只需要在XML中添加标题栏Caption部分的布局即可。对于标题栏,我们所熟知的主要是分为两部分:左上角的title和右上角的系统按钮。再加上标题栏本身占有一部分区域,而且在该区域可以支持鼠标拖动窗体的,所有在原有的xml文件基础上对应的我们需要添加修改的地方有三处:
3.2.1)区域大小声明。在创建窗体的时候根据需要提前指定窗体可拖动标题栏大小边距。
<Window size="800,600" caption="0,0,0,64" roundcorner="4,4">
3.2.2)Title区域
<HorizontalLayout name="captionTitle" childpadding="">
<Control width="" /> <!-- 占空位,占据左边10个单位大小空位 -->
<VerticalLayout>
<Control height="" />
<Label text="Demo演示窗体" textcolor="#FF447AA1" width="" />
</VerticalLayout>
</HorizontalLayout>
3.2.3)系统按钮区域
<HorizontalLayout name="captionSysBtn" width="" height="" inset="0,1,0,0">
<Button name="menuBtn" maxwidth="" maxheight="" normalimage="file='sys_dlg_menu.png' source='52,0,78,17'" hotimage="file='sys_dlg_menu.png' source='26,0,52,17'" pushedimage="file='sys_dlg_menu.png' source='0,0,26,17'"/>
<Button name="minBtn" maxwidth="" maxheight="" normalimage="file='sys_dlg_min.png' source='52,0,78,17'" hotimage="file='sys_dlg_min.png' source='26,0,52,17'" pushedimage="file='sys_dlg_min.png' source='0,0,26,17'"/>
<Button name="maxBtn" maxwidth="" maxheight="" normalimage="file='sys_dlg_max.png' source='52,0,78,17'" hotimage="file='sys_dlg_max.png' source='26,0,52,18'" pushedimage="file='sys_dlg_max.png' source='0,0,26,17'"/>
<Button name="restoreBtn" visible="false" maxwidth="" maxheight="" normalimage="file='sys_dlg_restore.png' source='52,0,78,17'" hotimage="file='sys_dlg_restore.png' source='26,0,52,17'" pushedimage="file='sys_dlg_restore.png' source='0,0,26,17'" />
<Button name="closeBtn" maxwidth="" maxheight="" normalimage="file='sys_dlg_close.png' source='90,0,135,17'" hotimage="file='sys_dlg_close.png' source='45,0,90,17'" pushedimage="file='sys_dlg_close.png' source='0,0,45,17'"/>
</HorizontalLayout>
注意:为了使界面更加美观,引入了一些图片资源。比如窗体背景、按钮图片等等。具体使用方法很简单,参考代码使用即可。虽然界面效果达到了,但细心的人可能会发现,鼠标点击标题栏区域时还是会弹出系统自带的菜单等。这是因为我们目前只是在界面上达到了屏蔽了系统自带标题栏,并自绘标题栏的效果,但消息的处理还没改变。所以此处还需要添加对点击等操作的消息处理,即在HandleMessage中添加对消息WM_NCHITTEST的处理。对应OnNcHitTest分支下的处理函数如下:
LRESULT CMainWndDlg::OnNcHitTest(UINT uMsg, WPARAM wParam, LPARAM lParam, BOOL& bHandled)
{
POINT pt; pt.x = GET_X_LPARAM(lParam); pt.y = GET_Y_LPARAM(lParam);
::ScreenToClient(*this, &pt);
RECT rcClient;
::GetClientRect(*this, &rcClient);
RECT rcCaption = m_PaintManager.GetCaptionRect();
if( pt.x >= rcClient.left + rcCaption.left && pt.x < rcClient.right - rcCaption.right \
&& pt.y >= rcCaption.top && pt.y < rcCaption.bottom ) {
CControlUI* pControl = static_cast<CControlUI*>(m_PaintManager.FindControl(pt));
if( pControl && _tcscmp(pControl->GetClass(), _T("ButtonUI")) != &&
_tcscmp(pControl->GetClass(), _T("OptionUI")) != &&
_tcscmp(pControl->GetClass(), _T("TextUI")) != )
return HTCAPTION;
}
return HTCLIENT;
}
这样一来也就达到了预期的效果。当然,这只是最简单的界面效果,想要得到复杂的界面效果,首先还需要根据实际需要在界面添加相关控件绘制等等。具体的布局可以直接在上述XML文件中继续添加完善;其次,还需要对界面一些控件的消息响应的处理,具体消息效应会在后续章节提到。上述布局完成后对应的效果如下:

4. UIDesigner
Duilib中实际上提供了所见即所得的窗体设计器UIDesigner。如下图所示:

对于习惯了MFC对话框中直接拖控件来布局的人来说或许很喜欢这个设计器。这个设计器同样也是可以直接拖放相关控件来完成布局,最终保存会自动生成对应的XMl文件。如果熟悉了XML布局后,实际上手写起来或许会更方便,而且对于一些复杂的界面布局来说,手动写XML文件应该比用该设计器要方便的多。
5. 补充说明
1)上述的布局只是简单的布局,在布局中很多控件的属性可以参考下载的duilib中的“属性文件.xml”中罗列的信息。
2)全局属性。在上述最终的Demo图片中可以发现字体和默认的有些不一样,实际上是进行了相关设置。对于字体、Default之类的的属性设置具体参考例子代码:
<Font name="宋体" size="" bold="true" />
<Font name="宋体" size="" bold="true" underline="true"/>
<Font name="宋体" size="" />
<Font name="宋体" size="" bold="true"/>
这里我们定义了四种字体样式,序号默认从0开始依次递增。而要具体使用时,如Demo中标题栏的字体设置:
<Label text="Demo演示窗体" textcolor="#FF447AA1" width="" font="" />
这里font=”3″就表示Label中的文字使用序号3对应的<Font name=”宋体” size=”22″ bold=”true”/>这种样式。
3)布局这块,上述只是简单的一个布局,引导大家熟悉。对于如何更好的学会布局,一方面可以随着后续深入学习,进一步熟悉相关控件及属性后,要能灵活运用大到实际例子中;另一方面,一个很好的方法就是查看一些例子,通过例子来学习。对于设计好的布局,可以直接通过UIDesigner来打开XML文件可以很方便的即时查看界面样例。
最后附上本节对应的代码(说明,后续章节都是基于此代码逐步完善)。代码下载
Duilib学习笔记《02》— 界面布局的更多相关文章
- Python:GUI之tkinter学习笔记2界面布局显示
相关内容: pack 介绍 常用参数 使用情况 常用函数 grid 介绍 常用参数 使用情况 常用函数 place 介绍 常用参数 使用情况 常用函数 首发时间:2018-03-04 14:20 pa ...
- Duilib学习笔记《04》— 窗体显示
在前面已经了解了duilib控件以及界面布局相关内容,接下来就要考虑该如何将xml中描述的布局通过界面展现出来.实际上在 Duilib学习笔记<01> 中我们已经简单提到过基本的流程及元素 ...
- Duilib学习笔记《03》— 控件使用
在前面已经对duilib有个一个基本的了解,并且创建了简单的空白窗体.这仅仅只是一个开始,如何去创建一个绚丽多彩的界面呢?这就需要一些控件元素(按钮.文本框.列表框等等)来完善. 一. Duilib控 ...
- Duilib学习笔记《06》— 窗体基类WindowImpBase
在前面的例子中我们发现,窗口都是继承CWindowWnd.INotifyUI,然后重载相关函数去实现.显然,我们发现窗口的创建流程实际上都是差不多的,主要只是在OnCreate加载的配置文件不同等等… ...
- 软件测试之loadrunner学习笔记-02集合点
loadrunner学习笔记-02集合点 集合点函数可以帮助我们生成有效可控的并发操作.虽然在Controller中多用户负载的Vuser是一起开始运行脚本的,但是由于计算机的串行处理机制,脚本的运行 ...
- DuiLib学习笔记(二) 扩展CScrollbar属性
DuiLib学习笔记(二) 扩展CScrollbar属性 Duilib的滚动条滑块默认最小值为滚动条的高度(HScrollbar)或者宽度(VScrollbar).并且这个值默认为16.当采用系统样式 ...
- Duilib学习笔记《05》— 消息响应处理
在Duilib学习笔记<04>中已经知道了如何将窗体显示出来,而如何处理窗体上的事件.消息呢? 一. 系统消息 窗体显示的时候我们就已经说了,窗体是继承CWindowWnd类的,对于窗体的 ...
- 机器学习实战(Machine Learning in Action)学习笔记————02.k-邻近算法(KNN)
机器学习实战(Machine Learning in Action)学习笔记————02.k-邻近算法(KNN) 关键字:邻近算法(kNN: k Nearest Neighbors).python.源 ...
- OpenCV 学习笔记 02 使用opencv处理图像
1 不同色彩空间的转换 opencv 中有数百种关于不同色彩空间的转换方法,但常用的有三种色彩空间:灰度.BRG.HSV(Hue-Saturation-Value) 灰度 - 灰度色彩空间是通过去除彩 ...
- 微信小程序开发:学习笔记[4]——样式布局
微信小程序开发:学习笔记[4]——样式布局 Flex布局 新的布局方式 在小程序开发中,我们需要考虑各种尺寸终端设备上的适配.在传统网页开发,我们用的是盒模型,通过display:inline | b ...
随机推荐
- sql server中的左连接与右连接的简便写法
左连接 *=(左表中的数据全部显示出来,右表中没有相关联的数据显示null) select Users.*,Department.name as DepartmentName from Users,D ...
- Linux命令(14)文件和文件夹权限管理:chmod
linux文件和文件夹权限简介: chmod命令用于改变linux系统文件或目录的访问权限.用它控制文件或目录的访问权限. Linux系统中的每个文件和目录都有访问许可权限,用它来确定谁可以通过何种方 ...
- android xml操作
import java.io.FileInputStream; import java.io.FileOutputStream; import java.util.ArrayList; import ...
- java位运算
Java的位运算(bitwise operators)直接对整数类型的位进行操作,这些整数类型包括long.int.short.char和 byte,位运算符具体如下表: 运算符 说明 << ...
- 使用Async和Await进行异步编程(C#版 适用于VS2015) z
你可以使用异步编程来避免你的应用程序的性能瓶颈并且加强总体的响应.然而,用传统的技术来写异步应用是复杂的,同时编写,调试和维护都很困难. VS2012介绍了简单的方法,那就是异步编程,它在.Net F ...
- dede织梦列表页如何调用全站子栏目
网站原代码:{dede:channel type='son'} <a href="[field:typelink/]">[field:typename/]</a& ...
- SQL锁表解决并发性
在数据库开发过程中,不得不考虑并发性的问题,因为很有可能当别人正在更新表中记录时,你又从该表中读数据,那你读出来的数据有可能就不是你希望得到的数据.可以说有些数据同时只能有一个事物去更新,否则最终显示 ...
- C++学习48 对ASCII文件的读写操作
如果文件的每一个字节中均以ASCII代码形式存放数据,即一个字节存放一个字符,这个文件就是ASCII文件(或称字符文件).程序可以从ASCII文件中读入若干个字符,也可以向它输出一些字符. 对ASCI ...
- C#中修改Dll文件 (反编译后重新编译)
Dll文件生成后,如没有源代码,又要修改其中内容 可以用微软自带的ildasm和ilasm程序 先用ildasm将dll文件反编译成il文件 ildasm Test.dll /out=Test.il ...
- java利用过滤器实现编码的转换,内容输出的替换
在页面建个表单 <form action="login.do" method="post"> <input type="text&q ...