DuiEditor简易教程
一,DuiEditor是什么?
DuiEditor是duilib界面库的界面设计器,编写过程中参考了老版DuiDesignner的大量代码,改名只是为了稍作区分,没有任何剽窃或不尊重原作者之意。其实这个工具已经写了好几年了,提不起太大的兴趣写什么教程,自己好用就行,毫无疑问的,设计器比手写xml大大的提高了效率。DuiEditor已经开源,任何公司或个人可以随意修改拷贝使用。
代码共享地址:
https://gitee.com/Liqs99/DuiLib_DuiEditor
https://github.com/xfcanyue/DuiLib_DuiEditor
https://download.csdn.net/download/mmcanyu/12524759
duilib设计器交流群:819272442
DuiEditor和老版DuiDesigner相比较有几个明显的优点:
1,控件和控件的属性维护太困难。如果duilib一直有专门的维护团队,这么写没什么问题。但是现在的duilib有大量的个人维护版本,一点小改动就要修改设计器,实在头大。为此,DuiEditor提供了文件载入的方式,duilib.xml保存了所有控件和控件属性,使用者只要修改这个文件就行了。
2,默认插入控件都是float方式,float布局其实用的非常的少。DuiEditor可以选择插入方式,默认是普通布局。
3,属性值冗余。DuiEditor会在保存文档时,与duilib.xml设置的默认属性比较,过滤掉默认属性。
4,DuiEditor嵌入了xml编辑界面,看起来有点像NodePad++,并且相应的加入了部分语法提示。会一点手写是非常必要的,特别是需要改动布局结构时,只用设计器是无法做到的。
大概就罗列这么几点。duilib的开发人员说起duilib设计器,总会说到有个DuiDesigner但是不好用。先别急着拒绝啊,你可以试用用看啊。
我的考虑,和你的需求,其实是一致的。你为什么不试试呢?
二,使用说明
界面展示:
这个与老版的DuiDesginer差别并不大,工具栏增加了放大缩小,float布局选项,以及设计和代码的切换。
接下来我们就以360界面为范例,从无到有做出来。这个范例可以从官方的demo中找到。
1,新建UI文件。
控件视图中选中window,设置属性值,size=800,572。
控件视图选择VerticalLayout,设置属性值,bkcolor=d1e8f5, bkcolor2=c6e0f1, bordercolor=768d9b, bordersize=1.
大致分析一下360的界面,这是一个典型纵向布局框架,标题栏、工具栏、客户区、状态栏。工具栏和客户区中间还有一条分割线。
控件视图选择VerticalLayout,在控件箱选中HorizontalLayout,然后在设计页面中单击鼠标左键,遍成功在VerticalLayout纵向布局容器中插入了一个子控件。依此操作5次即可。等一下,这样太繁琐了。我们点击工具栏的代码按钮,切换到手撸xml。
复制<HorizontalLayout /> ,在贴上四个<HorizontalLayout />。
点击工具栏设计按钮,回到设计界面。
保存文件,就保存到skin.xml的同目录,命名为skin2.xml
2,设计标题栏
选择控件树中第一个HorizontalLayout,设置height=24。
在它的下面添加2个子控件HorizontalLayout,为了好区分,我们假设添加的第一个是HA,第二个是HB。
HA设置属性,childvaligin=true。
在HA中添加一个Control, width=16, height=16, 设置bkimage=icon.png。
在HA再添加一个Text控件,valign=true,text=360安全卫士7.3。
与范例对比一下,标题的字体颜色不对,logo图标太靠近边框了。
选中HA,设置inset="5,0,0,0"。
DuiEditor菜单--->编辑--->Inset Font Node,设置字体参数。
选中刚刚添加的Text控件,设置属性,font=0,textcolor=447aa1。
再看一下范例的界面,右上角求助和论坛是2个文本按钮,还有菜单、最小化、最大化、恢复大小、关闭。一共7个按钮。
选中HB,在它下面插入7个按钮。顺手把第1第2个按钮的text属性填上。
求助和论坛这2个文本按钮,范例中使用html标签实现的字体下划线。我们也照着做,第一个按钮text属性设置为“{u}求助{/u}”,showhtml=true。第2个按钮text属性设置为“{u}论坛{/u}”,showhtml=true。
选中menubtn,在属性窗口中找到normalimage,点击进入图片选择页面。
左边文件列表选中sys_dlg_menu.png,右侧IMAGE设置source="52, 0, 78, 17",source指的是我们需要引用的区域。点击保存。
依次我们要设置normalimage,hotimage, pushimage三个属性图片,分别对应鼠标三种状态:普通状态,悬停状态,按下状态。
后面的几个按钮,依葫芦画瓢,分别设置按钮的三种状态图。效果如下图
看起来很丑啊,还要再微调一下。
选中HB,设置width=188, inset="0,1,3,0"。
menubtn,设置width=26, height=17。
minbtn,设置width=26, height=17。
maxbtn,设置width=26, height=17。
restorebtn,设置width=26, height=17。visible=false。
closebtn,设置width=45, height=17。
标题栏终于做好了。效果如下图。
在这里,HA并没有设置width,也就是width=0,这时候它的大小是父控件根据窗口大小动态计算的。这也是duilib的一大特点。
今天先介绍到这里了。88~~