炫彩界面库v1.4.2-360安全卫士v8.5-UI设计器使用教程

最新推荐文章于 2022-07-17 11:58:23 发布
最新推荐文章于 2022-07-17 11:58:23 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： C++基础 MFC基础

炫彩界面库-UI设计器使用教程,该教程以360安全卫士为例.


先上一张最终程序截图


文件相对路径 -说明

文件的相对路径为UI设计器的路径;例如在UI设计器目录中有个UI项目文件夹[MyProject], 在项目文件夹中有个图片文件夹[image],在图片文件夹中有个按钮图片[button.png],
那么图片的相对路径为:MyProject\image\button.png. 如果图片路径错误,是不会显示该图片的,你也可以输入全路径.


1.新建项目

1.1. 打开UI设计器

1.2.主菜单->新建项目,在弹出的窗口中输入信息.


1.3.点击确定按钮,创建项目完成,在文件视图中,可以看见创建的项目,里面有3个文件,布局文件,样式文件和资源文件.

2.布局视图

2.1.在文件视图中,双击布局文件(mainFrame.xml)打开,然后在布局视图中显示.

点击右侧属性视图,设置属性参数,设置窗口名称,宽度850和高度600.

在布局视图空白区域点鼠标右键,菜单->隐藏边框,因为360安全卫士没有边框.

2.2.在资源视图中添加ID,如下图所示.

步骤:文件视图->双击资源文件->资源视图中点击添加[按钮]->弹出选择资源类型窗口.这里选择ID资源,然后点击[确定]按钮.

2.3.在弹出的窗口中,输入资源ID名称和值,点击确定按钮.

2.4.添加9个按钮ID.


2.5. 在布局视图中选中客户区,让客户区拥有焦点边框, 以确定我们要放入元素的父元素, 从工具箱中选择按钮元素,将按钮放入布局视图,如下图所示.

在属性视图中输入按钮属性,及按钮名称,按钮ID等,如下图所示.

2.6.调整按钮位置和大小,可以通过键盘方向键微调坐标,如下图所示,按钮的ID:@IDB_TAB1 ... @IDB_TAB9

2.7.从工具箱中选中图片元素,放入布局视图,在属性视图中填入信息,如下图所示.

2.8在布局视图中,放入一个图片元素,作为第一个子页面,也就是[电脑体验]按钮对应的页面,如下图所示,输入参数.



2.8..1再在子页面上放入一个图片元素,如下图所示.



2.9如下图所示,放入其他几个UI元素,在资源视图中,定义所有的ID.

3.添加样式

3.1.添加窗口样式:打开样式文件mainFrame.css,点击添加按钮添加样式,如下图所示,然后点击确定按钮.

3.2.添加样式属性:选中刚才添加的样式名称,然后点击右边的[添加]按钮,添加样式属性,如下图所示.

3.3.添加如下属性

3.4 关联样式表文件和资源文件

3.4.1在文件视图 中,选择布局文件,鼠标右键菜单->属性 .

3.4.2.将布局文件关联样式文件和资源文件,这样我们的样式和资源才会被布局文件应用.

3.4.3 同样将样式文件关联资源文件,就相当于C++的#include "mainFrame.res"包含头文件,这样它才能找到资源中定义的信息.


4.保存-执行预览

4.1.在布局视图,样式视图和资源视图,分别点击工具栏上的[保存]按钮,然后点击工具栏上的执行按钮,预览实际效果,如下图所示结果.


4.2添加TAB按钮的样式

4.2.1添加第一个TAB按钮样式(@IDB_TAB1),如下图所示填入参数,"类型:指定",我们可以让他修饰指定按钮.


4.2.2.给样式(CSS_TAB1)添加如下属性, ID="@IDB_TAB1" 表示修饰该ID的元素.

4.3 保存文件,点击[执行]按钮预览效果,如下图所示,我们已经看见[电脑体验]按钮被样式修饰(@IDB_TAB1).


4.4.同样我们为其他8个TAB按钮添加样式,@IDB_TAB2 ... @IDB_TAB9.

4.5.点击保存按钮,执行预览实际效果,我们可以看见9个TAB按钮已经被修饰美化(@IDB_TAB1 ... @IDB_TAB9).

5.右上角LOGO图片添加样式

5.1为右上角LOG图片添加样式,如下图所示.

5.1.1  保存样式,点击执行按钮预览.

5.2 同样我们为按钮@IDB_TAB(电脑体验) 对应的子页面 @ID_PAGE1(第一个子页), 上的2个 图片元素 @IDP_PICTURE2 和 @IDP_PICTURE3(实时防护已开启)添加样式.

然后执行预览效果如下图所示.



5.3 静态文件元素样式 -套用样式

5.3.1为底部静态文本添加样式.

5.3.2 在布局视图,选中静态文本元素,在属性视图中:套用样式:CSS_STATIC1, 指定上面我们所添加的样式名称,该样式将被套用.

5.3.3. 保存文件,执行预览,效果如下.



5.4.然后我们再为子页面(@ID_PAGE1) 上的静态文本添加指定样式,执行预览效果如下. 在这里我把最大化按钮去掉了,是在窗口样式中设置的.

5.5  为子页面1添加样式(@ID_PAGE1)

5.5.1. 添加背景图片资源:首先添加一张背景半透明图片资源,如下图所示,选中6自适应图片类型.

5.5.2 填入如下参数.

5.5.3.在样式视图中添加 套用样式(CSS_PAGE), 该样式后面被9个子页面套用.如下填入参数.

5.5.4 在布局视图,选中子页面元素(ID_PAGE1),指定上面的样式,套用样式:CSS_PAGE,保存文件,执行预览,主框架和第一个子页面已经完成.

6.第二个子页面布局

6.1 点击工具条上的新建按钮,如下图所示填入信息,创建子页面2布局文件(@ID_PAGE2).


6.2  为该布局文件(mainPage2)关联样式文件和资源文件.


6.3 修改子页面2属性,并在上面放3个按钮

6.4. 为子页面(@ID_PAGE2)及上面的按钮添加样式,并且在资源视图中定义它们的ID.

我们创建8个这样的子页面布局文件,因为该软件有9个TAB页,另外7个 布局文件,我们可以通过文件复制完成.


6.5.1通过执行 预览功能,可以看见(@ID_PAGE2)页面的效果,后面我们会讲子页面添加到主窗口上.


7.最终结果截图

7.1在代码中,添加TAB切换功能.


7.2 文件:


8.程序代码

8.1在程序中加载布局,样式和资源文件.

[cpp] view plain copy
  1. #define IDB_TAB1  101  
  2. #define IDB_TAB2  102  
  3. #define IDB_TAB3  103  
  4. #define IDB_TAB4  104  
  5. #define IDB_TAB5  105  
  6. #define IDB_TAB6  106  
  7. #define IDB_TAB7  107  
  8. #define IDB_TAB8  108  
  9. #define IDB_TAB9  109  
  10.   
  11. #define ID_PAGE1  3001  
  12. #define ID_PAGE2  3002  
  13. #define ID_PAGE3  3003  
  14. #define ID_PAGE4  3004  
  15. #define ID_PAGE5  3005  
  16. #define ID_PAGE6  3006  
  17. #define ID_PAGE7  3007  
  18. #define ID_PAGE8  3008  
  19. #define ID_PAGE9  3009  
  20.   
  21. HELE hCurSelTab=NULL;//当前选择的TAB  
  22.   
  23. bool CALLBACK OnMyEventTabClick(HELE hEle,HELE hEventEle)   
  24. {  
  25.         if(hEle!=hEventEle) return false;  
  26.   
  27.         if(hEle==hCurSelTab)  
  28.                 return false;  
  29.   
  30.         HELE hOldPage=(HELE)XEle_GetUserData(hCurSelTab);  
  31.         XEle_ShowEle(hOldPage,false);  
  32.         XBtn_SetCheck(hCurSelTab,false);  
  33.   
  34.         HELE hCurSelPage=(HELE)XEle_GetUserData(hEle);  
  35.         XEle_ShowEle(hCurSelPage,true);  
  36.         XBtn_SetCheck(hEle,true);  
  37.         hCurSelTab=hEle;  
  38.   
  39.         XWnd_ReDrawWnd(XEle_GetHWindow(hEle));  
  40.   
  41.         return false;  
  42. }  
  43.   
  44.   
  45. //测试XML布局页文件  
  46. int APIENTRY _tWinMain(HINSTANCE hInstance,  HINSTANCE hPrevInstance, LPTSTR lpCmdLine, int nCmdShow)  
  47. {  
  48.         XInitXCGUI(); //初始化界面库  
  49.   
  50.         HXMLRES  hRes=XXmlRes_Load(L"360\\mainFrame.res");        //加载资源  
  51.         if(NULL==hRes)  
  52.         {  
  53.                 MessageBox(NULL,L"加载资源失败",L"错误",0);  
  54.                 return 0;  
  55.         }  
  56.   
  57.         HWINDOW hWindow=XC_LoadXML_Window(L"360\\mainFrame.xml",hRes); //创建窗口  
  58.         if(NULL==hWindow)  
  59.         {  
  60.                 MessageBox(NULL,L"加载XML失败",L"错误",0);  
  61.                 return 0;  
  62.         }  
  63.   
  64.         //加载子页  
  65.         XC_LoadXML_Page(hWindow,L"360\\mainPage2.xml",hRes);  
  66.         XC_LoadXML_Page(hWindow,L"360\\mainPage3.xml",hRes);  
  67.         XC_LoadXML_Page(hWindow,L"360\\mainPage4.xml",hRes);  
  68.         XC_LoadXML_Page(hWindow,L"360\\mainPage5.xml",hRes);  
  69.         XC_LoadXML_Page(hWindow,L"360\\mainPage6.xml",hRes);  
  70.         XC_LoadXML_Page(hWindow,L"360\\mainPage7.xml",hRes);  
  71.         XC_LoadXML_Page(hWindow,L"360\\mainPage8.xml",hRes);  
  72.         XC_LoadXML_Page(hWindow,L"360\\mainPage9.xml",hRes);  
  73.   
  74.         if(false==XC_LoadXML_Style(hWindow,L"360\\mainFrame.css",hRes))        //加载样式文件  
  75.         {  
  76.                 MessageBox(NULL,L"加载样式失败",L"错误",0);  
  77.                 return 0;  
  78.         }  
  79.   
  80.         HELE hTab1=XWnd_GetEle(hWindow,IDB_TAB1);  
  81.         HELE hTab2=XWnd_GetEle(hWindow,IDB_TAB2);  
  82.         HELE hTab3=XWnd_GetEle(hWindow,IDB_TAB3);  
  83.         HELE hTab4=XWnd_GetEle(hWindow,IDB_TAB4);  
  84.         HELE hTab5=XWnd_GetEle(hWindow,IDB_TAB5);  
  85.         HELE hTab6=XWnd_GetEle(hWindow,IDB_TAB6);  
  86.         HELE hTab7=XWnd_GetEle(hWindow,IDB_TAB7);  
  87.         HELE hTab8=XWnd_GetEle(hWindow,IDB_TAB8);  
  88.         HELE hTab9=XWnd_GetEle(hWindow,IDB_TAB9);  
  89.   
  90.         HELE hPage1=XWnd_GetEle(hWindow,ID_PAGE1);  
  91.         HELE hPage2=XWnd_GetEle(hWindow,ID_PAGE2);  
  92.         HELE hPage3=XWnd_GetEle(hWindow,ID_PAGE3);  
  93.         HELE hPage4=XWnd_GetEle(hWindow,ID_PAGE4);  
  94.         HELE hPage5=XWnd_GetEle(hWindow,ID_PAGE5);  
  95.         HELE hPage6=XWnd_GetEle(hWindow,ID_PAGE6);  
  96.         HELE hPage7=XWnd_GetEle(hWindow,ID_PAGE7);  
  97.         HELE hPage8=XWnd_GetEle(hWindow,ID_PAGE8);  
  98.         HELE hPage9=XWnd_GetEle(hWindow,ID_PAGE9);  
  99.   
  100.         XEle_SetUserData(hTab1,(int)hPage1);  
  101.   
  102.         XEle_SetUserData(hTab2,(int)hPage2);  
  103.         XEle_ShowEle(hPage2,false);  
  104.   
  105.         XEle_SetUserData(hTab3,(int)hPage3);  
  106.         XEle_ShowEle(hPage3,false);  
  107.   
  108.         XEle_SetUserData(hTab4,(int)hPage4);  
  109.         XEle_ShowEle(hPage4,false);  
  110.   
  111.         XEle_SetUserData(hTab5,(int)hPage5);  
  112.         XEle_ShowEle(hPage5,false);  
  113.   
  114.         XEle_SetUserData(hTab6,(int)hPage6);  
  115.         XEle_ShowEle(hPage6,false);  
  116.   
  117.         XEle_SetUserData(hTab7,(int)hPage7);  
  118.         XEle_ShowEle(hPage7,false);  
  119.   
  120.         XEle_SetUserData(hTab8,(int)hPage8);  
  121.         XEle_ShowEle(hPage8,false);  
  122.   
  123.         XEle_SetUserData(hTab9,(int)hPage9);  
  124.         XEle_ShowEle(hPage9,false);  
  125.   
  126.         hCurSelTab=hTab1;  
  127.   
  128.         XEle_RegisterEvent(hTab1,XE_BNCLICK,OnMyEventTabClick);  
  129.         XEle_RegisterEvent(hTab2,XE_BNCLICK,OnMyEventTabClick);  
  130.         XEle_RegisterEvent(hTab3,XE_BNCLICK,OnMyEventTabClick);  
  131.         XEle_RegisterEvent(hTab4,XE_BNCLICK,OnMyEventTabClick);  
  132.         XEle_RegisterEvent(hTab5,XE_BNCLICK,OnMyEventTabClick);  
  133.         XEle_RegisterEvent(hTab6,XE_BNCLICK,OnMyEventTabClick);  
  134.         XEle_RegisterEvent(hTab7,XE_BNCLICK,OnMyEventTabClick);  
  135.         XEle_RegisterEvent(hTab8,XE_BNCLICK,OnMyEventTabClick);  
  136.         XEle_RegisterEvent(hTab9,XE_BNCLICK,OnMyEventTabClick);  
  137.   
  138.         XWnd_SetBorderStrokeOuterColor(hWindow,RGB(102,0,0),RGB(0,0,0));  
  139.         XWnd_ShowWindow(hWindow,SW_SHOW); //显示窗口  
  140.   
  141.         XXmlRes_Destroy(hRes); //不使用了销毁资源文件  
  142.   
  143.         XRunXCGUI(); //运行  
  144.   
  145.         return 0;  
  146. }  


下载源程序和可执行文件地址:http://bbs.xcgui.com/forum.php?mod=viewthread&tid=146&extra=page%3D1

brk1985
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
炫彩界面库UI设计器
03-17
  炫彩界面库提供了UI设计器,支持XML布局,CSS样式表,XML资源;该库采用C语言开发,速度更快,支持多种开发语言调用,例如C#,易语言; 不需要第三方库的支持,不需要MFC,ATL,和WINDOWS标准控件; 采用DirectUI设计思想,在窗口内无子窗口,窗口相当于容器,界面元素都是逻辑上的区域,没有句柄. 灵活易扩展,即支持C语言风格开发,同时也支持C++语言开发,用户可以对元素句柄进行包装扩展,支持用户自绘,支持各种格式图片.     更多链接： 官方网站： 炫彩界面库简介：http://www.okbase.net/doc/details/3559 炫彩界面
炫彩界面库 完整版 震撼登场
01-28
炫彩界面库 不仅包含示例代码，还包含ui设计器，仿qq 模仿360安全卫士 界面 全部代码 自适应图片工具 演示C++风格 演示C风格 演示C风格-IE浏览器等 不管你是c 还是c++，mfc 都可以让你的界面更加的美观，漂亮；
炫彩界面库UI设计器分享, 集成开发环境,C++,易语言
10-24 1919
炫彩在线帮助文档 炫彩UI截图 炫彩IDE UI设计器 截图 炫彩webUI 炫彩缓动 炫彩 易语言 火山PC例子截图 简介 炫彩界面库–软件界面开发框架,让用户快速开发桌面软件变的简单高效;功能丰富(一千多个API接口), 简单易用,轻量级,高度DIY自定义,一键换肤,满足不同软件UI需求,安全(所有界面元素无句柄),支持Windows平台所有编程语言, Unicode字符编码,完善的帮助文档及技术支持服务. UI设计器:快速开发工具,所见即所得,...
深入浅出CChart 每日一课——快乐高四第五十七课 新的起点，炫彩界面库之老树新芽
baita96的专栏
07-17 946
介绍了CChart在新版炫彩界面库中的调用方法。
scikit_learn-1.4.2-cp312-cp312-macosx_12_0_arm64.whl
07-05
该资源为scikit_learn-1.4.2-cp312-cp312-macosx_12_0_arm64.whl，欢迎下载使用哦！
scikit_learn-1.4.2-cp312-cp312-macosx_10_9_x86_64.whl
最新发布
07-05
该资源为scikit_learn-1.4.2-cp312-cp312-macosx_10_9_x86_64.whl，欢迎下载使用哦！
libssh2-devel-1.4.2-2.el6_7.1安装包.rar
02-17
yum install libssh2-devel的时候提示如下的信息,安装... libssh2-devel-1.4.2-2.el6_7.1.x86_64: failure: Packages/libssh2-devel-1.4.2-2.el6_7.1.x86_64.rpm from c6-media: [Errno 256] No more mirrors to try.
ppcip-mac-v1.4.2-pkg.zip
10-20
其中，“PPCIP-mac-v1.4.2-pkg.zip”是一款专为苹果Mac用户设计的PPT双流投屏软件，旨在提升会议演示的流畅性和互动性。然而，需要注意的是，该版本并不支持最新的BIG SUR操作系统。 “PPCIP”是宝利通PPT投屏工具...
ZeroTier One_v1.4.2-1.apk
02-11
The app should work on Android 4.0.3 or newer, though more recent versions are recommended. LineageOS may have issues and unfortunately we’re not able to duplicate or debug them.
炫彩界面库&列表插入图片&list-列表&数据适配器-易语言
06-11
1. 创建列表模板，因为没有模板默认只能插入三个列，而且也不能插入图片 2. 列名字可通过绑定文本来操作 3. 如果要插入图片，则需在模板-对应的项里插入形状图片，如要插入按钮等元素，也是如此
炫彩界面库 v1.5.1 设计器
08-05
炫彩界面库 v1.5.1 设计器
炫彩界面库(DirectUI,v1.0.8)
04-17
1.C++软件界面开发框架,基于Windows平台的Win32开发,不需要其他的库支持,从而缩小软件体积,提高效率,增强软件的兼容性. 2.采用DirectUI设计思想,在窗口内无子窗口,界面元素都是一个逻辑上的区域,以方便开发出炫彩高效的软件. 3.界面效果出众,解决了传统UI子窗口抖动,闪烁,效率低,代码臃肿等问题,让您的软件一跃而出. 4.基于炫彩界面库框架,可以扩展出更强大的功能,以便实现复杂的应用需求. 5.炫彩界面库为您提供了皮肤模块,让您很容易扩展出多套个性皮肤,彰显个性,与众不同. 6.炫彩界面库会不断升级,为您提供更加稳定坚固的界面框架,让您的软件坚如磐石. 7.炫彩界面库帮助文档,为你提供最新的界面库开发文档,帮你解决开发问题! 8.炫彩,稳定,兼容,精小,高效,易扩展,换肤,简单; 炫彩界面库,您值得拥有!
(1)炫彩界面库系列教程之360杀毒,代码实现
06-10 9093
(1)炫彩界面库系列教程之360杀毒,代码实现
Duilib界面解析1---简单的仿360窗口
weixin_33875564的博客
10-15 532
最近开始研究Duilib,并逐个分析Duilib的demo例子,记录下来方便更多的人学习 。界面运行起来如下图所示,该Demo主要包含 BaseDialog.h和BaseDialog.cpp,以及界面布局文件的详细解释,每行注释已经添加。 BaseDialog头文件源文件 以及布局文件如下,可自行下载Duilib 根据注释学习该例子 只针对新手~~~ ...
UI库(一)【360安全卫士】
极客神殿
12-29 2439
FrmMain.cs public partial class FrmMain : CCSkinMain { public FrmMain() { InitializeComponent(); } }FrmMain.Designer.cspartial class FrmMain { /
炫彩界面库源码分析---简单的应用程序过程分析
weixin_30597269的博客
06-15 267
炫彩界面库免费开源后，可以方便使用。它的原理是DirectUI，直接绘制控件并做出相关响应，下面来一一分析。 一个简单的应用程序过程分析: 源码如下 int WINAPI _tWinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPTSTR lpCmdLine, int nCmdShow) { ...
(2)炫彩界面库系列教程之360杀毒,XML实现
06-10 7569
(2)炫彩界面库系列教程之360杀毒,XML实现
高德地图API开发指南_V1.4.2
"高德地图开发文档_V1.4.2是高德软件有限公司为开发者提供的官方指南，适用于使用高德地图API V1.4.2的项目。文档包含了地图API的基础知识、环境配置、注意事项、工程新建方法、定位信息获取、地图图层管理以及地图...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值