1.3 文件结构
<p>SkinUI应用程序结构简单，主要由源文件、资源文件和皮肤文件组成。使用SkinUI Sln++工具，新建工程【Hello World】。可以看到整个工程的文件结构如下：</p>
<pre><code class="language-c">I----【bin】 //可执行文件和资源文件
I I----【debug】 //Debug版本的可执行文件和自由文件
I I----【cef】 //Debug版本的cef控件支持文件
I I----【res】 //所有资源文件
I I----【HelloWorld】 //HelloWorld的资源文件
I I----【SkinUI】 //SkinUI的资源文件
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----【SkinUI】 //SkinUI的资源文件
I I----【skin】 //所有皮肤文件
I I----【HelloWorld】 //HelloWorld的皮肤文件
I----【src】 //所有源码文件
I I----【HelloWorld】 //HelloWorld源码文件
I I----【Include】 //所有头文件
I I----【SkinUI】 //SkinUI的头文件</code></pre>
<p>如果不需要支持CEF控件，发布时可以删除【cef】文件夹，大大减小安装包的体积。</p>
<h2>1 源码文件</h2>
<p>SkinUI应用程序至少需要一个应用程序入口函数、一个应用程序类和若干对话框类。如果需要自定义控件，还会有一些自定义控件类。</p>
<h3>1.1应用程序入口</h3>
<p>Win32窗口程序的入口函数为WinMain，SkinUI应用程序直接使用工具生成的代码即可。</p>
<pre><code class="language-cpp">int APIENTRY _tWinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPTSTR lpCmdLine, int nCmdShow)
{
return SkinUI::WinMain(hInstance, lpCmdLine, nCmdShow);
}</code></pre>
<h3>1.2 应用程序类</h3>
<p>SkinUI程序在整个生命周期只会实例化一个应用程序类。我们需要继承CSkinApp，实现两个接口，完成初始化操作并弹出主窗口。</p>
<p>应用程序类的生命周期为整个程序的生命周期，我们可以在此缓存数据。例如，可以在此处缓存用户名和用户ID。具体代码如下：</p>
<h5>头文件</h5>
<pre><code class="language-cpp">class CHelloWorld : public CSkinApp
{
public:
CHelloWorld();
public:
virtual BOOL InitInstance(ResType&amp; resType);
virtual void Run(const tstring&amp; strCmdLine, int nCmdShow);
virtual void ExitInstance();
};</code></pre>
<h5>源文件</h5>
<pre><code class="language-cpp">CHelloWorld theApp;
CHelloWorld::CHelloWorld()
{
}
BOOL CHelloWorld::InitInstance(ResType&amp; resType)
{
SkinUI::LoadMySkin(_T(&quot;C:\\MySkin\\HelloWorld\\&quot;)); //加载自定义皮肤
resType = RT_FILE; //资源类型为文件资源
//resType = RT_FILE_PACKAGE; //资源类型为文件资源包
//resType = RT_RC_PACKAGE; //资源类型为RC资源包
return TRUE;
}
void CHelloWorld::Run(const tstring&amp; strCmdLine, int nCmdShow)
{
CMainDialog dlg;
SkinUI::SetMainWnd(&amp;dlg);//设置主窗口
dlg.DoModal(NULL);//弹出主对话框
}
void CHelloWorld::ExitInstance()
{
//此处做一些清理操作
}</code></pre>
<h3>1.3 主对话框</h3>
<p>主对话框是程序弹出的第一个窗口。窗口的布局由xml格式的布局文件指定，需要在构造函数处传递给基类。主窗口的布局文件通常为"MainDialog.xml"。</p>
<p>可以通过布局文件指定一些窗口的基本属性，例如窗口大小，标题栏高度等。</p>
<h5>头文件</h5>
<pre><code class="language-c">class CMainDialog : public CSkinDialog
{
public:
CMainDialog();
public:
virtual void OnInitDialog();
protected:
void OnNcDestroy(BOOL&amp; bHandle);
SKINUI_DECLARE_MESSAGE_MAP()
};</code></pre>
<h5>源文件</h5>
<pre><code class="language-c">//此处是消息映射后，这里只处理WM_NCDESTROY
SKINUI_BEGIN_MESSAGE_MAP(CMainDialog, CSkinDialog)
ON_SKINUI_WM_NCDESTROY()
SKINUI_END_MESSAGE_MAP()
CMainDialog::CMainDialog()
: CSkinDialog(_T(&quot;MainDialog.xml&quot;))//设置主对话框的布局文件
{
}
void CMainDialog::OnInitDialog()
{
CSkinDialog::OnInitDialog();
//可以在此处添加初始化代码
}
void CMainDialog::OnNcDestroy(BOOL&amp; bHandle)
{
bHandle = FALSE;
PostQuitMessage(0);//发送这条消息后，应用程序进程退出
}</code></pre>
<h2>2 资源文件</h2>
<p>整个资源的文件结构如下：</p>
<pre><code class="language-c">I----【res】 //所有资源目录
I I----【SkinUI】 //系统资源目录
I I----【image】 //系统图片目录
I I----【Button.png】 //系统图片MyButton.png
I I----【layout】 //系统布局目录
I I----【Button.xml】 //系统布局文件MainDialog.xml
I I----【menu】 //系统菜单目录
I I----【EditMenu.xml】 //系统菜单文件MainMenu.xml
I I----【value】 //系统配置目录
I I----【color.xml】 //系统颜色配置文件
I I----【image.xml】 //系统图片配置文件
I I----【font.xml】 //系统字体配置文件
I I----【config.xml】 //系统全局配置文件
I I----【string】 //系统字符串目录
I I----【2052】 //系统简体字符串目录
I I----【string.xml】 //系统简体字符串文件
I I----【1033】 //系统英文字符串目录
I I----【string.xml】 //系统英文字符串文件
I I----【1028】 //系统繁体字符串目录
I I----【string.xml】 //系统繁体字符串文件
I I----【HelloWorld】 //用户资源目录
I I----【image】 //用户图片目录
I I----【MyButton.png】 //用户图片MyButton.png
I I----【layout】 //用户布局目录
I I----【MainDialog.xml】 //用户布局文件MainDialog.xml
I I----【menu】 //用户菜单目录
I I----【MainMenu.xml】 //用户菜单文件MainMenu.xml
I I----【value】 //用户配置目录
I I----【color.xml】 //用户颜色配置文件
I I----【image.xml】 //用户图片配置文件
I I----【font.xml】 //用户字体配置文件
I I----【config.xml】 //用户全局配置文件
I I----【string】 //用户字符串目录
I I----【2052】 //用户简体字符串目录
I I----【string.xml】 //用户简体字符串文件
I I----【1033】 //用户英文字符串目录
I I----【string.xml】 //用户英文字符串文件
I I----【1028】 //用户繁体字符串目录
I I----【string.xml】 //用户繁体字符串文件</code></pre>
<h3>2.1 图片文件</h3>
<p>系统相关的图片放在文件夹【SkinUI\image】，业务相关的图片放在文件夹【HelloWorld\image】。</p>
<p>另外，需要在图片配置文件指定图片的九宫格拉伸范围和多态图片的帧数。不在配置文件指定的情况下，图片默认情况下不支持九宫格拉伸，只有一帧。</p>
<p>图片推荐使用png格式，当然也支持其他图片格式。</p>
<h3>2.2 布局文件</h3>
<p>系统相关的布局文件放在文件夹【SkinUI\layout】，业务相关的布局文件放在文件夹【HelloWorld\layout】。</p>
<p>为了实现最大可能的扩展性，不仅对话框可以设置布局文件，其他任何控件都可以设置布局文件。例如，我们可以给按钮类设置不同的布局文件得到各式各样的按钮，可以给列表项设置不同的布局文件，得到不同的列表项。</p>
<p>对话框的布局文件以"SkinDialog"为根节点，这个节点的属性可以指定对话框的属性。</p>
<p>下面是一个对话框的布局文件：</p>
<pre><code class="language-xml">&lt;SkinDialog DefaultWidth=&quot;800&quot; //默认宽度为800像素
DefaultHeight=&quot;540&quot; //默认高度为540像素
MinWidth=&quot;600&quot; //最小宽度为600像素
MinHeight=&quot;400&quot; //最小高度为400像素
TitleHeight=&quot;32&quot; //标题高度为32像素
ThemeHeight=&quot;100&quot; //主题高度为100像素
Icon=&quot;128&quot; //图标使用Id为128的ico文件
AllowMove=&quot;true&quot; //允许窗口拖动
OpenAreo=&quot;true&quot; //允许毛玻璃效果
Resize=&quot;true&quot; //允许改变大小
SysButton=&quot;SKIN;MENU;MIN;CLOSE&quot; //四个系统按钮：皮肤、主菜单、最小化、关闭
Caption=&quot;IDS_APP_NAME&quot; //标题为字符串IDS_APP_NAME
Animation=&quot;SizeChange&quot; //窗口动画类型为SizeChange
Menu=&quot;MainMenu.xml&quot;&gt; //点击主菜单按钮，弹出的菜单由MainMenu.xml指定
&lt;/SkinDialog&gt;</code></pre>
<h3>2.3 菜单文件</h3>
<p>系统相关的菜单文件放在文件夹【SkinUI\menu】，业务相关的菜单文件放在文件夹【HelloWorld\menu】。</p>
<p>菜单文件的格式如下：</p>
<pre><code class="language-xml">&lt;Menu&gt;
&lt;MenuItem Id=&quot;1003&quot; Text=&quot;IDS_ABOUT&quot; Icon=&quot;about.png&quot;/&gt;
&lt;MenuItem Id=&quot;1004&quot; Text=&quot;IDS_HELP&quot; Icon=&quot;help.png&quot;/&gt;
&lt;MenuItem Separator=&quot;true&quot;/&gt;
&lt;MenuItem Id=&quot;2&quot; Text=&quot;IDS_QUIT&quot; Icon=&quot;quit.png&quot;/&gt;
&lt;/Menu&gt;</code></pre>
<h4>2.3.1 菜单项</h4>
<pre><code class="language-xml">&lt;MenuItem Id=&quot;1003&quot; Text=&quot;IDS_ABOUT&quot; Icon=&quot;about.png&quot;/&gt;</code></pre>
<ul>
<li>
<p>通过属性[id]，指定菜单的Id
【Id="1003"】表示菜单项Id为1003。</p>
</li>
<li>
<p>通过属性[Text]，指定菜单的文本
【Text="IDS_ABOUT"】表示菜单项文本为IDS_ABOUT。</p>
</li>
<li>通过属性[Icon]，指定菜单的图标
【Icon="about.png"】表示菜单项图标为about.png。</li>
</ul>
<p>点击菜单项后，会给当前窗口发送WM_COMMAND消息。</p>
<p>通过UI更新消息禁用菜单或者选中菜单，还可以通过全局配置文件设置菜单项的高度。</p>
<h4>2.3.2 菜单分割条</h4>
<pre><code class="language-xml">&lt;MenuItem Separator=&quot;true&quot;/&gt;</code></pre>
<p>通过全局配置文件设置菜单分割条的高度。</p>
<h3>2.4 配置文件</h3>
<h4>2.4.1 颜色配置文件</h4>
<p>系统相关的颜色配置文件为【SkinUI\value\color.xml】，业务相关的颜色配置文件为【HelloWorld\value\color.xml】。</p>
<p>文件的格式如下：</p>
<pre><code class="language-xml">&lt;ColorTable&gt;
&lt;Color Id=&quot;ID_COLOR_BLACK&quot;&gt;255,0,0,0&lt;/Color&gt;
&lt;Color Id=&quot;ID_COLOR_WHITE&quot;&gt;255,255,255,255&lt;/Color&gt;
&lt;Color Id=&quot;ID_COLOR_TEXT&quot;&gt;255,64,64,64&lt;/Color&gt;
&lt;/ColorTable&gt;</code></pre>
<pre><code class="language-xml">&lt;Color Id=&quot;ID_COLOR_BLACK&quot;&gt;255,0,0,0&lt;/Color&gt;</code></pre>
<ul>
<li>
<p>表示一种颜色</p>
</li>
<li>
<p>通过属性[id]，指定颜色的Id
【Id="1003"】表示颜色Id为ID_COLOR_BLACK。</p>
</li>
<li>通过节点值，指定颜色的ARGB
【255,0,0,0】表示颜色的Alpha为255，Red为0，Green为0，Blue为0。</li>
</ul>
<p>颜色可以在代码中使用，也可以直接在布局文件中使用。可以作为背景颜色，也可以作为字体颜色，还可以用来绘制线条、绘制矩形、填充矩形。</p>
<h4>2.4.2 图片配置文件</h4>
<p>系统相关的图片配置文件为【SkinUI\value\image.xml】，业务相关的图片配置文件为【HelloWorld\value\image.xml】。</p>
<p>图片配置文件文件的格式如下：</p>
<pre><code class="language-xml">&lt;ImageTable&gt;
&lt;Image Name=&quot;Progress.png&quot; Frame=&quot;2&quot; Patch=&quot;7,2,7,2&quot;/&gt;
&lt;Image Name=&quot;Button.png&quot; Frame=&quot;4&quot;/&gt;
&lt;Image Name=&quot;Edit.png&quot; Frame=&quot;4&quot;/&gt;
&lt;/ImageTable&gt;</code></pre>
<pre><code class="language-xml">&lt;Image Name=&quot;Progress.png&quot; Frame=&quot;2&quot; Patch=&quot;7,2,7,2&quot;/&gt;</code></pre>
<ul>
<li>
<p>表示一张图片</p>
</li>
<li>
<p>通过属性[Name]，指定图片的名字
【Name="Progress.png"】表示图片名字为Progress.png。</p>
</li>
<li>
<p>通过属性[Frame]，指定图片的态数
【Frame="2"】表示图片为两态合并为一张图片。</p>
</li>
<li>通过属性[Patch]，指定图片的九宫格拉伸范围
【Patch="7,2,7,2"】表示图片不拉伸范围为距左边7像素，距上边2像素，距右边7像素，距下边2像素。</li>
</ul>
<p>图片可以在代码中使用，也可以直接在布局文件中使用。可以作为背景、也可以成为ImageView的展示。</p>
<h4>2.4.3 字符串配置文件</h4>
<p>系统相关的字符串配置文件为【res\SkinUI\string\xxx\string.xml】。业务相关的字符串配置文件为【res\HelloWorld\string\xxx\string.xml】。</p>
<p>SkinUI支持多语言，xxx表示语言代码，例如：</p>
<ul>
<li>
<p>2052表示简体中文</p>
</li>
<li>
<p>1033表示英文</p>
</li>
<li>1028表示繁体中文</li>
</ul>
<p>文件的格式如下：</p>
<pre><code class="language-xml">&lt;StringTable&gt;
&lt;String Id=&quot;IDS_MIN_TIPS&quot;&gt;最小化&lt;/String&gt;
&lt;String Id=&quot;IDS_MAX_TIPS&quot;&gt;最大化&lt;/String&gt;
&lt;String Id=&quot;IDS_MENU_TIPS&quot;&gt;主菜单&lt;/String&gt;
&lt;/StringTable&gt;</code></pre>
<p>字符串可以在代码中使用，也可以直接在布局文件中使用。</p>
<pre><code class="language-xml">&lt;String Id=&quot;IDS_MEMU_TIPS&quot;&gt;主菜单&lt;/String&gt;</code></pre>
<ul>
<li>
<p>表示一个字符串。</p>
</li>
<li>
<p>通过属性[id]，指定字符串的Id
【Id="IDS_MEMU_TIPS">】表示字符串Id为IDS_MEMU_TIPS。</p>
</li>
<li>通过节点值，指定字符串的值
【主菜单】表示字符串的值为"主菜单"。</li>
</ul>
<h4>2.4.4 字体配置文件</h4>
<p>系统相关的字体配置文件为【SkinUI\value\font.xml】，业务相关的字体配置文件为【HelloWorld\value\font.xml】。</p>
<p>文件的格式如下：</p>
<pre><code class="language-xml">&lt;FontFamily&gt;
&lt;Familys&gt;
&lt;Family&gt;微软雅黑&lt;/Family&gt;
&lt;Family&gt;新宋体&lt;/Family&gt;
&lt;Family&gt;宋体&lt;/Family&gt;
&lt;/Familys&gt;
&lt;Fonts&gt;
&lt;Font Id=&quot;ID_FONT_SMALL&quot; Size=&quot;8&quot; Bold=&quot;false&quot; Italic=&quot;false&quot; Strikeout=&quot;false&quot; Underline=&quot;false&quot;/&gt;
&lt;Font Id=&quot;ID_FONT_BOLD&quot; Size=&quot;9&quot; Bold=&quot;true&quot; Italic=&quot;false&quot; Strikeout=&quot;false&quot; Underline=&quot;false&quot;/&gt;
&lt;Font Id=&quot;ID_FONT_BIG&quot; Size=&quot;12&quot; Bold=&quot;false&quot; Italic=&quot;false&quot; Strikeout=&quot;false&quot; Underline=&quot;false&quot;/&gt;
&lt;/Fonts&gt;
&lt;/FontFamily&gt;</code></pre>
<h5>字体家族</h5>
<pre><code class="language-xml"> &lt;Familys&gt;
&lt;Family&gt;微软雅黑&lt;/Family&gt;
&lt;Family&gt;新宋体&lt;/Family&gt;
&lt;Family&gt;宋体&lt;/Family&gt;
&lt;/Familys&gt;</code></pre>
<p>上面指定了三种字体家族，程序优先使用"微软雅黑"，如果系统没有安装，则使用"新宋体"，如果依然没安装，则使用"宋体"。如果宋体也没有安装，则会使用系统默认字体。</p>
<p>字体可以在代码中使用，也可以直接在布局文件中使用。</p>
<pre><code class="language-xml">&lt;Font Id=&quot;ID_FONT_BOLD&quot; Size=&quot;9&quot; Bold=&quot;true&quot; Italic=&quot;false&quot; Strikeout=&quot;false&quot; Underline=&quot;false&quot;/&gt;</code></pre>
<ul>
<li>
<p>表示一种字体。</p>
</li>
<li>
<p>通过属性[id]，指定字体的Id
【Id="ID_FONT_BOLD"】表示字体Id为ID_FONT_BOLD。</p>
</li>
<li>
<p>通过属性[Size]，指定字体的大小
【Size="9"】表示字体为9号字体。</p>
</li>
<li>
<p>通过属性[Bold="true"]，指定字体是否加粗
【Bold="true"】表示字体加粗。</p>
</li>
<li>
<p>通过属性[Italic="false"]，指定字体是否为斜体
【Italic="false"】表示字体不是斜体。</p>
</li>
<li>
<p>通过属性[Strikeout="false"]，指定字体是否需要加删除线
【Strikeout="false"】表示字体不加删除线。</p>
</li>
<li>通过属性[Underline="false"]，指定字体是否需要加下划线
【Underline="false"】表示字体不加下划线。</li>
</ul>
<h4>2.4.5 全局配置文件</h4>
<p>全局配置文件为文件夹【value】根目录下的【config.xml】。</p>
<p>文件的格式如下：</p>
<pre><code class="language-xml">&lt;Configs&gt;
&lt;DialogRadius&gt;8&lt;/DialogRadius&gt;
&lt;DialogBorderColor&gt;ID_COLOR_BORDER&lt;/DialogBorderColor&gt;
&lt;DialogCaptionFontColor&gt;ID_COLOR_CAPTION&lt;/DialogCaptionFontColor&gt;
&lt;DialogCaptionFontStyle&gt;ID_FONT_BOLD&lt;/DialogCaptionFontStyle&gt;
&lt;DialogShadowPatch&gt;12,12,12,12&lt;/DialogShadowPatch&gt;
&lt;DialogSysButtonRightOffset&gt;10&lt;/DialogSysButtonRightOffset&gt;
&lt;MenuMinWidth&gt;150&lt;/MenuMinWidth&gt;
&lt;MenuItemHeight&gt;24&lt;/MenuItemHeight&gt;
&lt;MenuSeparatorHeight&gt;5&lt;/MenuSeparatorHeight&gt;
&lt;FullTransparentSkin&gt;true&lt;/FullTransparentSkin&gt;
&lt;/Configs&gt;</code></pre>
<p>上面的配置表示以下信息：</p>
<ul>
<li>
<p><DialogRadius>8</DialogRadius>
对话框为圆角矩形，圆角半径为8</p>
</li>
<li>
<p><DialogBorderColor>ID_COLOR_BORDER</DialogBorderColor>
对话框边框颜色为ID_COLOR_BORDER</p>
</li>
<li>
<p><DialogCaptionFontColor>ID_COLOR_CAPTION</DialogCaptionFontColor>
对话框标题栏颜色为ID_COLOR_CAPTION</p>
</li>
<li>
<p><DialogCaptionFontStyle>ID_FONT_BOLD</DialogCaptionFontStyle>
对话框标题栏字体为ID_FONT_BOLD</p>
</li>
<li>
<p><DialogShadowPatch>12,12,12,12</DialogShadowPatch>
对话框阴影范围为左边12像素，上边12像素，右边12像素，下边12像素</p>
</li>
<li>
<p><DialogSysButtonRightOffset>10</DialogSysButtonRightOffset>
对话框系统按钮距右边10个像素</p>
</li>
<li>
<p><MenuMinWidth>150</MenuMinWidth>
菜单最小宽度为150像素</p>
</li>
<li>
<p><MenuItemHeight>24</MenuItemHeight>
菜单项高度为24像素</p>
</li>
<li>
<p><MenuSeparatorHeight>5</MenuSeparatorHeight>
菜单分隔条高度为5像素</p>
</li>
<li><FullTransparentSkin>true</FullTransparentSkin>
对话框支持全透明皮肤</li>
</ul>
<h2>3 皮肤文件</h2>
<p>整个皮肤目录的文件结构如下：</p>
<pre><code class="language-c">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】 //皮肤配置文件</code></pre>
<p>皮肤配置文件的格式如下：</p>
<pre><code class="language-xml">&lt;Skins&gt;
&lt;Skin Name=&quot;default&quot; Color=&quot;254,255,187,3&quot;/&gt;
&lt;Skin Name=&quot;1&quot; Color=&quot;254,82,207,209&quot;/&gt;
&lt;Skin Name=&quot;2&quot; Color=&quot;254,170,202,53&quot;/&gt;
&lt;Skin Name=&quot;3&quot; Color=&quot;254,248,251,220&quot;/&gt;
&lt;Skin Name=&quot;4&quot; Color=&quot;254,107,71,18&quot;/&gt;
&lt;Skin Name=&quot;5&quot; Color=&quot;254,118,176,252&quot;/&gt;
&lt;Skin Name=&quot;6&quot; Color=&quot;254,70,140,240&quot;/&gt;
&lt;Skin Name=&quot;7&quot; Color=&quot;254,195,221,212&quot;/&gt;
&lt;Skin Name=&quot;8&quot; Color=&quot;254,75,87,101&quot;/&gt;
&lt;Skin Name=&quot;9&quot; Color=&quot;254,83,178,16&quot;/&gt;
&lt;Skin Name=&quot;10&quot; Color=&quot;254,67,103,163&quot;/&gt;
&lt;Skin Name=&quot;11&quot; Color=&quot;254,187,224,243&quot;/&gt;
&lt;Skin Name=&quot;101&quot; Color=&quot;255,22,154,218&quot;/&gt;
&lt;Skin Name=&quot;102&quot; Color=&quot;255,40,138,221&quot;/&gt;
&lt;Skin Name=&quot;103&quot; Color=&quot;255,49,166,107&quot;/&gt;
&lt;Skin Name=&quot;104&quot; Color=&quot;255,218,67,78&quot;/&gt;
&lt;Skin Name=&quot;105&quot; Color=&quot;255,229,98,129&quot;/&gt;
&lt;Skin Name=&quot;106&quot; Color=&quot;255,177,99,159&quot;/&gt;
&lt;Skin Name=&quot;107&quot; Color=&quot;255,89,92,160&quot;/&gt;
&lt;Skin Name=&quot;108&quot; Color=&quot;255,48,116,193&quot;/&gt;
&lt;Skin Name=&quot;109&quot; Color=&quot;255,0,130,154&quot;/&gt;
&lt;Skin Name=&quot;110&quot; Color=&quot;255,79,176,172&quot;/&gt;
&lt;Skin Name=&quot;111&quot; Color=&quot;255,112,197,196&quot;/&gt;
&lt;Skin Name=&quot;112&quot; Color=&quot;255,128,77,77&quot;/&gt;
&lt;Skin Name=&quot;113&quot; Color=&quot;255,240,188,89&quot;/&gt;
&lt;Skin Name=&quot;114&quot; Color=&quot;255,207,186,170&quot;/&gt;
&lt;Skin Name=&quot;115&quot; Color=&quot;255,72,72,200&quot;/&gt;
&lt;Skin Name=&quot;116&quot; Color=&quot;255,104,72,200&quot;/&gt;
&lt;Skin Name=&quot;117&quot; Color=&quot;255,136,72,200&quot;/&gt;
&lt;/Skins&gt;</code></pre>
<pre><code class="language-xml">&lt;Skin Name=&quot;default&quot; Color=&quot;254,255,187,3&quot;/&gt;</code></pre>
<ul>
<li>
<p>表示一张皮肤。</p>
</li>
<li>
<p>通过属性[Name]，指定皮肤的名字
【Name="default"】表示对应目录【skin\default】下的皮肤。</p>
</li>
<li>通过属性[Color]，指定皮肤的基准色
【Color="254,255,187,3"】表示皮肤的基准色为ARGB(254,255,187,3)。
皮肤文件尺寸不足时，会使用基准色补全。</li>
</ul>
<h3>3.1 主题色</h3>
<p>15种主题色ID_COLOR_DEFAULT1 ~ ID_COLOR_DEFAULT15，通过基准色算出。算法为：</p>
<ul>
<li>
<p>ID_COLOR_DEFAULT1 ~ ID_COLOR_DEFAULT7
透明度不同的基准色，ID_COLOR_DEFAULT1透明度最高。</p>
</li>
<li>
<p>ID_COLOR_DEFAULT8
等同于基准色。</p>
</li>
<li>ID_COLOR_DEFAULT9 ~ ID_COLOR_DEFAULT15
基准色覆盖透明度不同的黑色，ID_COLOR_DEFAULT9覆盖的黑色透明度最高。</li>
</ul>