给大家介绍一下我写的界面库SkinUI，求推荐

给大家介绍一下我写的界面库SkinUI，个人认为是现阶段Windows平台下最好用的c++界面库。

• 基于Win32，不依赖其他界面库；
• 使用简单，会C++但是没写过界面的同学也可以很快上手；
• 性能不错，首次加载速度快，基本可以秒开。

组件化开发

通常情况下，如果项目比较大，各个模块需要解耦，组件化开发是必然的选择。

SkinUI支持组件化开发，参考下面的例子：

<Dialog DefaultWidth="1000" DefaultHeight="670" MinWidth="1000" MinHeight="670" ThemeHeight="60" AllowResize="true" Icon="128">
	<RadioGroup Id="20110" AlignParentHorzCenter="0" Width="400" Height="60" AlignParentTop="0">
		<RadioButton Id="20110" Width="100" Height="MatchParent" AlignParentLeft="0" BindView="20000" Layout="MainTabButton.xml" Background="MainTabButton.png" ChildText11="IDS_TODO" Checked="true"/>
		<RadioButton Id="20111" Width="100" Height="MatchParent" AlignParentLeft="100" BindView="21000" Layout="MainTabButton.xml" Background="MainTabButton.png" ChildText11="IDS_CONVERSATION"/>
		<RadioButton Id="20112" Width="100" Height="MatchParent" AlignParentLeft="200" BindView="22000" Layout="MainTabButton.xml" Background="MainTabButton.png" ChildText11="IDS_ADDRESSBOOK"/>
		<RadioButton Id="20113" Width="100" Height="MatchParent" AlignParentLeft="300" BindView="23000" Layout="MainTabButton.xml" Background="MainTabButton.png" ChildText11="IDS_APP_BOX"/>
	</RadioGroup>
	<SwitchLayout Width="MatchParent" AlignParentTop="60" AlignParentBottom="0" Background="MainBkg.png">
		<ToDoLayout Id="20000" Width="MatchParent" Height="MatchParent" LazyLoad="true" Layout="ToDoLayout.xml" Background="247,247,247"/>
		<ConvLayout Id="21000" Width="MatchParent" Height="MatchParent" LazyLoad="true" Layout="ConvLayout.xml" Visible="false"/>
		<AddressBookLayout Id="22000" Width="MatchParent" Height="MatchParent" LazyLoad="true" Layout="AddressBookLayout.xml" Visible="false"/>
		<AppBoxLayout Id="23000" Width="MatchParent" Height="MatchParent" LazyLoad="true" Layout="AppBoxLayout.xml" Visible="false"/>
	</SwitchLayout>
</Dialog>

以上的布局文件，定义了四个自定义组件ToDoLayout、ConvLayout、AddressBookLayout、AppBoxLayout，用来表示四个Tab页。

各组件可以有自己的布局文件，例如：

<AppBoxLayout Id="23000" Width="MatchParent" Height="MatchParent" LazyLoad="true" Layout="AppBoxLayout.xml" Visible="false"/>

表示自定义组件AppBoxLayout的布局文件为AppBoxLayout.xml

定义一个自定义组件也很简单，参考下面的代码：

#pragma once
class CAppBoxLayout : public CRelativeLayout
{
public:
	CAppBoxLayout(CView* pParent);
	SKINUI_DECLARE_DYNCREATE(CAppBoxLayout, CRelativeLayout)
};

通过下面的宏，定义了一个自定义组件，基类为CRelativeLayout。

SKINUI_DECLARE_DYNCREATE(CAppBoxLayout, CRelativeLayout)

这样定义之后，不仅可以在布局文件直接通过AppBoxLayout引用组件，开发工具的自定义组件列表里面也会出现该组件。

消息映射

消息映射参考MFC，提供了一系列消息映射宏。参考下面的代码：

class CAppBoxLayout : public CRelativeLayout
{
public:
	enum
	{
		IDC_LISTVIEW_GROUP = 30200,
		IDC_LISTVIEW_APP = 30300,
		IDC_BUTTON_APP = 30310,
	};

public:
	CAppBoxLayout(CView* pParent);

protected:
	void OnBtnClickedApp(UINT uNotifyCode, int nID, CView* pView);
	void OnListViewCheckedChange(LONG nId, CListView* pListView, BOOL& bHandle);
	SKINUI_DECLARE_MESSAGE_MAP()
};

SKINUI_BEGIN_MESSAGE_MAP(CAppBoxLayout, CRelativeLayout)
	ON_SKINUI_COMMAND(IDC_BUTTON_APP, OnBtnClickedApp)
	ON_SKINUI_WM_LISTVIEW_CHECKED_CHANGE()
SKINUI_END_MESSAGE_MAP()

CAppBoxLayout::CAppBoxLayout(CView* pParent)
: CRelativeLayout(pParent)
{

}

void CAppBoxLayout::OnBtnClickedApp(UINT uNotifyCode, int nID, CView* pView)
{
	//to do
}

void CAppBoxLayout::OnListViewCheckedChange(LONG nId, CListView* pListView, BOOL& bHandle)
{
	//to do
}

命令消息和内置消息的消息处理函数，可以写在任一级父组件的实现文件里，上面的例子表示：

//响应按钮点击消息
ON_SKINUI_COMMAND(IDC_BUTTON_APP, OnBtnClickedApp)

//响应列表Item选中变更消息
ON_SKINUI_WM_LISTVIEW_CHECKED_CHANGE()

布局方式

SkinUI提供的相对布局和弹性布局可以很方便的实现百分比布局、自适应布局，语义简单明确、合乎自然。

组件宽度

组件的宽度设置为下面几种情况：

//宽度跟父组件同宽
Width="MatchParent"

//宽度适应内容大小
Width="WrapContent"

//宽度为绝对值300像素
Width="300"

//宽度为父组件宽度的50%
Width="50%"

组件宽度

组件的高度可以设置为下面几种情况：

//高度跟父组件同高
Hight="MatchParent"

//高度适应内容大小
Hight="WrapContent"

//高度为绝对值300像素
Hight="300"

//高度为父组件高度的50%
Hight="50%"

相对布局

参考Android，提供了相对布局。可以相对父组件定位，也可以相对兄弟组件定位。共有下面几种设置相对位置的属性：

相对父组件

水平方向

//定位左边，左边边距父组件左边10像素
AlignParentLeft="10"

//定位右边，右边边距父组件右边10像素
AlignParentRight="10"

//定位中心，水平中心距父组件水平中心偏移10像素
AlignParentHorzCenter="10"

垂直方向

//定位上边，上边边距父组件上边10像素
AlignParentTop="10"

//定位下边，下边边距父组件下边10像素
AlignParentBottom="10"

//定位中边，垂直中心距父组件垂直中心偏移10像素
AlignParentVertCenter="10"

相对兄弟组件

水平方向

//定位右边，在Id为1000的兄弟组件的左边10像素
ToLeftOf="1000,10"

//定位左边，在Id为1000的兄弟组件的右边10像素
ToRightOf="1000,10"

//定位左边，左边跟Id为1000的兄弟组件的左边对齐，偏移10像素
AlignLeftOf="1000,10"

//定位右边，右边跟Id为1000的兄弟组件的右边对齐，偏移10像素
AlignRightOf="1000,10"

垂直方向

//定位下边，在Id为1000的兄弟组件的上边10像素
ToTopOf="1000,10"

//定位上边，在Id为1000的兄弟组件的下边10像素
ToBottomOf="1000,10"

//定位上边，上边跟Id为1000的兄弟组件的上边对齐，偏移10像素
AlignTopOf="1000,10"

//定位下边，下边跟Id为1000的兄弟组件的下边对齐，偏移10像素
AlignBottomOf="1000,10"

参考下面的例子：

//ListView宽高都跟父组件保持一致
<RelativeLayout>
	<ListView Width="MatchParent" Height="MatchParent"/>
</RelativeLayout>

//宽度跟父组件保持一致，高度为父组件50%，上边距父组件上边40像素
<RelativeLayout>
	<ListView Width="MatchParent" Height="50%" AlignParentTop="40"/>
</RelativeLayout>

//宽度为父组件50%，高度为父组件50%，水平居中，垂直居中
<RelativeLayout>
	<ListView Width="50%" Height="50%" AlignParentHorzCenter="0" AlignParentVertCenter="0"/>
</RelativeLayout>

//宽度为父组件80%，高度为父组件50%，左边距父组件左边10像素，上边距父组件上边40像素
<RelativeLayout>
	<ListView Width="80%" Height="50%" AlignParentLeft="10" AlignParentTop="40"/>
</RelativeLayout>

//左边距Id为1001的兄弟组件右边10像素，上边跟Id为1001的兄弟组件上边对齐，右边距父组件右边10像素，下边距父组件下边40像素
<RelativeLayout>
	<TextView Id="1001" Width="WrapContent" Height="WrapContent" AlignParentLeft="10" AlignParentTop="40"/>
	<ListView Id="1002" ToRightOf="1001,10" AlignTopOf="1001,0" AlignParentRight="10" AlignParentBottom="40"/>
</RelativeLayout>

实际应用中，定位组件的水平位置，有下面十七种方法：

指定宽度

指定宽度的情况下，只需要再指定任意一个定位左边、定位右边或定位中心的属性即可，共有下面八种情况：

// 特殊情况，不需要其他定位属性
Width="MatchParent"

Width="50%" AlignParentLeft="10"

Width="50%" AlignParentRight="10"

Width="50%" AlignParentHorzCenter="10"

Width="50%" ToLeftOf="1000,10"

Width="50%" ToRightOf="1000,10"

Width="50%" AlignLeftOf="1000,10"

Width="50%" AlignRightOf="1000,10"

不指定宽度

不指定宽度的情况下，需要同时指定一个定位左边的属性和一个定位右边或定位中心的属性，共有下面九种情况：

AlignParentLeft="10" AlignParentRight="10"

AlignParentLeft="10" ToLeftOf="1000,10"

AlignParentLeft="10" AlignRightOf="1000,10"

ToRightOf="1000,10" AlignParentRight="10"

ToRightOf="1000,10" ToLeftOf="1000,10"

ToRightOf="1000,10" AlignRightOf="1000,10"

AlignLeftOf="1000,10" AlignParentRight="10"

AlignLeftOf="1000,10" ToLeftOf="1000,10"

AlignLeftOf="1000,10" AlignRightOf="1000,10"

定位组件的垂直位置，同样有下面十七种方法：

指定高度

指定高度的情况下，只需要再指定任意一个定位上边、定位下边或定位中心的属性即可，共有下面八种情况：

// 特殊情况，不需要其他定位属性
Width="MatchParent"

Width="50%" AlignParentTop="10"

Width="50%" AlignParentBottom="10"

Width="50%" AlignParentHorzCenter="10"

Width="50%" ToTopOf="1000,10"

Width="50%" ToBottomOf="1000,10"

Width="50%" AlignTopOf="1000,10"

Width="50%" AlignBottomOf="1000,10"

不指定高度

不指定高度的情况下，需要同时指定一个定位上边的属性和一个定位下边或定位中心的属性，共有下面九种情况：

AlignParentTop="10" AlignParentBottom="10"

AlignParentTop="10" ToTopOf="1000,10"

AlignParentTop="10" AlignBottomOf="1000,10"

ToBottomOf="1000,10" AlignParentBottom="10"

ToBottomOf="1000,10" ToTopOf="1000,10"

ToBottomOf="1000,10" AlignBottomOf="1000,10"

AlignTopOf="1000,10" AlignParentBottom="10"

AlignTopOf="1000,10" ToTopOf="1000,10"

AlignTopOf="1000,10" AlignBottomOf="1000,10"

弹性布局

关于弹性布局，请参考阮一峰老师的文章Flex 布局教程。SkinUI只是在属性名上作了适当简化。

其他

更多特性，包括控件、动画、渲染引擎、国际化等请访问官方网站