duilib设计器 DuiEditor简易教程 (DuiDesigner) （一）

                                           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~~