第四章 duilib库布局

       Duilib库包含6个布局以及含有布局的控件类，如下图所示：

各个布局之间可以互相嵌套，从而构造出更复杂的布局。

下面详细讲解6大布局

Container布局

     Container布局是其它布局或含有布局特性控件的基类，在实际项目中很少使用，一般只是用它来构造更高级布局。Container布局中的控件会叠加在一起，填充整个布局。

      现举一个例子说明Container布局用法：

下载地址：https://download.csdn.net/download/junqiand/10431087

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<Window size="800,520" sizebox="4,4,4,4" caption="0,0,0,32" mininfo="600,400">
	<HorizontalLayout bkcolor="#FF070700">
		<Container />
		<VerticalLayout width="336">
			<HorizontalLayout />
			<Container height="230">
				<Control float="true" pos="0,0,0,0" width="336" height="230" bkimage="skin\bk_logo_light.png" />
				<Control float="true" pos="0,33,0,0" width="336" height="164" bkimage="skin\bk_logo_image.png" />
				<Control float="true" pos="84,80,0,0" width="168" height="20" bkimage="skin\bk_logo_text.png" />
			</Container>
			<HorizontalLayout />
		</VerticalLayout>
		<Container />
	</HorizontalLayout>
</Window>

#include <Windows.h>
#include <UIlib.h>

using namespace DuiLib;

class LoginWnd : public WindowImplBase
{
protected:
	virtual CDuiString GetSkinFolder() override
	{
		return _T("");
	}

	virtual CDuiString GetSkinFile() override
	{
		return _T("cover.xml");
	}

	virtual LPCTSTR GetWindowClassName(void) const override
	{
		return _T("LoginWnd");
	}
};

int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow)
{
	CPaintManagerUI::SetInstance(hInstance);

	LoginWnd loginWnd;
	loginWnd.Create(NULL, _T("LoginWnd"), UI_WNDSTYLE_FRAME, WS_EX_WINDOWEDGE);
	loginWnd.CenterWindow();
	loginWnd.ShowModal();

	return 0;
}

运行结果图：

说明：

1. Window窗口属性请参见下图，更详细的请查看duilib安装文件夹下的《属性列表.xml》

2.  为了实现横向居中对齐，最外层<HorizontalLayout bkcolor="#FF070700">中加了3个控件，其中的Container控件是占位控件，类似于QT中的spacer控件。

3.  为了实现纵向居中对齐，<VerticalLayout width="336">中加了3个控件，其中的Container控件是占位控件

4.  为了将3张图叠加在一起，用了Container布局。其中，bk_logo_light.png水平和纵向都拉升了。Bk_logo_image保持原状，纵向位置居中。Bk_logo_text保持原状，左上角坐标位置调整。

HorizontalLayout布局

水平布局中的控件会从左到右水平占位，如下图所示：

示例代码如下：
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<Window size="400,200" sizebox="4,4,4,4" caption="0,0,0,32" mininfo="300,100">
	<HorizontalLayout bkcolor="#FF070707" width="400" height="200" >
		<Label width="100" height="150" bkcolor="#FFFF0000" />
		<Label width="50" height="200" bkcolor="#FF00FF00" />
		<Label width="80" height="100" bkcolor="#FF0000FF" />
	</HorizontalLayout>
</Window>

#include <Windows.h>
#include <UIlib.h>

using namespace DuiLib;

class LoginWnd : public WindowImplBase
{
protected:
	virtual CDuiString GetSkinFolder() override
	{return _T("");}

	virtual CDuiString GetSkinFile() override
	{return _T("horizontalLayout.xml");}

	virtual LPCTSTR GetWindowClassName(void) const override
	{return _T("horizontalLayout");}
};

int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow)
{
	CPaintManagerUI::SetInstance(hInstance);
	LoginWnd loginWnd;
	loginWnd.Create(NULL, _T("horizontalLayout"), UI_WNDSTYLE_FRAME, WS_EX_WINDOWEDGE);
	loginWnd.CenterWindow();
	loginWnd.ShowModal();

	return 0;
}

VerticalLayout布局

垂直布局中的控件会从上到下垂直占位，如下图所示：

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<Window size="150,250" sizebox="4,4,4,4" caption="0,0,0,32" mininfo="100,250">
	<VerticalLayout bkcolor="#FF070707" width="150" height="250" >
		<Label width="100" height="50" bkcolor="#FFFF0000" />
		<Label width="50" height="100" bkcolor="#FF00FF00" />
		<Label width="80" height="30" bkcolor="#FF0000FF" />
	</VerticalLayout>
</Window>

#include <Windows.h>
#include <UIlib.h>

using namespace DuiLib;

class LoginWnd : public WindowImplBase
{
protected:
	virtual CDuiString GetSkinFolder() override
	{return _T("");}

	virtual CDuiString GetSkinFile() override
	{return _T("verticalLayout.xml");}

	virtual LPCTSTR GetWindowClassName(void) const override
	{return _T("verticalLayout");}
};

int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow)
{
	CPaintManagerUI::SetInstance(hInstance);
	LoginWnd loginWnd;
	loginWnd.Create(NULL, _T("verticalLayout"), UI_WNDSTYLE_FRAME, WS_EX_WINDOWEDGE);
	loginWnd.CenterWindow();
	loginWnd.ShowModal();

	return 0;
}

水平垂直混合布局例子

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<Window size="400,400" sizebox="4,4,4,4" caption="0,0,0,32" mininfo="300,300">
	<VerticalLayout bkcolor="#FF070707" width="400" height="400" >
		<HorizontalLayout width="400" height="100" bkcolor="#FFFF0000">
			<Button width="100" height="80" bordercolor="#FF000000" bkcolor="#FFFFFF00" bordersize="1" />
			<Button width="50" height="50" bordercolor="#FF000000" bkcolor="#FFFFFF00" bordersize="1"  />
			<Button width="30" height="60" bordercolor="#FF000000" bkcolor="#FFFFFF00" bordersize="1"  />
		</HorizontalLayout>
		<VerticalLayout width="350" height="150" bkcolor="#FF00FF00">
			<Button width="100" height="20" bordercolor="#FF000000" bkcolor="#FFFFFF00" bordersize="1"  />
			<Button width="60" height="50" bordercolor="#FF000000" bkcolor="#FFFFFF00" bordersize="1"  />
			<Button width="20" height="30" bordercolor="#FF000000" bkcolor="#FFFFFF00" bordersize="1"  />
		</VerticalLayout>
		<HorizontalLayout width="300" height="100" bkcolor="#FF0000FF">
			<Button width="50" height="80" bordercolor="#FF000000" bkcolor="#FFFFFF00" bordersize="1"  />
			<Button width="50" height="50" bordercolor="#FF000000" bkcolor="#FFFFFF00" bordersize="1"  />
			<Button width="80" height="30" bordercolor="#FF000000" bkcolor="#FFFFFF00" bordersize="1"  />
		</HorizontalLayout>
	</VerticalLayout>
</Window>