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

一、前言

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

这一篇我们来搞一搞接下来的内容

二、XML编写

2.1 分割线

如图所示，XML增加下面这一行，效果如图所示

<HorizontalLayout height="5" bkcolor="0xff97c0da" bkcolor2="0xffb8dff2"/>

2.2 操作选择

新建一个水平布局，再新建一个tab布局

在水平布局里，新建8个option，以电脑体检为例

<Option pos="6, 0, 84, 26" float="true" text="电脑体检" name="examine" textcolor="#FF386382" font="2" normalimage="tabbar_normal.png" hotimage="tabbar_hover.png" pushedimage="tabbar_pushed.png" selectedimage="tabbar_pushed.png" group="contenttab" selected="true"/>

效果如图：

2.3 优化

之前写的略有一些问题
比如点击常用，常用按钮会消失，且没有出现选中状态，这是因为

1. selected=“true” 没有写
2. 没有添加group
3. selectedimage没有写
4. foreimage没有写

正确写法：

<Option pos="10, 0, 75, 62" float="true" align="bottom" name="common" text="常用" textcolor="#FF386382" font="1" textpadding="0,40,0,2" foreimage="file='commmon.png' dest='10,5,50,45'" normalimage="toolbar_normal.png" hotimage="toolbar_hover.png" pushedimage="toolbar_pushed.png" selectedimage="toolbar_pushed.png" group="quickbar" selected="true"/>

比如，之前的论坛、求助没有下划线
这是因为text必须是"{u}{a}求助{/a}{/u}"这样子的写法，showhtml才有效

<Button text="{u}{a}求助{/a}{/u}" showhtml="true"/>

三、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 text="{u}{a}求助{/a}{/u}" showhtml="true"/>
				<Button text="{u}{a}论坛{/a}{/u}" showhtml="true"/>
				<Button name="menubtn" maxwidth="26" maxheight="17" normalimage="file='sys_dlg_menu.png' source='52,0,78,17'" hotimage="file='sys_dlg_menu.png' source='26,0,52,17'" pushedimage="file='sys_dlg_menu.png' source='0,0,26,17'"/>
				<Button name="minbtn" maxwidth="26" maxheight="17" normalimage="file='sys_dlg_min.png' source='52,0,78,17'" hotimage="file='sys_dlg_min.png' source='26,0,52,17'" pushedimage="file='sys_dlg_min.png' source='0,0,26,17'"/>
				<Button name="maxbtn" maxwidth="26" maxheight="17" normalimage="file='sys_dlg_max.png' source='52,0,78,17'" hotimage="file='sys_dlg_max.png' source='26,0,52,18'" pushedimage="file='sys_dlg_max.png' source='0,0,26,17'"/>
				<Button name="restorebtn" visible="false" maxwidth="26" maxheight="17" normalimage="file='sys_dlg_restore.png' source='52,0,78,17'" hotimage="file='sys_dlg_restore.png' source='26,0,52,17'" pushedimage="file='sys_dlg_restore.png' source='0,0,26,17'" />
				<Button name="closebtn" maxwidth="45" maxheight="17" normalimage="file='sys_dlg_close.png' source='90,0,135,17'" hotimage="file='sys_dlg_close.png' source='45,0,90,17'" pushedimage="file='sys_dlg_close.png' source='0,0,45,17'"/>
      	</HorizontalLayout>
		</HorizontalLayout>
		<HorizontalLayout height="70"  inset="5,0,0,0">
			<HorizontalLayout width="600">
				<Option pos="10, 0, 75, 62" float="true" align="bottom" name="common" text="常用" textcolor="#FF386382" font="1" textpadding="0,40,0,2" foreimage="file='commmon.png' dest='10,5,50,45'" normalimage="toolbar_normal.png" hotimage="toolbar_hover.png" pushedimage="toolbar_pushed.png" selectedimage="toolbar_pushed.png" group="quickbar" selected="true"/>
				<Option pos="85, 0, 150, 62" float="true" align="bottom" text="木马防火墙" textcolor="#FF386382" font="1" textpadding="0,40,0,2" foreimage="file='firewall.png' dest='10,5,50,45'" normalimage="toolbar_normal.png" hotimage="toolbar_hover.png" pushedimage="toolbar_pushed.png" selectedimage="toolbar_pushed.png" group="quickbar"/>