SkinUI入门教程（一） SkinUI的发展历史和开发环境

• 官方网站：http://www.skinui.cn
• 下载地址：http://pan.baidu.com/s/1slKsMGt

SkinUI界面库提供Windows界面开发全套解决方案，经过几年不断的优化和迭代，变得非常稳定和高效。本文将会简单介绍如何使用SkinUI界面库开发Windows客户端应用。

本章是全书的基础，简要介绍SkinUI界面库的历史、现状和发展趋势，并重点向读者讲解如何搭建和使用SkinUI界面开发环境，包括SkinUI提供的Sln++、Res++、Spy++工具。掌握这些工具是开发SkinUI应用的基础技能。

1.1 历史和现状

SkinUI是本人利用业余时间开发的用于Windows客户端开发的界面库，从2010年8月至今一直不断优化和迭代。

第一版的界面库以MFC为基础自定义了一系列的控件，布局只有绝对定位。虽然能实现市面上大部分客户端软件的效果，但是难以扩展，开发效率低下。同时，因为依赖MFC，安装包需要携带庞大的MFC库文件，其体积是核心库文件的几十倍以上，对于开发一些几百KB的小程序，代价有点大。

为了解决以上问题，第二版本的界面不再依赖MFC，转而以WTL为基础，解决了库文件体积庞大的问题。同时，该版本的界面库增加了相对布局，开发效率显著提高。但是，MFC、WTL存在一些坑，需要写很多猥琐代码才能绕过，不够优雅。另外，跟市面上其他产品相比，界面效果没有让人眼前一亮的感觉。一些动画、换肤等高级功能实现起来依然繁琐、最终实现的效果也无法令人满意。例如采用双窗口联动方式实现的阴影存在跟随问题，在窗口拖动和最大最小化的时候有迟滞。

实际上，以上两个版本都没能完美解决扩展性的问题。例如，为了实现产品各式各样的按钮，每种按钮都需要从按钮类继承一下，最后可能存在几十个类似的按钮类，而它们仅仅只是绘制部分的代码不同。

为了解决以上存在的种种问题，最终开发了第三版的界面库。这一版本的界面库以Win32为基础，不再依赖MFC和WTL等第三方界面库，历史遗留问题得到彻底解决。除了支持相对布局，还支持水平布局、垂直布局、帧布局、表格布局、比例布局等高效的布局方式。同时，以组合的方式实现绝大部分控件，再也不需要每种按钮继承一个按钮类，直接替换布局文件即可得到完全不同样式的按钮。

1.2 发展趋势

Windows客户端开发的一项重要工作就是用户界面的开发。不管客户端应用实际包含的逻辑多么复杂、多么优秀，如果这个应用没有提供友好的图形用户界面，也将很难吸引最终用户。

相反，如果为应用程序提供了友好的图形用户界面，最终用户通过鼠标点点就可以操作整个应用，这个应用程序就会受欢迎得多。实际上，Windows之所以广为人知，其最初的吸引力就是来自于它所提供的图形用户界面。作为一个程序开发者，必须优先考虑用户的感受，一定要让用户感到爽，我们的程序才会被需要、被使用，这样的程序才有价值。

从趋势上看，用户对Windows客户端界面的要求会越来越高，对Windows界面开发人才的需求也越来越大。对于大部分Windows客户端来说，新增功能50%以上的开发量来自于界面开发，后期迭代70%以上的工作量同样来自界面开发。

虽然界面开发的工作量越来越大，但是MFC、WTL等传统界面库开发效率低下，实现动画、换肤等高级需求困难，同时卡顿、闪烁等一系列问题难以彻底解决，已经无法满足互联网时代多变的需求。

SkinUI提供了大量功能丰富的UI组件，开发者只需要按一定的规律把这些UI组件组合起来——就像小朋友“搭积木”一样，把这些UI组件按一定规律搭建在一起就可以开发出优秀的图形用户界面。为了让这些UI组件响应用户的鼠标点击、键盘动作，SkinUI提供了事件响应机制，这样可以方便的响应用户的交互操作。

SkinUI致力于做最好用的Windows客户端界面库，是现阶段界面开发的不二选择。

1.3 开发环境

SkinUI当前版本为2.0，可以从官网下载SkinUI开发包，官网地址：www.skinui.cn。当前版本仅支持Microsoft Visual Studio 2013，SkinUI开发包不需要安装，解压下载的压缩包，开发环境就准备好了。以下是常用的工具：

• SkinUISln++，用来新建工程
• SkinUIRes++，用来打包资源文件
• SkinUISpy++，用来查看组件类型和位置

1.3.1 SkinUISln++

SkinUI使用工具【SkinUISln++】来新建工程。工具截图如下：

SkinUISln++

新建项目的步骤如下：

1. 在编辑框输入工程名称【MyProject】；
2. 单击按钮【立即新建】；
3. 等进度条走完。

新建项目成功后，工作目录下多了以下目录：1）【src】目录下的源码目录【MyProject】；2）【res】目录下的资源目录【MyProject】；3）【skin】目录下的皮肤目录【MyProject】。

将源码目录【MyProject】下的工程文件加入VS2013的解决方案，编译运行即可看到项目的主界面。开发者可以根据自己软件的需求，随意修改主界面的布局。

1.3.2 SkinUIrRes++

SkinUI使用工具【SkinUIRes++】来打包资源文件。工具截图如下：

SkinUIRes++

新建项目的步骤如下：

1. 单击按钮【立即打包】；
2. 等进度条走完。

打包资源文件成功后，【res】目录下任意资源目录【AnyProject】将会生成资源包文件【AnyProject.res】。关于资源包的用法，我们将在后面的章节详细讲解，此处先略过。

1.3.3 SkinUIrSpy++

SkinUI使用工具【SkinUISpy++】来查看控件的属性，包括控件Id、类型、位置和大小。工具截图如下：

鼠标在非SkinUI窗口上的显示效果

鼠标在SkinUI窗口上的显示效果

查看控件属性的步骤如下：

1. 移动鼠标到SkinUI窗口；
2. 放在需要查看的控件上。

观看上面的截图，可以看到以下信息：

• 控件的Id为【1】；
• 控件类名为【SkinButton】；
• 控件的位置为【199,177,125,30】；
• 控件的大小为【125*30】。