- 官方網(wǎng)站:http://www.skinui.cn
- 下載地址:http://pan.baidu.com/s/1slKsMGt
SkinUI應(yīng)用程序結(jié)構(gòu)簡(jiǎn)單,主要由源文件、資源文件和皮膚文件組成。本文將簡(jiǎn)要介紹各種文件的格式,讓大家對(duì)SkinUI應(yīng)用程序的基本結(jié)構(gòu)有個(gè)初步的了解。

2.1 SkinUI應(yīng)用程序的文件結(jié)構(gòu)
使用SkinUI Sln++工具,新建工程【Hello World】??梢钥吹秸麄€(gè)工程的文件結(jié)構(gòu)如下:
I----【bin】 //可執(zhí)行文件和資源文件
I I----【debug】 //Debug版本的可執(zhí)行文件和自由文件
I I----【cef】 //Debug版本的cef控件支持文件
I I----【res】 //所有資源文件
I I----【HelloWorld】 //HelloWorld的資源文件
I I----【skin】 //所有皮膚文件
I I----【HelloWorld】 //HelloWorld的皮膚文件
I I----【release】 //cef控件支持文件
I I----【cef】 //Release版本的cef控件支持文件
I I----【res】 //所有資源文件
I I----【HelloWorld】 //HelloWorld的資源文件
I I----【skin】 //所有皮膚文件
I I----【HelloWorld】 //HelloWorld的皮膚文件
I----【src】 //所有源碼文件
I I----【HelloWorld】 //HelloWorld源碼文件
I I----【Include】 //所有頭文件
I I----【SkinUI】 //SkinUI的頭文件
如果不需要支持CEF控件,發(fā)布時(shí)可以刪除【cef】文件夾。
2.2 源碼文件
SkinUI應(yīng)用程序需要一個(gè)應(yīng)用程序入口函數(shù)、一個(gè)應(yīng)用程序類和若干對(duì)話框類。如果需要自定義控件,還會(huì)有一些自定義控件類。
2.2.1 應(yīng)用程序入口
Win32窗口程序的入口函數(shù)為WinMain,SkinUI應(yīng)用程序也是。不需要自定義函數(shù)體,直接使用工具生成的代碼即可。
int APIENTRY _tWinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPTSTR lpCmdLine, int nCmdShow)
{
return SkinUI::WinMain(hInstance, lpCmdLine, nCmdShow);
}
2.2.2 應(yīng)用程序類
SkinUI程序在整個(gè)生命周期只會(huì)實(shí)例化一個(gè)應(yīng)用程序類。
我們需要繼承CSkinApp,實(shí)現(xiàn)兩個(gè)接口,完成初始化操作并彈出主窗口。
應(yīng)用程序類的生命周期為整個(gè)程序的生命周期,我們可以在此緩存數(shù)據(jù)。
例如,可以在此處緩存用戶名和用戶ID。
具體代碼如下:
頭文件
class CHelloWorld : public CSkinApp
{
public:
CHelloWorld();
public:
virtual BOOL InitInstance(ResType& resType);
virtual void Run(const tstring& strCmdLine, int nCmdShow);
};
源文件
CHelloWorld theApp;
CHelloWorld::CHelloWorld()
{
}
BOOL CHelloWorld::InitInstance(ResType& resType)
{
SkinUI::LoadMySkin(_T("C:\\MySkin\\HelloWorld\\")); //加載自定義皮膚
resType = RT_FILE; //資源類型為文件資源
//resType = RT_FILE_PACKAGE; //資源類型為文件資源包
//resType = RT_RC_PACKAGE; //資源類型為RC資源包
return TRUE;
}
void CHelloWorld::Run(const tstring& strCmdLine, int nCmdShow)
{
CMainDialog dlg;
SkinUI::SetMainWnd(&dlg);//設(shè)置主窗口
dlg.DoModal(NULL);//彈出主對(duì)話框
}
2.2.3 主對(duì)話框類
主對(duì)話框是程序彈出的第一個(gè)窗口。
窗口的布局由xml格式的布局文件指定,需要在構(gòu)造函數(shù)處傳遞給基類。
主窗口的布局文件通常為"MainDialog.xml"。
可以通過布局文件指定一些窗口的基本屬性,例如窗口大小,標(biāo)題欄高度等。
頭文件
class CMainDialog : public CSkinDialog
{
public:
CMainDialog();
public:
virtual void OnInitDialog();
protected:
void OnNcDestroy(BOOL& bHandle);
SKINUI_DECLARE_MESSAGE_MAP()
};
源文件
//此處是消息映射后,這里只處理WM_NCDESTROY
SKINUI_BEGIN_MESSAGE_MAP(CMainDialog, CSkinDialog)
ON_SKINUI_WM_NCDESTROY()
SKINUI_END_MESSAGE_MAP()
CMainDialog::CMainDialog()
: CSkinDialog(_T("MainDialog.xml"))//設(shè)置主對(duì)話框的布局文件
{
}
void CMainDialog::OnInitDialog()
{
CSkinDialog::OnInitDialog();
//可以在此處添加初始化代碼
}
void CMainDialog::OnNcDestroy(BOOL& bHandle)
{
bHandle = FALSE;
PostQuitMessage(0);//發(fā)送這條消息后,應(yīng)用程序進(jìn)程退出
}
2.3 資源文件
整個(gè)資源的文件結(jié)構(gòu)如下:
I----【res】 //所有資源文件
I I----【HelloWorld】 //HelloWorld的資源文件
I I----【image】 //所有圖片文件
I I----【system】 //系統(tǒng)圖片文件
I I----【Button.png】 //系統(tǒng)圖片Button.png
I I----【MyButton.png】 //用戶圖片MyButton.png
I I----【layout】 //所有布局文件
I I----【system】 //系統(tǒng)布局文件
I I----【Button.xml】 //系統(tǒng)布局文件Button.xml
I I----【MainDialog.xml】 //用戶布局文件MainDialog.xml
I I----【menu】 //所有菜單文件
I I----【MainMenu.xml】 //菜單文件MainMenu.xml
I I----【value】 //所有配置文件
I I----【system】 //系統(tǒng)配置文件
I I----【color.xml】 //系統(tǒng)顏色配置文件
I I----【image.xml】 //系統(tǒng)圖片配置文件
I I----【font.xml】 //系統(tǒng)字體配置文件
I I----【color.xml】 //用戶顏色配置文件
I I----【image.xml】 //用戶圖片配置文件
I I----【font.xml】 //用戶字體配置文件
I I----【config.xml】 //用戶全局配置文件
I I----【string】 //所有字符串文件
I I----【2052】 //簡(jiǎn)體字符串文件
I I----【system】 //系統(tǒng)字符串目錄
I I----【string.xml】 //系統(tǒng)字符串文件
I I----【string.xml】 //用戶字符串文件
I I----【1033】 //簡(jiǎn)體字符串文件
I I----【system】 //系統(tǒng)字符串目錄
I I----【string.xml】 //系統(tǒng)字符串文件
I I----【string.xml】 //用戶字符串文件
I I----【1028】 //繁體字符串文件
I I----【system】 //系統(tǒng)字符串目錄
I I----【string.xml】 //系統(tǒng)字符串文件
I I----【string.xml】 //用戶字符串文件
2.3.1 圖片文件
系統(tǒng)相關(guān)圖片放在文件夾【image】下的【system】文件夾,業(yè)務(wù)相關(guān)的圖片放在文件夾【image】根目錄。
另外,需要在圖片配置文件指定圖片的九宮格拉伸范圍和多態(tài)圖片的幀數(shù)。
不在配置文件指定的情況下,圖片默認(rèn)情況下不支持九宮格拉伸,只有一幀。
圖片推薦使用png格式,當(dāng)然也支持其他圖片格式。
2.3.2 布局文件
為了實(shí)現(xiàn)最大可能的擴(kuò)展性,不僅對(duì)話框可以設(shè)置布局文件,其他任何控件都可以設(shè)置布局文件。
例如,我們可以給按鈕類設(shè)置不同的布局文件得到各式各樣的按鈕,可以給列表項(xiàng)設(shè)置不同的布局文件,得到不同的列表項(xiàng)。
對(duì)話框的布局文件以"SkinDialog"為根節(jié)點(diǎn),這個(gè)節(jié)點(diǎn)的屬性可以指定對(duì)話框的屬性。
下面是一個(gè)對(duì)話框的布局文件:
<SkinDialog DefaultWidth="800" //默認(rèn)寬度為800像素
DefaultHeight="540" //默認(rèn)高度為540像素
MinWidth="600" //最小寬度為600像素
MinHeight="400" //最小高度為400像素
TitleHeight="32" //標(biāo)題高度為32像素
ThemeHeight="100" //主題高度為100像素
Icon="128" //圖標(biāo)使用Id為128的ico文件
AllowMove="true" //允許窗口拖動(dòng)
OpenAreo="true" //允許毛玻璃效果
Resize="true" //允許改變大小
SysButton="SKIN;MENU;MIN;CLOSE" //四個(gè)系統(tǒng)按鈕:皮膚、主菜單、最小化、關(guān)閉
Caption="IDS_APP_NAME" //標(biāo)題為字符串IDS_APP_NAME
Animation="SizeChange" //窗口動(dòng)畫類型為SizeChange
Menu="MainMenu.xml"> //點(diǎn)擊主菜單按鈕,彈出的菜單由MainMenu.xml指定
</SkinDialog>
2.3.3 菜單文件
菜單文件的格式如下:
<Menu>
<MenuItem Id="1003" Text="IDS_ABOUT" Icon="about.png"/>
<MenuItem Id="1004" Text="IDS_HELP" Icon="help.png"/>
<MenuItem Separator="true"/>
<MenuItem Id="2" Text="IDS_QUIT" Icon="quit.png"/>
</Menu>
2.3.3.1 菜單文件
<MenuItem Id="1003" Text="IDS_ABOUT" Icon="about.png"/>表示菜單項(xiàng)。
- 通過屬性[id],指定菜單的Id
【Id="1003"】表示菜單項(xiàng)Id為1003。 - 通過屬性[Text],指定菜單的文本
【Text="IDS_ABOUT"】表示菜單項(xiàng)文本為IDS_ABOUT。 - 通過屬性[Icon],指定菜單的圖標(biāo)
【Icon="about.png"】表示菜單項(xiàng)圖標(biāo)為about.png。
點(diǎn)擊菜單項(xiàng)后,會(huì)給當(dāng)前窗口發(fā)送WM_COMMAND消息。
可以通過UI更新消息禁用菜單或者選中菜單,還可以通過全局配置文件設(shè)置菜單項(xiàng)的高度。
2.3.3.2 菜單分割條
<MenuItem Separator="true"/>表示菜單分割條。
可以通過全局配置文件設(shè)置菜單分割條的高度。
2.3.4 配置文件
2.3.4.1 顏色配置文件
系統(tǒng)相關(guān)顏色配置文件為文件夾【value】下的【system】文件夾下的【color.xml】,業(yè)務(wù)相關(guān)顏色配置文件為文件夾【value】根目錄下的【color.xml】。
文件的格式如下:
<ColorTable>
<Color Id="ID_COLOR_BLACK">255,0,0,0</Color>
<Color Id="ID_COLOR_WHITE">255,255,255,255</Color>
<Color Id="ID_COLOR_TEXT">255,64,64,64</Color>
</ColorTable>
<Color Id="ID_COLOR_BLACK">255,0,0,0</Color>表示一種顏色。
- 通過屬性[id],指定顏色的Id
【Id="1003"】表示顏色I(xiàn)d為ID_COLOR_BLACK。 - 通過節(jié)點(diǎn)值,指定顏色的ARGB
【255,0,0,0】表示顏色的Alpha為255,Red為0,Green為0,Blue為0。
顏色可以在代碼中使用,也可以直接在布局文件中使用。
可以作為背景顏色,也可以作為字體顏色,還可以用來繪制線條、繪制矩形、填充矩形。
2.3.4.2 圖片配置文件
系統(tǒng)相關(guān)圖片配置文件為文件夾【value】下的【system】文件夾下的【image.xml】,業(yè)務(wù)相關(guān)圖片配置文件為文件夾【value】根目錄下的【image.xml】。
圖片配置文件文件的格式如下:
<ImageTable>
<Image Name="Progress.png" Frame="2" Patch="7,2,7,2"/>
<Image Name="Button.png" Frame="4"/>
<Image Name="Edit.png" Frame="4"/>
</ImageTable>
<Image Name="Progress.png" Frame="2" Patch="7,2,7,2"/>表示一張圖片。
- 通過屬性[Name],指定圖片的名字
【Name="Progress.png"】表示圖片名字為Progress.png。 - 通過屬性[Frame],指定圖片的態(tài)數(shù)
【Frame="2"】表示圖片為兩態(tài)合并為一張圖片。 - 通過屬性[Patch],指定圖片的九宮格拉伸范圍
【Patch="7,2,7,2"】表示圖片不拉伸范圍為距左邊7像素,距上邊2像素,距右邊7像素,距下邊2像素。
圖片可以在代碼中使用,也可以直接在布局文件中使用。
可以作為背景、也可以成為ImageView的展示。
2.3.4.3 字符串文件
系統(tǒng)相關(guān)字符串文件為文件夾【xxx】下的【system】文件夾下的【string.xml】,業(yè)務(wù)相關(guān)字符串文件為文件夾【xxx】根目錄下的【string.xml】。SkinUI支持多語言,xxx表示語言代碼,例如:
- 2052表示簡(jiǎn)體中文
- 1033表示英文
- 1028表示繁體中文
文件的格式如下:
<StringTable>
<String Id="IDS_MIN_TIPS">最小化</String>
<String Id="IDS_MAX_TIPS">最大化</String>
<String Id="IDS_MENU_TIPS">主菜單</String>
</StringTable>
<String Id="IDS_MEMU_TIPS">主菜單</String>表示一個(gè)字符串。
- 通過屬性[id],指定字符串的Id
【Id="IDS_MEMU_TIPS">】表示字符串Id為IDS_MEMU_TIPS。 - 通過節(jié)點(diǎn)值,指定字符串的值
【主菜單】表示字符串的值為"主菜單"。
字符串可以在代碼中使用,也可以直接在布局文件中使用。
2.3.4.4 字體配置文件
系統(tǒng)相關(guān)字體配置文件為文件夾【value】下的【system】文件夾下的【font.xml】,業(yè)務(wù)相關(guān)字體配置文件為文件夾【value】根目錄下的【font.xml】。
文件的格式如下:
<FontFamily>
<Familys>
<Family>微軟雅黑</Family>
<Family>新宋體</Family>
<Family>宋體</Family>
</Familys>
<Fonts>
<Font Id="ID_FONT_SMALL" Size="8" Bold="false" Italic="false" Strikeout="false" Underline="false"/>
<Font Id="ID_FONT_BOLD" Size="9" Bold="true" Italic="false" Strikeout="false" Underline="false"/>
<Font Id="ID_FONT_BIG" Size="12" Bold="false" Italic="false" Strikeout="false" Underline="false"/>
</Fonts>
</FontFamily>
字體家族
<Familys>
<Family>微軟雅黑</Family>
<Family>新宋體</Family>
<Family>宋體</Family>
</Familys>
上面指定了三種字體家族,程序優(yōu)先使用"微軟雅黑",如果系統(tǒng)沒有安裝,則使用"新宋體",如果依然沒安裝,則使用"宋體"。如果宋體也沒有安裝,則會(huì)使用系統(tǒng)默認(rèn)字體。
<Font Id="ID_FONT_BOLD" Size="9" Bold="true" Italic="false" Strikeout="false" Underline="false"/>表示一種字體。
- 通過屬性[id],指定字體的Id
【Id="ID_FONT_BOLD"】表示字體Id為ID_FONT_BOLD。 - 通過屬性[Size],指定字體的大小
【Size="9"】表示字體為9號(hào)字體。 - 通過屬性[Bold="true"],指定字體是否加粗
【Bold="true"】表示字體加粗。 - 通過屬性[Italic="false"],指定字體是否為斜體
【Italic="false"】表示字體不是斜體。 - 通過屬性[Strikeout="false"],指定字體是否需要加刪除線
【Strikeout="false"】表示字體不加刪除線。 - 通過屬性[Underline="false"],指定字體是否需要加下劃線
【Underline="false"】表示字體不加下劃線。
字體可以在代碼中使用,也可以直接在布局文件中使用。
2.3.4.5 全局配置文件
全局配置文件為文件夾【value】根目錄下的【config.xml】。
文件的格式如下:
<Configs>
<DialogRadius>8</DialogRadius>
<DialogBorderColor>ID_COLOR_BORDER</DialogBorderColor>
<DialogCaptionFontColor>ID_COLOR_CAPTION</DialogCaptionFontColor>
<DialogCaptionFontStyle>ID_FONT_BOLD</DialogCaptionFontStyle>
<DialogShadowPatch>12,12,12,12</DialogShadowPatch>
<DialogSysButtonRightOffset>10</DialogSysButtonRightOffset>
<MenuMinWidth>150</MenuMinWidth>
<MenuItemHeight>24</MenuItemHeight>
<MenuSeparatorHeight>5</MenuSeparatorHeight>
<FullTransparentSkin>true</FullTransparentSkin>
</Configs>
上面的配置表示一下信息:
- <DialogRadius>8</DialogRadius>
對(duì)話框?yàn)閳A角矩形,圓角半徑為8 - <DialogBorderColor>ID_COLOR_BORDER</DialogBorderColor>
對(duì)話框邊框顏色為ID_COLOR_BORDER - <DialogCaptionFontColor>ID_COLOR_CAPTION</DialogCaptionFontColor>
對(duì)話框標(biāo)題欄顏色為ID_COLOR_CAPTION - <DialogCaptionFontStyle>ID_FONT_BOLD</DialogCaptionFontStyle>
對(duì)話框標(biāo)題欄字體為ID_FONT_BOLD - <DialogShadowPatch>12,12,12,12</DialogShadowPatch>
對(duì)話框陰影范圍為左邊12像素,上邊12像素,右邊12像素,下邊12像素 - <DialogSysButtonRightOffset>10</DialogSysButtonRightOffset>
對(duì)話框系統(tǒng)按鈕距右邊10個(gè)像素 - <MenuMinWidth>150</MenuMinWidth>
菜單最小寬度為150像素 - <MenuItemHeight>24</MenuItemHeight>
菜單項(xiàng)高度為24像素 - <MenuSeparatorHeight>5</MenuSeparatorHeight>
菜單分隔條高度為5像素 - <FullTransparentSkin>true</FullTransparentSkin>
對(duì)話框支持全透明皮膚
2.4 皮膚文件
整個(gè)皮膚目錄的文件結(jié)構(gòu)如下:
I----【skin】 //所有皮膚文件
I I----【HelloWorld】 //HelloWorld的皮膚文件
I I----【default】 //默認(rèn)皮膚
I I----【theme.png】 //皮膚文件
I I----【thumb.png】 //皮膚縮略圖
I I----【1】 //系統(tǒng)自帶皮膚1
I I----【theme.png】 //皮膚文件
I I----【thumb.png】 //皮膚縮略圖
I I----【2】 //系統(tǒng)自帶皮膚2
I I----【theme.png】 //皮膚文件
I I----【thumb.png】 //皮膚縮略圖
I I----【3】 //系統(tǒng)自帶皮膚3
I I----【theme.png】 //皮膚文件
I I----【thumb.png】 //皮膚縮略圖
I I----【skin.xml】 //皮膚配置文件
皮膚配置文件的格式如下:
<Skins>
<Skin Name="default" Color="254,255,187,3"/>
<Skin Name="1" Color="254,82,207,209"/>
<Skin Name="2" Color="254,170,202,53"/>
<Skin Name="3" Color="254,248,251,220"/>
<Skin Name="4" Color="254,107,71,18"/>
<Skin Name="5" Color="254,118,176,252"/>
<Skin Name="6" Color="254,70,140,240"/>
<Skin Name="7" Color="254,195,221,212"/>
<Skin Name="8" Color="254,75,87,101"/>
<Skin Name="9" Color="254,83,178,16"/>
<Skin Name="10" Color="254,67,103,163"/>
<Skin Name="11" Color="254,187,224,243"/>
<Skin Name="101" Color="255,22,154,218"/>
<Skin Name="102" Color="255,40,138,221"/>
<Skin Name="103" Color="255,49,166,107"/>
<Skin Name="104" Color="255,218,67,78"/>
<Skin Name="105" Color="255,229,98,129"/>
<Skin Name="106" Color="255,177,99,159"/>
<Skin Name="107" Color="255,89,92,160"/>
<Skin Name="108" Color="255,48,116,193"/>
<Skin Name="109" Color="255,0,130,154"/>
<Skin Name="110" Color="255,79,176,172"/>
<Skin Name="111" Color="255,112,197,196"/>
<Skin Name="112" Color="255,128,77,77"/>
<Skin Name="113" Color="255,240,188,89"/>
<Skin Name="114" Color="255,207,186,170"/>
<Skin Name="115" Color="255,72,72,200"/>
<Skin Name="116" Color="255,104,72,200"/>
<Skin Name="117" Color="255,136,72,200"/>
</Skins>
<Skin Name="default" Color="254,255,187,3"/>表示一張皮膚。
- 通過屬性[Name],指定皮膚的名字
【Name="default"】表示皮膚的名字為default。 - 通過屬性[Color],指定皮膚的基準(zhǔn)色
【Color="254,255,187,3"】表示皮膚的基準(zhǔn)色為ARGB(254,255,187,3)。
皮膚文件尺寸不足時(shí),會(huì)使用基準(zhǔn)色補(bǔ)全。
2.4.1 主題色
15種主題色I(xiàn)D_COLOR_DEFAULT1 ~ ID_COLOR_DEFAULT15,通過基準(zhǔn)色算出。算法為:
- ID_COLOR_DEFAULT1 ~ ID_COLOR_DEFAULT7
透明度不同的基準(zhǔn)色,ID_COLOR_DEFAULT1透明度最高。 - ID_COLOR_DEFAULT8
等同于基準(zhǔn)色。 - ID_COLOR_DEFAULT9 ~ ID_COLOR_DEFAULT15
基準(zhǔn)色覆蓋透明度不同的黑色,ID_COLOR_DEFAULT9覆蓋的黑色透明度最高。
2.4.1 標(biāo)題顏色
如果基準(zhǔn)色為深色系,ID_COLOR_CAPTION = ID_COLOR_WHITE;
如果基準(zhǔn)色為淺色系,ID_COLOR_CAPTION = ID_COLOR_TEXT。