- 官方网站：http://www.skinui.cn
- 下载地址：http://pan.baidu.com/s/1slKsMGt
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"为根节点，这个节点的属性可以指定对话框的属性。
下面是一个对话框的布局文件：
//点击主菜单按钮，弹出的菜单由MainMenu.xml指定
2.3.3 菜单文件
菜单文件的格式如下：
2.3.3.1 菜单文件
表示菜单项。
- 通过属性[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 菜单分割条
表示菜单分割条。
可以通过全局配置文件设置菜单分割条的高度。
2.3.4 配置文件
2.3.4.1 颜色配置文件
系统相关颜色配置文件为文件夹【value】下的【system】文件夹下的【color.xml】，业务相关颜色配置文件为文件夹【value】根目录下的【color.xml】。
文件的格式如下：
255,0,0,0
255,255,255,255
255,64,64,64
- 通过属性[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】。
图片配置文件文件的格式如下：
- 通过属性[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表示繁体中文
文件的格式如下：
最小化
最大化
主菜单
- 通过属性[id]，指定字符串的Id
【Id="IDS_MEMU_TIPS">】表示字符串Id为IDS_MEMU_TIPS。 - 通过节点值，指定字符串的值
【主菜单】表示字符串的值为"主菜单"。
字符串可以在代码中使用，也可以直接在布局文件中使用。
2.3.4.4 字体配置文件
系统相关字体配置文件为文件夹【value】下的【system】文件夹下的【font.xml】，业务相关字体配置文件为文件夹【value】根目录下的【font.xml】。
文件的格式如下：
微软雅黑
新宋体
宋体
字体家族
微软雅黑
新宋体
宋体
上面指定了三种字体家族，程序优先使用"微软雅黑"，如果系统没有安装，则使用"新宋体"，如果依然没安装，则使用"宋体"。如果宋体也没有安装，则会使用系统默认字体。
表示一种字体。
- 通过属性[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】。
文件的格式如下：
8
ID_COLOR_BORDER
ID_COLOR_CAPTION
ID_FONT_BOLD
12,12,12,12
10
150
24
5
true
上面的配置表示一下信息：
8
对话框为圆角矩形，圆角半径为8ID_COLOR_BORDER
对话框边框颜色为ID_COLOR_BORDERID_COLOR_CAPTION
对话框标题栏颜色为ID_COLOR_CAPTIONID_FONT_BOLD
对话框标题栏字体为ID_FONT_BOLD12,12,12,12
对话框阴影范围为左边12像素，上边12像素，右边12像素，下边12像素10
对话框系统按钮距右边10个像素150
菜单最小宽度为150像素24
菜单项高度为24像素5
菜单分隔条高度为5像素true
对话框支持全透明皮肤
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】 //皮肤配置文件
皮肤配置文件的格式如下：
- 通过属性[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。