炫彩界面库-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在程序中加载布局,样式和资源文件.
#define IDB_TAB1 101
#define IDB_TAB2 102
#define IDB_TAB3 103
#define IDB_TAB4 104
#define IDB_TAB5 105
#define IDB_TAB6 106
#define IDB_TAB7 107
#define IDB_TAB8 108
#define IDB_TAB9 109
#define ID_PAGE1 3001
#define ID_PAGE2 3002
#define ID_PAGE3 3003
#define ID_PAGE4 3004
#define ID_PAGE5 3005
#define ID_PAGE6 3006
#define ID_PAGE7 3007
#define ID_PAGE8 3008
#define ID_PAGE9 3009
HELE hCurSelTab=NULL;//当前选择的TAB
bool CALLBACK OnMyEventTabClick(HELE hEle,HELE hEventEle)
{
if(hEle!=hEventEle) return false;
if(hEle==hCurSelTab)
return false;
HELE hOldPage=(HELE)XEle_GetUserData(hCurSelTab);
XEle_ShowEle(hOldPage,false);
XBtn_SetCheck(hCurSelTab,false);
HELE hCurSelPage=(HELE)XEle_GetUserData(hEle);
XEle_ShowEle(hCurSelPage,true);
XBtn_SetCheck(hEle,true);
hCurSelTab=hEle;
XWnd_ReDrawWnd(XEle_GetHWindow(hEle));
return false;
}
//测试XML布局页文件
int APIENTRY _tWinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPTSTR lpCmdLine, int nCmdShow)
{
XInitXCGUI(); //初始化界面库
HXMLRES hRes=XXmlRes_Load(L"360\\mainFrame.res"); //加载资源
if(NULL==hRes)
{
MessageBox(NULL,L"加载资源失败",L"错误",0);
return 0;
}
HWINDOW hWindow=XC_LoadXML_Window(L"360\\mainFrame.xml",hRes); //创建窗口
if(NULL==hWindow)
{
MessageBox(NULL,L"加载XML失败",L"错误",0);
return 0;
}
//加载子页
XC_LoadXML_Page(hWindow,L"360\\mainPage2.xml",hRes);
XC_LoadXML_Page(hWindow,L"360\\mainPage3.xml",hRes);
XC_LoadXML_Page(hWindow,L"360\\mainPage4.xml",hRes);
XC_LoadXML_Page(hWindow,L"360\\mainPage5.xml",hRes);
XC_LoadXML_Page(hWindow,L"360\\mainPage6.xml",hRes);
XC_LoadXML_Page(hWindow,L"360\\mainPage7.xml",hRes);
XC_LoadXML_Page(hWindow,L"360\\mainPage8.xml",hRes);
XC_LoadXML_Page(hWindow,L"360\\mainPage9.xml",hRes);
if(false==XC_LoadXML_Style(hWindow,L"360\\mainFrame.css",hRes)) //加载样式文件
{
MessageBox(NULL,L"加载样式失败",L"错误",0);
return 0;
}
HELE hTab1=XWnd_GetEle(hWindow,IDB_TAB1);
HELE hTab2=XWnd_GetEle(hWindow,IDB_TAB2);
HELE hTab3=XWnd_GetEle(hWindow,IDB_TAB3);
HELE hTab4=XWnd_GetEle(hWindow,IDB_TAB4);
HELE hTab5=XWnd_GetEle(hWindow,IDB_TAB5);
HELE hTab6=XWnd_GetEle(hWindow,IDB_TAB6);
HELE hTab7=XWnd_GetEle(hWindow,IDB_TAB7);
HELE hTab8=XWnd_GetEle(hWindow,IDB_TAB8);
HELE hTab9=XWnd_GetEle(hWindow,IDB_TAB9);
HELE hPage1=XWnd_GetEle(hWindow,ID_PAGE1);
HELE hPage2=XWnd_GetEle(hWindow,ID_PAGE2);
HELE hPage3=XWnd_GetEle(hWindow,ID_PAGE3);
HELE hPage4=XWnd_GetEle(hWindow,ID_PAGE4);
HELE hPage5=XWnd_GetEle(hWindow,ID_PAGE5);
HELE hPage6=XWnd_GetEle(hWindow,ID_PAGE6);
HELE hPage7=XWnd_GetEle(hWindow,ID_PAGE7);
HELE hPage8=XWnd_GetEle(hWindow,ID_PAGE8);
HELE hPage9=XWnd_GetEle(hWindow,ID_PAGE9);
XEle_SetUserData(hTab1,(int)hPage1);
XEle_SetUserData(hTab2,(int)hPage2);
XEle_ShowEle(hPage2,false);
XEle_SetUserData(hTab3,(int)hPage3);
XEle_ShowEle(hPage3,false);
XEle_SetUserData(hTab4,(int)hPage4);
XEle_ShowEle(hPage4,false);
XEle_SetUserData(hTab5,(int)hPage5);
XEle_ShowEle(hPage5,false);
XEle_SetUserData(hTab6,(int)hPage6);
XEle_ShowEle(hPage6,false);
XEle_SetUserData(hTab7,(int)hPage7);
XEle_ShowEle(hPage7,false);
XEle_SetUserData(hTab8,(int)hPage8);
XEle_ShowEle(hPage8,false);
XEle_SetUserData(hTab9,(int)hPage9);
XEle_ShowEle(hPage9,false);
hCurSelTab=hTab1;
XEle_RegisterEvent(hTab1,XE_BNCLICK,OnMyEventTabClick);
XEle_RegisterEvent(hTab2,XE_BNCLICK,OnMyEventTabClick);
XEle_RegisterEvent(hTab3,XE_BNCLICK,OnMyEventTabClick);
XEle_RegisterEvent(hTab4,XE_BNCLICK,OnMyEventTabClick);
XEle_RegisterEvent(hTab5,XE_BNCLICK,OnMyEventTabClick);
XEle_RegisterEvent(hTab6,XE_BNCLICK,OnMyEventTabClick);
XEle_RegisterEvent(hTab7,XE_BNCLICK,OnMyEventTabClick);
XEle_RegisterEvent(hTab8,XE_BNCLICK,OnMyEventTabClick);
XEle_RegisterEvent(hTab9,XE_BNCLICK,OnMyEventTabClick);
XWnd_SetBorderStrokeOuterColor(hWindow,RGB(102,0,0),RGB(0,0,0));
XWnd_ShowWindow(hWindow,SW_SHOW); //显示窗口
XXmlRes_Destroy(hRes); //不使用了销毁资源文件
XRunXCGUI(); //运行
return 0;
}
下载源程序和可执行文件地址:http://bbs.xcgui.com/forum.php?mod=viewthread&tid=146&extra=page%3D1