Duilib – 在主界面xml描述文件中使用ChildLayout或者Include嵌入子界面xml描述文件

1 为什么需要使用子界面xml描述文件

在软件界面设计较为简单时，Duilib编写界面描述文件时我们通常会在一个xml界面描述文件中就完成所有控件的描述，但是如果一个软件设置的非常复杂，我们如果还在一个xml文件中组织所有的控件，有很多缺点，比如

• xml文件非常大；
• xml组织复杂，不利于后期软件维护以及界面修改；

举个栗子，比如在Duilib中使用Option控件+TabLayout布局，点击一个Option控件就切换对应的Tab页面，而每个Tab页面又非常复杂，比如以下的界面设计：

如果我们将每个Tab页面单独写成一个子xml文件，第一，主界面的xml文件不会很复杂；第二，每个Tab页可单独维护，便于修改。

所以使用嵌入xml的方式可以将主界面与子界面大量繁杂的xml代码进行分离，便于开发与后期维护。

2 Duilib中嵌入子xml文件的方式

在Duilib中我们有两种方法可以嵌入子xml，一种是使用ChildLayout布局，另一种则使用Include关键字。

假设我们上述程序的第一个Option按钮添加HLS直播源对应的Tab页面的子xml的文件名为AddHLSLiveSource.xml，

如果使用ChildLayout方式，则在TabLayout的对应处添加以下xml语句：

<ChildLayout xmlfile="AddHLSLiveSource.xml" />

如果使用Include方式，则在TabLayout的对应处添加以下xml语句：

<Include source="AddHLSLiveSource.xml" />

这两种方式，ChildLayout和Include的使用效果基本一致，但是相对ChildLayout，Include的优点是可以自动识别自定义控件，而ChildLayout不可以，所以推荐使用Include。

下面提出主界面xml文件与子界面xml文件：

主界面xml文件

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<Window size="920,580" roundcorner="0,0" sizebox="6,6,6,6" caption="0,0,0,90" mininfo="920,580" showshadow="true" shadowsize="5" shadowposition="1,1" shadowcolor="#333333" >
    <Font id="0" name="微软雅黑" size="12" bold="false" italic="false" remark="菜单的文字格式"/>
    <Font id="1" name="微软雅黑" size="15" bold="false" italic="false" remark="Tab Option的文字格式"/>
    <VerticalLayout bkcolor="0xFF2D2F30" >
        <!-- 标题栏 -->
        <HorizontalLayout height="32" bkcolor="0xFF2D2F30" >
            <Text font="0" text="Pancake Recoder" textcolor="0xFF959595" padding="10,5,0,0"/>
            <Control />
            <HorizontalLayout width="70">
                <Button name="MainWindow_Min_Btn" width="22" height="22" padding="0,5,0,0" normalimage="file='最小化-normal.png'" hotimage="file='最小化-hover.png'" tooltip="最小化" />
                <Button name="MainWindow_Max_Btn" width="22" height="22" padding="0,5,0,0" normalimage="file='最大化-normal.png'" hotimage="file='最大化-hover.png'" tooltip="最大化" />
                <Button name="MainWindow_Restore_Btn" visible="false" width="22" height="22" padding="0,5,0,0" normalimage="file='恢复按钮-normal.png'" hotimage="file='恢复按钮-hover.png'" tooltip="恢复" />
                <Button name="MainWindow_Close_Btn" width="22" height="22" padding="0,5,0,0" normalimage="file='关闭按钮-normal.png'" hotimage="file='关闭按钮-hover.png'" tooltip="关闭程序" />
            </HorizontalLayout>
        </HorizontalLayout>

        <!-- 业务区 -->
        <HorizontalLayout >
            <VerticalLayout width="150" >
                <Option name="Option01" font="1" bindtablayoutname="MainWindow_TabLayout_Switch" bindtabindex="0" float="false" text="添加HLS直播源" width="150" height="60" textcolor="#FFFFFFFF" disabledtextcolor="#FFFFFFFF" align="center" selectedtextcolor="#FF8173FC" group="switch" selected="true" />
                <Option name="Option02" font="1" bindtablayoutname="MainWindow_TabLayout_Switch" bindtabindex="1" float="false" text="新建录播任务" width="150" height="60" textcolor="#FFFFFFFF" disabledtextcolor="#FFFFFFFF" align="center" selectedtextcolor="#FF8173FC" group="switch" />
                <Option name="Option03" font="1" bindtablayoutname="MainWindow_TabLayout_Switch" bindtabindex="2" float="false" text="正在录播" width="150" height="60" textcolor="#FFFFFFFF" disabledtextcolor="#FFFFFFFF" align="center" selectedtextcolor="#FF8173FC" group="switch" />
                <Option name="Option04" font="1" bindtablayoutname="MainWindow_TabLayout_Switch" bindtabindex="3" float="false" text="已完成" width="150" height="60" textcolor="#FFFFFFFF" disabledtextcolor="#FFFFFFFF" align="center" selectedtextcolor="#FF8173FC" group="switch" />
            </VerticalLayout>

            <VerticalLayout>
                <TabLayout name="MainWindow_TabLayout_Switch" > 
                    <Include source="AddHLSLiveSource.xml" />
                    <HorizontalLayout>
                        <Label text="This is tab02." />
                    </HorizontalLayout>
                    <HorizontalLayout>
                        <Label text="This is tab03." />
                    </HorizontalLayout>
                    <HorizontalLayout>
                        <Label text="This is tab04." />
                    </HorizontalLayout>
                </TabLayout>
            </VerticalLayout>
        </HorizontalLayout>

        <!-- 状态栏 -->
        <HorizontalLayout height="32" bkcolor="0xFF2D2F30">
        </HorizontalLayout>

    </VerticalLayout>
</Window>

子界面xml文件：AddHLSLiveSource.xml

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<Window>
    <HorizontalLayout>
        <Control width="15" bkcolor="#FFFF0000"/>
        <VerticalLayout>
            <Control height="20" bkcolor="#FFFF0000" />
            <Label font="1" text="创建HLS直播源" textcolor="#FFFFFFFF"/>
            <Control />
        </VerticalLayout>
    </HorizontalLayout>
</Window>