重构SkinUI代码更新啦！

最新推荐文章于 2019-11-29 15:48:00 发布

红叶骑士之初

最新推荐文章于 2019-11-29 15:48:00 发布

阅读量3.4k

点赞数 1

分类专栏： C++ MFC

C++ 同时被 2 个专栏收录

47 篇文章 1 订阅

订阅专栏

MFC

26 篇文章 0 订阅

订阅专栏

本次抽了一点时间简单重构了一下SkinUI

先简单概述一下SkinUI，SkinUI是基于重绘MFC控件而开发的一套简单的MFC界面库，而非现在主流的DriectUI库，因为基于Windows的标准控件，所以限制性还是比较大的！因为库中不可能把每个控件做到面面俱到，只是实现目前大多数的功能而已，当遇到更新复杂的控件还是需要用户自己进行重绘！

上一版本的SkinUI，因为逻辑代码和界面没有分离，用户不得不需要在c++中去大量的书写关于控件的设置皮肤代码，为了让用户能更简单的使用SkinUI，本次将界面模块剥夺出来，用xml进行简单的描述来设置皮肤，基本上用户不需要在新建的MFC工程中添加什么代码，只需要做好控件的事件响应即可。

先看一下仿360的示例代码

xml描述代码

Markup

<?xml version="1.0" encoding="UTF-8"?>
<Window size="910,610" mininfo="840,600" bkcolor="#c5c5c5">
	<Font name="微软雅黑" size="12"/>
	<Font name="微软雅黑" size="16"/>
	<Font name="微软雅黑" size="22"/>
  	<Font name="微软雅黑" size="30"/>
	<Image path="360\bg.png" pos="0,3,1,1,1,1" id="1"/>
	<Image path="360\medal.png" pos="1,1,190,1,164,30" id="2"/>
	<Image path="360\1.bmp" pos="0,3,1,121,1,1" id="3"/>
	<Image path="360\logo.png" pos="1,1,160,50,10,112" id="4"/>
	<Image path="360\register_bg.png" pos="1,1,250,132,5,265" id="5"/>	
	<Image path="360\fenge_line.png" pos="1,3,255,121,254,1" id="6"/>	
	<Image path="360\error.png" pos="0,0,51,168,197,286" id="7"/>
	
	<String text="360安全卫士9.2" font="1" color="#FFFFFF" pos="0,0,15,10,200,50" id="1"/>
	<String text="您的电脑已经" pos="0,0,250, 180, 350, 280" font="2" color="#1C1C1C" id="2"/>
	<String text="24" pos="0,0,360, 175, 400, 280" font="3" color="#0000FF" id="3"/>
	<String text="天没有体检，建议立即体检！" pos="0,0,400,180,680,280" font="2" color="#1C1C1C" id="4"/>
	<String text="系统可能已经存在大量风险，安全性和性能都在急速下降，" pos="0,0,250, 220, 680, 270" font="1" color="#555555" id="5"/>
	<String text="建议您每天坚持电脑体检，提高电脑的安全和性能" pos="0,0,250, 240, 680, 280" font="1" color="#555555" id="6"/>
	<String text="执行电脑检查啥的" pos="0,0,250, 240, 680, 280" font="4" color="#0000FF" id="7" visible="false"/>
			
	<String text="控件自己放吧，不折腾了！so easy！" pos="3,3,240, 350, 1, 1" font="4" format="8208" color="#0000FF" id="8"/>
	
	<Button pos="1,1,35,0,8,22" type="push" id="5000" normalimage="360\close_normal.png" hotimage="360\close_hover.png" pushedimage="360\close_pressed.png" focusedimage="360\close_normal.png" size="27,22" trans="true"/>
	<Button pos="1,1,62,0,35,22" type="push" id="5001" normalimage="360\min_normal.png" hotimage="360\min_hover.png" pushedimage="360\min_pressed.png" focusedimage="360\min_normal.png" size="27,22" trans="true"/>
	<Button pos="1,1,89,0,62,22" type="push" id="5003" normalimage="360\menu_normal.png" hotimage="360\menu_hover.png" pushedimage="360\menu_pressed.png" focusedimage="360\menu_normal.png" size="27,22" trans="true"/>
	<Button pos="1,1,116,0,89,22" type="push" id="5004" normalimage="360\feedback_normal.png" hotimage="360\feedback_hover.png" pushedimage="360\feedback_pressed.png" focusedimage="360\feedback_normal.png" size="27,22" trans="true"/>
	<Button pos="1,1,143,0,116,22" type="push" id="5005" normalimage="360\skin_normal.png" hotimage="360\skin_hover.png" pushedimage="360\skin_pressed.png" focusedimage="360\skin_normal.png" size="27,22" trans="true"/>
	
	<TabCtrl pos="0,0,10,40,670,120" paddingtext="17,65" fontnormalcolor="#FFFFFF" trans="true" id="5900">
		<item text="电脑体检" iconimage="360\ico_Examine.png" selimage="360\ico_Examine.png"/>
		<item text="木马查杀" iconimage="360\ico_dsmain.png" selimage="360\ico_dsmain.png"/>
		<item text="系统修复" iconimage="360\ico_SysRepair.png" selimage="360\ico_SysRepair.png"/>
		<item text="电脑清理" iconimage="360\ico_TraceCleaner.png" selimage="360\ico_TraceCleaner.png"/>
		<item text="优化加速" iconimage="360\ico_SpeedupOpt.png" selimage="360\ico_SpeedupOpt.png"/>
		<item text="电脑专家" iconimage="360\ico_expert.png" selimage="360\ico_expert.png"/>
		<item text="电脑门诊" iconimage="360\ico_diannaomenzhen.png" selimage="360\ico_diannaomenzhen.png"/>
		<item text="软件管家" iconimage="360\ico_softmgr.png" selimage="360\ico_softmgr.png"/>
	
		<itemimage highlight="360\toolbar_hover.png" down="360\toolbar_hover.png" ninepart="2,2,2,2"/>
		<itemsize size="80,80"/>
	</TabCtrl>
	
	<Button pos="0,0,230,350,396,416" type="push" id="5006" normalimage="360\check_normal.png" hotimage="360\check_hover.png" pushedimage="360\check_pressed.png" focusedimage="360\check_normal.png" size="27,22" trans="true"/>
	
	
</Window>

简单说一下使用SkinUI的步骤新建mfc对话框工程，取名360Safe，

打开Stdafx.h文件，添加SkinUI需要的头文件和库文件，添加如下代码

C++

#include "../SkinUI/SkinUI.h"
//库文件
#ifdef _DEBUG
#ifdef _UNICODE
#pragma comment (lib,"../Lib/SkinUI_ud.lib")
#else
#pragma comment (lib,"../Lib/SkinUI_d.lib")
#endif
#else
#ifdef _UNICODE
#pragma comment (lib,"../Lib/SkinUI_u.lib")
#else
#pragma comment (lib,"../Lib/SkinUI.lib")
#endif
#endif

打开360SafeDlg.h文件，修改对话框基类，改成class CMy360SafeDlg : public CSkinDialog

将原来的CDialog改成CSkinDialog即可

打开360SafeDlg.cpp文件将本文档所有CDialog字符串替换成CSkinDialog 即可

加载xml文件，在CMy360SafeDlg的构造函数的成员初始化列表中增加一个参数

C++

CMy360SafeDlg::CMy360SafeDlg(CWnd* pParent /*=NULL*/)
: CSkinDialog(CMy360SafeDlg::IDD,TEXT("360Safe.xml"), pParent)
{
m_hIcon = AfxGetApp()->LoadIcon(IDR_MAINFRAME);
}