【VC++开源代码栏目提醒】:网学会员VC++开源代码为您提供一点Duilib编程总结 - 其它资料参考,解决您在一点Duilib编程总结 - 其它资料学习中工作中的难题,参考学习。
一点 Duilib 编程总结 borlittle 2011-9-1目录 (1)更改程序默认的 WIN32 图标........................................................................................ 1 (2)使用 UIDesigner 设计皮肤 ............................................................................................. 3 (3)简单的加法计算器实例 ................................................................................................. 8 一直在寻找一个比较好的 UI 解决方案,最近一些时间看到了
开源的 Duilib库,觉得无论是其采用的 DirectUI 的设计思想还是实际的界面效果都让自己觉得非常喜欢,真有些相见恨晚的感觉。
Duilib 团队做了很多的工作,极大的方便了将 Duilib 应用到程序的设计之中。
之前在嵌入式 Linux 系统上,国内有
开源的MiniGUI 项目,而如今在 Windows
系统上也有了
开源的 Duilib 项目,是国内不可多得的 UI 项目,希望能够坚持做下去。
这里只是记录下一点自己的学习与大家分享,希望能够给其他像这样的初学者提供一些参考。
(1)更改程序默认的 WIN32 图标给程序添加资源,更改程序默认的 WIN32 图标程序编译之后就可以看到,生成的程序的图标已经从原来的 WIN32 默认图标改为了自定义的好看的图标了。
原来的 WIN32 程序默认图标自定义的图标(2)使用 UIDesigner 设计皮肤(1) ( 首先可以用踏雪流云设计的 UIDesigner 打开一个已有的 DEMO 的皮肤文件 skin.xml 将zip 皮肤解压到一个文件夹下),进行查看。
这里以 360SafeRes 的皮肤文件作为观察:示例程序运行后的界面如下图:下面打开 UIDesigner:打开示例的皮肤文件:打开后的界面如下:将左侧的控件视图的列表项收缩进行观察上图中,当鼠标单击根目录(为一个垂直布局控件)可以看到它对应图中
工作区的最底层最大的那个虚线框,如红色箭头所指。
然后单击下面的子布局控件项也可看到对应的布局区(虚线框)对应的各个布局控件包含的子控件也是类似的:上图示为程序的图标。
上图示为程序的标题。
右侧的红圈处可以设置文字的内容,字体等属性。
其他控件也是类似的:从工具箱中可以看到主要有控件和布局两大类工具: 从上面的分析就可以看到 UIDesigner 设计皮肤(程序界面)也和
VC 等 IDE 中设计是类似的,都是可视化,所见即所得的。
而且做过网页的朋友应该会觉得这样设计
程序的界面和用 Dreamweaver 等软件设计网页是非常像的,都是先设计好布局和层,然后再添加文字、图片、超链接等资源。
(2)经过上面的分析和观察,对于 UIDesigner 应该更为熟悉了,接下来就可以设计自己的程序的界面了。
首先我们也应该像
设计网页一样对自己的程序界面, 形成自己的构思,最好画出草图和布局结构图。
合理的划分布局和控件有利于简化程序的编写。
在这一点上和设计网页等 UI是相似的。
设计出草图之后我们接下来应该用图形图像设计软件,如 Photoshop 或者 Fireworks 等设计出界面的实际界面图像以及各个按钮控件等的多个状态的图像, 然后利用这些图像设计
软件带有的切片工具, 将界面图像按各个控件部分切分出来。
利用这些图像处理软件可以把我们切分好的图片直接全部导出到一个文件夹下, 也可以选择导出对应的网页 html 或者 xml文件,这样文件中会自动带有各个图片的大小和位置等信息, 有利于我们在 UIDesigner 设置对应的参数。
当然,如果以后 UIDesigner 能够直接带有图片编辑和切片功能那就会更方便了。
(3)简单的加法计算器实例下面以一个小小的实例(一个简单的加法计算器)来进行
演示:首先利用 Fireworks 设计出效果图:为了简单计,只设计程序图标,程序对话框底纹图像和几个按钮。
用多边形切片工具切出多边形按钮图形。
按下 shift 键、鼠标单击,选中要导出的切片,执行导出命令:选择路径和输出选项:则在文件夹下出现:如果之前就把各个按钮放到相应位置之后再切片导出,则打开导出的 html 文件可得到其相关的位置大小信息:做好了界面的图片素材,接下来就可以在 UIDesigner 中构建程序的皮肤了。
新建一个皮肤工程新建一个皮肤
xml 文件保存 xml 文件接下来将进入工作界面:首先将布局区的黑色矩形调整大小为我们的对话框大小。
然后从工具栏中选中“布局”中的垂直布局,到工作区窗口按住鼠标右键拖拽一下,则将出现红色边框的一个矩形,同时左侧的控件资源视图中会自动为其命名接下来要调整这个布局控件的属性,这些属性设置之后将由 Duilib 为其提供对应的功能、特性支持,因而需要仔细设置。
这里设置其大小和窗口大小一样,并为其导入背景图片:在选择图片对话框中点击“导入”按钮,可以打开文件浏览对话框,通过缩略图可以方便选择图。
如果设置上图中的“mask”的颜色并将“hole”选为“true”,我们可以实现透明和异形窗口(即背景图片中与之颜色一样的将会被除去,就像镂空雕刻一样。
然后我们继续添加一个水平布局放在顶端,作为 calc 的标题栏。
在垂直布局框里边拖动出一个长条矩形,调节其大小和位置,精细的调节可以用右侧的属性栏。
再添加一个水平布局用于显示图标和程序名称,在其中添加一个容器用于显示程序的图标:添加一个文字控件,用于显示程序名字:设置对应的属性值:注:相关的属性值的含义可以参考 Duilib 团队提供的
文档“属性
列表.xml”,其中均给出了设置示例,如下图:如果字体不怎么好看,可以自行添加字体:再添加一个水平布局,并在其中添加三个按钮用于显示和控制窗口状态:为每个按钮设置其不同状态时的图片,即从一整张图片中裁出的一部分。
继续为其添加其余状态的图片:设置之后如下:由于只绘制了三种状态的颜色,因而分配为正常状态、获得热点状态、鼠标按下状态。
接下来再添加一个水平布局,并在其中添加一个按钮,三个编辑框。
设计完毕我们可以测试一下实际运行时的界面(这个功能非常的方便, 选择 设计得很好) “格式”菜单下的“测试窗体”命令。
可以看到运行时的界面如下图中第二排那个窗口:鼠标选中测试窗口,按下“ESC”键可以退出测试状态,可以继续修改窗口的界面。
设计完程序的界面,接下来就编写程序,实现计算器的计算功能,这里以 VS2010 平台为例,在其他平台操作应该是类似的。
打开 VS2010,新建一个解决
方案和一个 WIN32 项目:输入项目名称和路径:IDE 会默认生成若干个文件,如下图: 接下来需要把 Duilib 库引入引入到项目中,首先要 Duilib 库源码编译并生成动态链接库dll 文件和对应的 lib 库文件用于实现隐式调用 Duilib 库中的函数。
将 Duilib 库导出的四个版本的文件都复制到工程目录下的 bin 文件夹之中,再将 Duilib 库中的所有头文件拷到工程目录下。
项目文件夹下结构图如下:编译前 bin 下的文件: