找软件用软件,到华军软件宝库!
您的位置:华军软件宝库>下载分类>图像处理>图形图像>PC软件>

Dui Designer

Dui Designer

Dui Designer 1.0.6.158 官方版

  • 版  本:1.0.6.158 官方版
  • 软件授权:免费软件
  • 软件大小:0.34M
  • 软件语言:简体中文
  • 应用平台:winall
  • 更新时间:2019-07-29
基本简介
Dui Designer

Dui Designer官方版是一款高效实用的专业化UI界面设计器,Dui Designer最新版功能强劲,以DuiLib官方版本修改版打造,修复了name属性不能保存,控件视图不能及时更新,不存在bkcolor3属性,Dui Designer软件便捷好用,不能退出预览等一些BUG也已修复。

Dui Designer

Dui Designer软件介绍

  1、打开设计器:

  在duilib源码的bin目录里,【DuiDesigner.exe】就是UI设计器(这个设计器需要重新编译一次,不然打开XML会崩溃)。

Dui Designer

  2、新建项目:

  菜单里选择【文件】--【新建】--【文件】,再点击保存将文件保存到指定路径。

Dui Designer

  3、新建布局:

  由于前面的教程已经详细讲过布局和标题栏,所以这里直接弄出一个标题栏布局。

  (1)加上一个VerticalLayout 布局,做为整个窗口的布局(由于设计器不能拖拽控件,所以需要先点击工具箱里的VerticalLayout 控件,再点击界面,即可加上控件),如图:

Dui Designer
Dui Designer

  (2)加上一个HorizontalLayout 布局,做为标题栏的布局:

Dui Designer

  发现HorizontalLayout 布局并没有沾满整个窗口的宽度,所以需要调整,

  在属性里面,将【Size】展开,将【Width】填为0,即可自动拉伸宽度。(注意,需要先点击一个控件,才能设置属性,不要点错了控件哦~)

Dui Designer
Dui Designer

  (3)加上两个VerticalLayout 布局,做为标题栏的左边的占位布局和右边的按钮布局(前面已经介绍过,VerticalLayout 和 HorizontalLayout 有时候可以互换,但是用交叉的方式一般都不会错,交叉方式即VerticalLayout 子节点和父节点都是HorizontalLayout ,而兄弟节点是VerticalLayout ):

  右边的布局width改为77

Dui Designer

  注意,别把布局点错了位置,此时左边的树形应该如下图:

Dui Designer

  (4)布局好了之后,我们往上面加按钮:

  先点击Button控件,再点击右上角的按钮布局,可以看到下图:

Dui Designer

  这时可以拖拽边框调节控件大小,也可以拖动控件的位置。

Dui Designer

  此时我们可以按Ctrl+C、Ctrl+V复制按钮

Dui Designer

  然后把按钮拖到相应位置

Dui Designer

  同理,加上第三个按钮,如下图:

Dui Designer

  这个时候,我们可以将三个按钮顶端对齐:

  先选中三个按钮

Dui Designer

  ,然后点击【顶端对齐】按钮

Dui Designer

  。

  接着点击【横向】按钮

Dui Designer

  ,使三个按钮水平方向均匀间隔开来。

  方法已经举例说明了,具体的位置和间隔还需要小伙伴们慢慢调整。

  可以看到设计器调整控件的位置和大小还是很方便的~

  注意,要记住时不时的按下Ctrl + S,不然设计器崩溃了,就不好了~

Dui Designer

  下面我们来看看XML的内容,在Tab上面右键,选择【打开所在的文件夹】,

Dui Designer

  然后打开XML(发现只是打开文件夹,木有定位到文件o(╯□╰)o),此时的XML文件的内容如下:

Dui Designer

  (5)其实到这里,就可以抛弃UI设计器啦~~~

  但是好歹是大神花了心血搞出来的,其实多用用SVN,记得随时Ctrl+S,还是可以放心的用的~

  下面就接着介绍一些属性吧,

  在duilib源码的目录下,有一个文件【属性列表.xml】,这里介绍了所有控件的属性,虽然有一点点遗漏,但是已经够啦。

  所以详细属性就请看【属性列表.xml】,这里只介绍一些常用的属性。

  我们先给窗口背景换成绿色,

  选择整个窗口的布局后,设置【BkColor】属性即可

Dui Designer
Dui Designer
Dui Designer

  同理,设置标题栏布局的背景色,由于标题栏布局已经被两个子布局遮住,所以这时需要点击左侧的树形控件

Dui Designer

  然后给按钮也加上背景色,

Dui Designer

  现在我们把标题栏换成渐变色,

  除了设置【BkColor】外,再设置【BkColor2】即可,

  把窗口背景换成三色渐变,再设置【BkColor3】即可,不好意思,设计器里面木有这个属性,需要手动在XML里添加~~~

  一切就绪以后,我们可以点击【测试窗体】按钮看看窗口效果

Dui Designer
Dui Designer

  按下【Esc】键即可关闭【测试窗体】

Dui Designer使用方法

Dui Designer

  如上图,Dui Designer官方版主要分为六大模块。

  1为皮肤设计窗口,在上面添加控件规划你的皮肤。

  2为WND窗口,请单击1与2,看属性栏变化。

  3为控件添加窗口

  4为属性设置窗口

  5为窗口测试及控件对齐窗口

  6为已添加控件层次查看窗口,当然它有三个TAB,只有控件层次才最有用。

  在编写XML的时候,一定注意:

  DUILIB XML一定要有一个底层 Layout!!!

  不能直接在 WND上添加控件!

  说明,这个工具可能会有诸多BUG,属性更改失效、时不时崩溃等,不过我遇到崩溃的情况比较少,新手可能会遇到较多,但不要抱怨,毕竟有这样一个工具已经是十分难能可贵了。

  可能你已经看了属性栏中有诸多属性,你可以试着添加图片,修改颜色,修改边框等查看一下,然后你也可以看一下WND的属性,CAPION到底是什么,MINMAXINFO又是什么。

Dui Designer更新日志

  1、修复上个版本的bug

  2、优化部分功能

华军小编推荐:

小编保证,只要你用上了Dui Designer,如果不喜欢你过来打我!小编还为您准备了{recommendWords}

 

软件截图
  • Dui Designer
Dui Designer下载地址
网友评论
网名:
(您的评论需要经过审核才能显示)
  • 置顶 51网友 20-12-31 16:14:29
    Dui Designer软件非常好用,下载速度很快,很方便!
  • 置顶 51网友 20-04-16 04:27:58
    Dui Designer整体感觉不错,还是挺满意的,安装运行很流畅!按照安装步骤指导来非常顺利!
  • 置顶 51网友 22-03-07 00:42:53
    Dui Designer还不错,下载非常快,送你个好评!
  • 置顶 51网友 19-12-10 02:02:07
    Dui Designer功能全面,使用也挺方便的。
  • 置顶 51网友 21-06-12 23:04:43
    Dui Designer下载之后安装很简单,按照安装步骤指导来非常顺利。使用也很方便。
  • 置顶 51网友 20-05-06 20:12:18
    Dui Designer下载安装使用一条龙,界面设计很容易上手,功能很丰富,真方便,挺你!
  • 7楼 51网友 19-08-06 10:41:26
    Dui Designer方便,一目了然,安装非常简单,真棒!!
  • 8楼 51网友 20-11-24 02:13:02
    Dui Designer整体感觉不错,还是挺满意的
  • 9楼 51网友 20-01-25 00:53:03
    Dui Designer很好很棒棒哦!!!
  • 10楼 51网友 22-01-19 14:08:07
    Dui Designer功能全面,使用也挺方便的,大力推荐!
关闭 剩余5广告
重播×