Duilib应用之标签页（TabLayout）的使用

Duilib自带的例子360SafeDemo中有TabLayout的使用方法，本文参照360SafeDemo范例，梳理TabLayout的基本使用方法，方便理解掌握。

1、定义一组Option作为标签页的标签

<Option name="Option01" float="false" text="Tab01" width="60" height="30" textcolor="#FF1c1c1c" disabledtextcolor="#FFA7A6AA" align="center" leftbordersize="1" bordercolor="#ff000000"  selectedtextcolor="#ff96cdcd" group="switch"  selected="true" />
<Option name="Option02" float="false" text="Tab02" width="60" height="30" textcolor="#FF1c1c1c" disabledtextcolor="#FFA7A6AA" align="center" leftbordersize="1" bordercolor="#ff000000" selectedtextcolor="#ff96cdcd" group="switch" />

需要注意的是，上述Option都在同一个组

2、定义TabLayout作为标签页

<TabLayout name="TabLayoutMain" selectedid="-1" topbordersize="1" bordercolor="#ff000000" padding="2,2,2,2" >
<HorizontalLayout>
<Label text="This is tab01." />
</HorizontalLayout>
<HorizontalLayout>
<Label text="This is tab02." />
</HorizontalLayout>
</TabLayout>

3、在代码中处理DUI_MSGTYPE_SELECTCHANGED（selectchanged）消息

如果要使用DUI_ON_MSGTYPE宏处理DUI_MSGTYPE_SELECTCHANGED消息，需要在主窗口类的头文件中添加DUI_DECLARE_MESSAGE_MAP，然后在CPP文件中添加

DUI_BEGIN_MESSAGE_MAP(CTestTabLayoutWnd,WindowImplBase)
DUI_ON_MSGTYPE(DUI_MSGTYPE_SELECTCHANGED, OnOptSelChanged)
DUI_END_MESSAGE_MAP()

4、在OnOptSelChanged函数中编写功能代码

DUI_MSGTYPE_SELECTCHANGED消息是由某个具体的标签（Option）发出的，当某个Option被点击后，DUI_MSGTYPE_SELECTCHANGED消息的发送者就是被点击的Option。

给出完整的xml内容以及代码（见附件）

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<Window size="800,600" sizebox="4,4,4,4" caption="0,0,0,32" mininfo="600,400">
<VerticalLayout name="VerticalLayoutUI1" bkcolor="#ff696969" >
<HorizontalLayout height="32" bkcolor="#ffe6e6dc" bkcolor2="#ffaaaaa0">
<Label name="Title" padding="2" text="test" />
<VerticalLayout />
<Button name="minbtn" width="50" text="min" />
<Button name="maxbtn" width="50" text="max" />
<Button name="closebtn" width="50" text="close" />
</HorizontalLayout>
<HorizontalLayout name="HorizontalLayoutUI1" width="600" height="30" padding="2,2,2,2" >
<Option name="Option01" float="false" text="Tab01" width="60" height="30" textcolor="#FF1c1c1c" disabledtextcolor="#FFA7A6AA" align="center" leftbordersize="1" bordercolor="#ff000000"  selectedtextcolor="#ff96cdcd" group="switch" selected="true" />
<Option name="Option02" float="false" text="Tab02" width="60" height="30" textcolor="#FF1c1c1c" disabledtextcolor="#FFA7A6AA" align="center" leftbordersize="1" bordercolor="#ff000000" selectedtextcolor="#ff96cdcd" group="switch" />
</HorizontalLayout>
<TabLayout name="TabLayoutMain" selectedid="-1" topbordersize="1" bordercolor="#ff000000" padding="2,2,2,2" >
<HorizontalLayout>
<Label text="This is tab01." />
</HorizontalLayout>
<HorizontalLayout>
<Label text="This is tab02." />
</HorizontalLayout>
</TabLayout>
</VerticalLayout>
</Window>