給大家介紹一下我寫的界面庫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只是在屬性名上作了適當簡化。

其他

更多特性,包括控件、動畫、渲染引擎、國際化等請訪問官方網站

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章