SkinUI應用程序結構簡單，主要由源文件、資源文件和皮膚文件組成。本文將簡要介紹各種文件的格式，讓大家對SkinUI應用程序的基本結構有個初步的了解。
SkinUI產品演示程序
2.1 SkinUI應用程序的文件結構
使用SkinUI Sln++工具，新建工程【Hello World】。可以看到整個工程的文件結構如下：
I----【bin】 //可執行文件和資源文件
I I----【debug】 //Debug版本的可執行文件和自由文件
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控件，發布時可以刪除【cef】文件夾。
2.2 源碼文件
SkinUI應用程序需要一個應用程序入口函數、一個應用程序類和若干對話框類。如果需要自定義控件，還會有一些自定義控件類。
2.2.1 應用程序入口
Win32窗口程序的入口函數為WinMain，SkinUI應用程序也是。不需要自定義函數體，直接使用工具生成的代碼即可。
int APIENTRY _tWinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPTSTR lpCmdLine, int nCmdShow)
{
return SkinUI::WinMain(hInstance, lpCmdLine, nCmdShow);
}
2.2.2 應用程序類
SkinUI程序在整個生命周期只會實例化一個應用程序類。
我們需要繼承CSkinApp，實現兩個接口，完成初始化操作并彈出主窗口。
應用程序類的生命周期為整個程序的生命周期，我們可以在此緩存數據。
例如，可以在此處緩存用戶名和用戶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);//設置主窗口
dlg.DoModal(NULL);//彈出主對話框
}
2.2.3 主對話框類
主對話框是程序彈出的第一個窗口。
窗口的布局由xml格式的布局文件指定，需要在構造函數處傳遞給基類。
主窗口的布局文件通常為"MainDialog.xml"。
可以通過布局文件指定一些窗口的基本屬性，例如窗口大小，標題欄高度等。
頭文件
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"))//設置主對話框的布局文件
{
}
void CMainDialog::OnInitDialog()
{
CSkinDialog::OnInitDialog();
//可以在此處添加初始化代碼
}
void CMainDialog::OnNcDestroy(BOOL& bHandle)
{
bHandle = FALSE;
PostQuitMessage(0);//發送這條消息后，應用程序進程退出
}
2.3 資源文件
整個資源的文件結構如下：
I----【res】 //所有資源文件
I I----【HelloWorld】 //HelloWorld的資源文件
I I----【image】 //所有圖片文件
I I----【system】 //系統圖片文件
I I----【Button.png】 //系統圖片Button.png
I I----【MyButton.png】 //用戶圖片MyButton.png
I I----【layout】 //所有布局文件
I I----【system】 //系統布局文件
I I----【Button.xml】 //系統布局文件Button.xml
I I----【MainDialog.xml】 //用戶布局文件MainDialog.xml
I I----【menu】 //所有菜單文件
I I----【MainMenu.xml】 //菜單文件MainMenu.xml
I I----【value】 //所有配置文件
I I----【system】 //系統配置文件
I I----【color.xml】 //系統顏色配置文件
I I----【image.xml】 //系統圖片配置文件
I I----【font.xml】 //系統字體配置文件
I I----【color.xml】 //用戶顏色配置文件
I I----【image.xml】 //用戶圖片配置文件
I I----【font.xml】 //用戶字體配置文件
I I----【config.xml】 //用戶全局配置文件
I I----【string】 //所有字符串文件
I I----【2052】 //簡體字符串文件
I I----【system】 //系統字符串目錄
I I----【string.xml】 //系統字符串文件
I I----【string.xml】 //用戶字符串文件
I I----【1033】 //簡體字符串文件
I I----【system】 //系統字符串目錄
I I----【string.xml】 //系統字符串文件
I I----【string.xml】 //用戶字符串文件
I I----【1028】 //繁體字符串文件
I I----【system】 //系統字符串目錄
I I----【string.xml】 //系統字符串文件
I I----【string.xml】 //用戶字符串文件
2.3.1 圖片文件
系統相關圖片放在文件夾【image】下的【system】文件夾，業務相關的圖片放在文件夾【image】根目錄。
另外，需要在圖片配置文件指定圖片的九宮格拉伸范圍和多態圖片的幀數。
不在配置文件指定的情況下，圖片默認情況下不支持九宮格拉伸，只有一幀。
圖片推薦使用png格式，當然也支持其他圖片格式。
2.3.2 布局文件
為了實現最大可能的擴展性，不僅對話框可以設置布局文件，其他任何控件都可以設置布局文件。
例如，我們可以給按鈕類設置不同的布局文件得到各式各樣的按鈕，可以給列表項設置不同的布局文件，得到不同的列表項。
對話框的布局文件以"SkinDialog"為根節點，這個節點的屬性可以指定對話框的屬性。
下面是一個對話框的布局文件：
<SkinDialog DefaultWidth="800" //默認寬度為800像素
DefaultHeight="540" //默認高度為540像素
MinWidth="600" //最小寬度為600像素
MinHeight="400" //最小高度為400像素
TitleHeight="32" //標題高度為32像素
ThemeHeight="100" //主題高度為100像素
Icon="128" //圖標使用Id為128的ico文件
AllowMove="true" //允許窗口拖動
OpenAreo="true" //允許毛玻璃效果
Resize="true" //允許改變大小
SysButton="SKIN;MENU;MIN;CLOSE" //四個系統按鈕：皮膚、主菜單、最小化、關閉
Caption="IDS_APP_NAME" //標題為字符串IDS_APP_NAME
Animation="SizeChange" //窗口動畫類型為SizeChange
Menu="MainMenu.xml"> //點擊主菜單按鈕，彈出的菜單由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"/>表示菜單項。
- 通過屬性[id]，指定菜單的Id
【Id="1003"】表示菜單項Id為1003。 - 通過屬性[Text]，指定菜單的文本
【Text="IDS_ABOUT"】表示菜單項文本為IDS_ABOUT。 - 通過屬性[Icon]，指定菜單的圖標
【Icon="about.png"】表示菜單項圖標為about.png。
點擊菜單項后，會給當前窗口發送WM_COMMAND消息。
可以通過UI更新消息禁用菜單或者選中菜單，還可以通過全局配置文件設置菜單項的高度。
2.3.3.2 菜單分割條
<MenuItem Separator="true"/>表示菜單分割條。
可以通過全局配置文件設置菜單分割條的高度。
2.3.4 配置文件
2.3.4.1 顏色配置文件
系統相關顏色配置文件為文件夾【value】下的【system】文件夾下的【color.xml】，業務相關顏色配置文件為文件夾【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"】表示顏色Id為ID_COLOR_BLACK。 - 通過節點值，指定顏色的ARGB
【255,0,0,0】表示顏色的Alpha為255，Red為0，Green為0，Blue為0。
顏色可以在代碼中使用，也可以直接在布局文件中使用。
可以作為背景顏色，也可以作為字體顏色，還可以用來繪制線條、繪制矩形、填充矩形。
2.3.4.2 圖片配置文件
系統相關圖片配置文件為文件夾【value】下的【system】文件夾下的【image.xml】，業務相關圖片配置文件為文件夾【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]，指定圖片的態數
【Frame="2"】表示圖片為兩態合并為一張圖片。 - 通過屬性[Patch]，指定圖片的九宮格拉伸范圍
【Patch="7,2,7,2"】表示圖片不拉伸范圍為距左邊7像素，距上邊2像素，距右邊7像素，距下邊2像素。
圖片可以在代碼中使用，也可以直接在布局文件中使用。
可以作為背景、也可以成為ImageView的展示。
2.3.4.3 字符串文件
系統相關字符串文件為文件夾【xxx】下的【system】文件夾下的【string.xml】，業務相關字符串文件為文件夾【xxx】根目錄下的【string.xml】。SkinUI支持多語言，xxx表示語言代碼，例如：
- 2052表示簡體中文
- 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>表示一個字符串。
- 通過屬性[id]，指定字符串的Id
【Id="IDS_MEMU_TIPS">】表示字符串Id為IDS_MEMU_TIPS。 - 通過節點值，指定字符串的值
【主菜單】表示字符串的值為"主菜單"。
字符串可以在代碼中使用，也可以直接在布局文件中使用。
2.3.4.4 字體配置文件
系統相關字體配置文件為文件夾【value】下的【system】文件夾下的【font.xml】，業務相關字體配置文件為文件夾【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>
上面指定了三種字體家族，程序優先使用"微軟雅黑"，如果系統沒有安裝，則使用"新宋體"，如果依然沒安裝，則使用"宋體"。如果宋體也沒有安裝，則會使用系統默認字體。
<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號字體。 - 通過屬性[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>
對話框為圓角矩形，圓角半徑為8 - <DialogBorderColor>ID_COLOR_BORDER</DialogBorderColor>
對話框邊框顏色為ID_COLOR_BORDER - <DialogCaptionFontColor>ID_COLOR_CAPTION</DialogCaptionFontColor>
對話框標題欄顏色為ID_COLOR_CAPTION - <DialogCaptionFontStyle>ID_FONT_BOLD</DialogCaptionFontStyle>
對話框標題欄字體為ID_FONT_BOLD - <DialogShadowPatch>12,12,12,12</DialogShadowPatch>
對話框陰影范圍為左邊12像素，上邊12像素，右邊12像素，下邊12像素 - <DialogSysButtonRightOffset>10</DialogSysButtonRightOffset>
對話框系統按鈕距右邊10個像素 - <MenuMinWidth>150</MenuMinWidth>
菜單最小寬度為150像素 - <MenuItemHeight>24</MenuItemHeight>
菜單項高度為24像素 - <MenuSeparatorHeight>5</MenuSeparatorHeight>
菜單分隔條高度為5像素 - <FullTransparentSkin>true</FullTransparentSkin>
對話框支持全透明皮膚
2.4 皮膚文件
整個皮膚目錄的文件結構如下：
I----【skin】 //所有皮膚文件
I I----【HelloWorld】 //HelloWorld的皮膚文件
I I----【default】 //默認皮膚
I I----【theme.png】 //皮膚文件
I I----【thumb.png】 //皮膚縮略圖
I I----【1】 //系統自帶皮膚1
I I----【theme.png】 //皮膚文件
I I----【thumb.png】 //皮膚縮略圖
I I----【2】 //系統自帶皮膚2
I I----【theme.png】 //皮膚文件
I I----【thumb.png】 //皮膚縮略圖
I I----【3】 //系統自帶皮膚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]，指定皮膚的基準色
【Color="254,255,187,3"】表示皮膚的基準色為ARGB(254,255,187,3)。
皮膚文件尺寸不足時，會使用基準色補全。
2.4.1 主題色
15種主題色ID_COLOR_DEFAULT1 ~ ID_COLOR_DEFAULT15，通過基準色算出。算法為：
- ID_COLOR_DEFAULT1 ~ ID_COLOR_DEFAULT7
透明度不同的基準色，ID_COLOR_DEFAULT1透明度最高。 - ID_COLOR_DEFAULT8
等同于基準色。 - ID_COLOR_DEFAULT9 ~ ID_COLOR_DEFAULT15
基準色覆蓋透明度不同的黑色，ID_COLOR_DEFAULT9覆蓋的黑色透明度最高。
2.4.1 標題顏色
如果基準色為深色系，ID_COLOR_CAPTION = ID_COLOR_WHITE;
如果基準色為淺色系，ID_COLOR_CAPTION = ID_COLOR_TEXT。
