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布局文件对应的也就很简单。如下:

1 <?xml version="1.0" encoding="UTF-8"?>
2 <Window size="800,600" roundcorner="4,4">
3     <VerticalLayout bkcolor="#AAA0AAA0">
4     </VerticalLayout>
5 </Window>

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

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

 

3. 标题栏创建

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

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

1 LRESULT CMainWndDlg::OnNcActivate(UINT uMsg, WPARAM wParam, LPARAM lParam, BOOL& bHandled)
2 {
3     if( ::IsIconic(*this) ) bHandled = FALSE;
4     return (wParam == 0) ? TRUE : FALSE;
5 }
6 LRESULT CMainWndDlg::OnNcCalcSize(UINT uMsg, WPARAM wParam, LPARAM lParam, BOOL& bHandled)
7 {
8     return 0;
9 }
10 LRESULT CMainWndDlg::OnNcPaint(UINT uMsg, WPARAM wParam, LPARAM lParam, BOOL& bHandled)
11 {
12     return 0;
13 }

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

3.2 创建自绘标题栏

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

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

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

3.2.2)Title区域

1 <HorizontalLayout name="captionTitle" childpadding="6">
2     <Control width="10" />    <!-- 占空位,占据左边10个单位大小空位 -->
3     <VerticalLayout>
4         <Control height="20" />
5         <Label text="Demo演示窗体" textcolor="#FF447AA1" width="200"  />
6     </VerticalLayout>
7 </HorizontalLayout>

3.2.3)系统按钮区域

1 <HorizontalLayout name="captionSysBtn" width="126" height="24" inset="0,1,0,0">
2     <Button name="menuBtn" maxwidth="26" maxheight="17" 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'"/>
3     <Button name="minBtn" maxwidth="26" maxheight="17" 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'"/>
4     <Button name="maxBtn" maxwidth="26" maxheight="17" 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'"/>
5     <Button name="restoreBtn" visible="false" maxwidth="26" maxheight="17" 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'" />
6     <Button name="closeBtn" maxwidth="45" maxheight="17" 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'"/>
7 </HorizontalLayout>

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

1 LRESULT CMainWndDlg::OnNcHitTest(UINT uMsg, WPARAM wParam, LPARAM lParam, BOOL& bHandled)
2 {
3     POINT pt; pt.x = GET_X_LPARAM(lParam); pt.y = GET_Y_LPARAM(lParam);
4     ::ScreenToClient(*this, &pt);
5     RECT rcClient;
6     ::GetClientRect(*this, &rcClient);
7     RECT rcCaption = m_PaintManager.GetCaptionRect();
8     if( pt.x >= rcClient.left + rcCaption.left && pt.x < rcClient.right - rcCaption.right \
9         && pt.y >= rcCaption.top && pt.y < rcCaption.bottom ) {
10             CControlUI* pControl = static_cast<CControlUI*>(m_PaintManager.FindControl(pt));
11             if( pControl && _tcscmp(pControl->GetClass(), _T("ButtonUI")) != 0 &&
12                 _tcscmp(pControl->GetClass(), _T("OptionUI")) != 0 &&
13                 _tcscmp(pControl->GetClass(), _T("TextUI")) != 0 )
14                 return HTCAPTION;
15     }
16     return HTCLIENT;
17 }

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



4. UIDesigner

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


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


5. 补充说明

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

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

1 <Font name="宋体" size="13" bold="true" />
2 <Font name="宋体" size="12" bold="true" underline="true"/>
3 <Font name="宋体" size="12" />
4 <Font name="宋体" size="22" bold="true"/>

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

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

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

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

目录
相关文章
|
29天前
|
XML 编解码 Android开发
安卓开发中的自定义视图控件
【9月更文挑战第14天】在安卓开发中,自定义视图控件是一种高级技巧,它可以让开发者根据项目需求创建出独特的用户界面元素。本文将通过一个简单示例,引导你了解如何在安卓项目中实现自定义视图控件,包括创建自定义控件类、处理绘制逻辑以及响应用户交互。无论你是初学者还是有经验的开发者,这篇文章都会为你提供有价值的见解和技巧。
34 3
|
5月前
|
C++
C++ Qt开发:自定义Dialog对话框组件
在之前的文章中笔者已经为大家展示了默认`Dialog`组件的使用方法,虽然内置组件支持对数据的输入,但有时候我们需要一次性输入多个数据,此时如果之使用默认模态对话框似乎不太够用,此时我们需要自己创建一个自定义对话框,需要说明的是此类对话框也是一种窗体,所以可以在其上面放置任何通用组件,以实现更多复杂的开发需求。自定义对话框需要解决的问题是,如何让父窗体与子窗体进行数据交换,要实现数据的交换有两种方式,第一种方式是通过动态加载模态对话框,当用户点击确定后通过`GetValue()`来拿到数据,而第二种方式则是通过发送信号的方式将数据投递给父窗体,这两种方式都可以,读者可根据自身需求来选择不同的通
C++ Qt开发:自定义Dialog对话框组件
|
5月前
|
数据安全/隐私保护
Qt6学习笔记六(界面布局)
Qt6学习笔记六(界面布局)
94 0
CocosCreator3.8研究笔记(二十三)CocosCreator 动画系统-动画编辑器相关功能面板说明
CocosCreator3.8研究笔记(二十三)CocosCreator 动画系统-动画编辑器相关功能面板说明
156 0
|
程序员 C语言
Qt编写自定义控件50-迷你仪表盘
一、前言 这个控件取名叫迷你仪表盘,是以为该控件可以缩小到很小很小的区域显示,非常适合小面积区域展示仪表数据使用,还可以手动触摸调节进度,是我个人觉得最漂亮小巧的一个控件。初次看到类似的控件是在一个音乐视频编辑软件中,用来展示左通道右通道音量等,有非常多的类似的迷你仪表盘在整个软件系统中,用户可以直接鼠标滑动调节,以最小的占用区域展示最大的信息,漂亮!本控件还拓展了可以左右等分显示,比如中间的值是0,左侧就是低于0的值区域,右侧就是大于0的值区域,进度不一样展示,支持左右旋转角度设置以及各种颜色的设置。
908 0
|
开发工具 C语言
Qt编写自定义控件6-指南针仪表盘
一、前言 指南针仪表盘,主要用来指示东南西北四个方位,双向对称两个指针旋转,其实就是360度打转,功能属于简单型,可能指针的绘制稍微难一点,需要计算多个点构成多边形,本系列控件文章将会连续发100+篇,一方面为了锻炼自己的毅力+坚持力,一方面为了宣传自己,如果各位对完整的源码有兴趣可以私聊,也欢迎...
1156 0
UWP开发入门(十五)——在FlipView中通过手势操作图片
原文:UWP开发入门(十五)——在FlipView中通过手势操作图片   本篇的最终目的,是模拟系统的照片APP可以左右滑动,缩放图片的操作。在实现的过程中,我们会逐步分析UWP编写UI的一些思路和技巧。
1574 0