Duilib的简单使用（六、DuiEditor的使用（编写360xml文件））

本文链接：https://blog.csdn.net/LyRics1996/article/details/116381672

一、前言

在Duilib的简单使用（一、duilib demo）中我们介绍了利用duilib简单的构造一个项目
在Duilib的简单使用（二、xml实现界面与业务分离）中我们介绍了XML在duilib中的使用
在Duilib的简单使用（三、界面逻辑交互）中我们已经知道如何简单的进行界面的交互
在Duilib的简单使用（四、换肤）中，我们提了一下Duilib强大的一键换肤功能。
在Duilib的简单使用（五、DuiDesigner/DuiEditor的下载编译）中，我们介绍了DuiEditor的下载编译

那么这一篇我们来谈一谈，如何使用，我们就用DuiEditor来画个界面吧，360不错，毕竟大家都喜欢用duilib模仿360 好像。

二、xml文件编写

2.1 启动软件

在这里插入图片描述

2.2 新建项目

新建UI文件
在这里插入图片描述

保存为360.xml，一定要保存，因为，你不知道什么时候这个软件就崩溃了（随时可能崩溃，所以随时保存。）
在这里插入图片描述

2.3 编写主体框架

修改大小为800,572
在这里插入图片描述
修改布局颜色，

写5个HorizontalLayout

在之前的文章中，下载的duilib的代码中的bin文件夹下，有360的资源zip，复制过来，解压到当前目录。

将水平布局放到垂直布局里。

2.4 编写标题栏

添加图标和软件名
在这里插入图片描述
再写六个button

此时的xml文件如下：

<?xml version="1.0" encoding="UTF-8"?>
<Window size="800,572">
	<VerticalLayout bkcolor="0xFFd1e8f5" bkcolor2="0xffc6e0f1" bkcolor3="0xff768d9b" bordersize="1">
		<HorizontalLayout inset="5,0,0,0">
			<HorizontalLayout inset="5,0,0,0">
				<Control width="16" height="16" bkimage="icon.png" />
				<Text width="100" height="16" text="360安全卫士6.0" textcolor="0xff447aa1" />
			</HorizontalLayout>
			<HorizontalLayout width="227" height="0" inset="5,0,0,0" pos="0,0,227,0">
				<Button height="16" width="30" text="求助" />
				<Button height="16" width="30" text="论坛" />
				<Button height="16" width="30" name="menubtn" normalimage="file='sys_dlg_menu.png' dest='0,0,30,16' source='0,0,28,16' "/>
				<Button height="16" width="30" name="minbtn" normalimage="file='sys_dlg_min.png' dest='0,0,30,16' source='0,0,28,16' "/>
				<Button height="16" width="30" name="maxtn" normalimage="file='sys_dlg_max.png' dest='0,0,30,16' source='0,0,28,16' "/>
				<Button height="16" width="30" name="restorebtn" normalimage="file='sys_dlg_restore.png' dest='0,0,30,16' source='0,0,28,16' "/>
				<Button height="16" width="30" name="closebtn" normalimage="file='sys_dlg_close.png' dest='0,0,40,16' source='0,0,40,16' "/>
			</HorizontalLayout>
		</HorizontalLayout>
		<HorizontalLayout />
		<HorizontalLayout />
		<HorizontalLayout />
		<HorizontalLayout />
	</VerticalLayout>
</Window>