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

一、前言

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

上一篇实现标题栏，这一篇我们来实现工具栏。

二、XML文件编写

2.1 编写工具栏左侧的option

首先，新建两个HorizontalLayout布局

然后新建六个option

添加对应的图片。
以常用这个图标为例：

<Option name="OA" text="常用" width="65" height="62" textpadding="0,50,0,0" normalimage="file='commmon.png' dest='10,5,50,45' source='0,0,50,50' " />

然后写六遍即可。

2.2 加载logo

<HorizontalLayout childalign="right">
		<Button width="150" height="100" bkimage="logo.png" />
</HorizontalLayout>

三、xml文件

<?xml version="1.0" encoding="UTF-8"?>
<Window size="800,572">
	<VerticalLayout bkcolor="0xFFd1e8f5" bkcolor2="0xffc6e0f1" bkcolor3="0xff768d9b" bordersize="1">
		<HorizontalLayout height="20" inset="5,0,0,0">
			<HorizontalLayout inset="5,0,0,0" height="16">
				<Control width="16" height="16" bkimage="icon.png" />
				<Text width="100" height="16" text="360安全卫士6.0" textcolor="0xff447aa1" />
			</HorizontalLayout>
			<HorizontalLayout width="227" height="16" 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 inset="5,0,0,0">
			<HorizontalLayout>
				<Option name="OA" text="常用" width="65" height="62" textpadding="0,50,0,0" normalimage="file='commmon.png' dest='10,5,50,45' source='0,0,50,50' " />
				<Option name="OA" text="木马防火墙" width="65" height="62" textpadding="0,50,0,0" normalimage="file='firewall.png' dest='10,5,50,45' source='0,0,50,50' " />
				<Option name="OA" text="杀毒" width="65" height="62" textpadding="0,50,0,0" normalimage="file='antivirus.png' dest='10,5,50,45' source='0,0,50,50' " />
				<Option name="OA" text="网盾" width="65" height="62" textpadding="0,50,0,0" normalimage="file='networkshield.png' dest='10,5,50,45' source='0,0,50,50' "/>
				<Option name="OA" text="防盗号" width="65" height="62" textpadding="0,50,0,0" normalimage="file='preventnumber.png' dest='10,5,50,45' source='0,0,50,50' "/>		
				<Option name="OA" text="软件管家" width="65" height="62" textpadding="0,50,0,0" normalimage="file='softwaremanager.png' dest='10,5,50,45' source='0,0,50,50' "/>
			</HorizontalLayout>
			<HorizontalLayout childalign="right">
				<Button width="150" height="100" bkimage="logo.png" />
			</HorizontalLayout>
		</HorizontalLayout>
		<HorizontalLayout />
		<HorizontalLayout />
		<HorizontalLayout />
	</VerticalLayout>
</Window>

四、运行

运行效果如图所示

下一篇：Duilib的简单使用（八、DuiEditor的使用（编写360xml文件三））