使用clayui制作界面的整套工程流程

今天介绍一下利用clayui制作界面的工作流程，包含以下内容：

1. 使用clayui编辑系统制作一个简单的界面，

2. 添加鼠标消息响应，并制作对应的互动动画效果

3. 输出界面文件，皮肤文件，布局文件

4. 建立一个MFC的对话框工程，使用clayui开发库里提供的函数导入界面文件，皮肤与布局，并将界面显示在MFC的对话框里

5. 添加消息响应函数，对各种界面消息进行处理

先看一下最终效果：

要下载工程的话，请加入QQ交流群：174738354，群共享里有工程代码以及资源，文档。

下面开始一步一步进行讲解，上一篇已经介绍过的操作这里就只简单说下要点：

1. 首先，打开clayui界面设计器，点皮肤库标签，打开皮肤文件：皮肤.cncskin；点布局库标签，打开布局文件：布局001.cnclayoutedit

2. 点击添加，添加一个窗体，取名为：testwin，

然后选中刚创建的testwin，点击控件标签，再点击勾选框，为testwin添加一个子窗体，

选中勾选框，在左侧的属性栏里将标识修改为：back，

将属性栏往下拉，找到“是否使用布局”，勾上，然后将布局名选为“flexwin"，

此时，back有了一个”flexwin"的布局，现在可以在窗体设计区，调整back的高宽，使back与testwin完全重合，如下图：

确保back是选中的情况下，可以在属性栏的最下面，修改“文字”以及“水平对齐”属性，来调整标题文字。

在属性栏里找到“对齐方式”属性，将对齐方式修改为“中心对齐”，然后将“冻结”打勾，此时，back将不能被选中，只能选中testwin，而当你调整"testwin"的大小时，会发现back的尺寸会随着"testwin"的改变而改变，这就是“中心对齐”的效果。其他的对齐效果，大家可以自己操作体会一下。效果如下图：

3. 点击控件标签，选中testwin，添加2个文本，

1个下拉框，修改标识为“年龄”

1个编辑框，修改标识为“姓名”

2个勾选框，分别修改标识为“确定”，“取消”，排列如下：

编辑框的布局选择editbox，下拉框的布局选择combox，勾选框布局选择check1

选中文本后，可以直接键盘输入文字，

为了让文字的效果更好，可以给文字添加阴影：先选中文本，在左侧的属性栏里找到滤镜，选择“阴影”，目前只有阴影这一个滤镜，半径设为4，最大为5，x，y偏移设为4，刚开始阴影是透明的，需要点一下颜色，出现颜色修改滚动条，调节a，也就是透明度，为125%，颜色参数可以依照自己的喜好设置，如下图：

另外利用阴影滤镜还可以达到文字描边的效果，如下图：

4. 现在为界面添加一个互动动画效果，选中testwin，或者testwin的任何一个子窗口，然后点击动画层标签，可以看到动画层里只有有一个INIT，并且处于选中状态，

这里说明一下，在clayui里，动画都需要有一个消息来触发，而每个窗体创建时，都会自动生成一个动画层，也就是INIT，意思就是初始化完毕后会触发的动画，在第一篇教程里，我们的动画都是创建在初始化的动画层里，所以测试的时候，窗体创建完毕就会立即播放动画。

好的，那么，现在我们为确定按钮添加一个鼠标滑进，鼠标滑出的动画，

首先还是确保testwin以及其任何一个子窗体处于选中状态，然后在动画层标签里，选择“触发消息”为：onmousein，“消息类型”为：子FRAME消息，参数不填，“目标窗体”选为：确定，然后点“增加”，此时可以看到动画层里增加了一栏：onmousein%确定，同样为“确定”按钮添加一个onmouseout消息，如下图：

动画层其实也可以看做是一个关键桢，现在可以点击刚创建的动画层，会发现窗体编辑区里发生了变化：窗体编辑区里除了testwin之外，其他子窗体都没有了，这是因为我们只是创建一个“空白关键桢”而已。

好的，现在我们来构思下动画：当鼠标滑入”确定“按钮时，让按钮有一个放大的动画效果，而当鼠标滑出时，让按钮有一个缩小的动画效果。

还是点击动画层里的INIT，切换回INIT层，在窗体编辑区里选中”确定“按钮，在”添加到动画层“下边的下拉框里选择onmousein%确定，然后点击”添加到动画层“，再在下拉框里选择 onmouseout%确定，然后点击”添加到动画层“，现在，点击动画层列表里的onmousein%确定，onmouseout%确定，会发现窗体编辑区的testwin里出现了确定按钮，如下图：

现在动画层里选中 onmousein%确定 ，然后在窗体编辑区里选中“确定”按钮，按住shift 拖出一个动画对象，选中动画对象，在属性栏里将x缩放系数，y缩放系数修改为1.2，1.2，持续时间改为2000，缩放缓动方式改为弹性，并将忽略位移，忽略旋转，忽略颜色打上勾，如下图：

现在点一下测试看一下，将鼠标移动到“确定”按钮上，“确定”按钮会有一个弹性的放大动画，这样，界面就有了那么一点交互的感觉了。

下面再加上鼠标滑出的动画，在动画层里选中 onmouseout%确定，然后在窗体编辑区里选中“确定”按钮，按住shift 拖出一个动画对象，选中动画对象，在属性栏里将x缩放系数，y缩放系数修改为1，1，持续时间改为2000，缩放缓动方式改为弹性，并将忽略位移，忽略旋转，忽略颜色打上勾

现在可以再点测试，将鼠标移动到“确定”按钮上，然后再移出，“确定”按钮会有一个放大缩小的交互动画效果，界面变得更加动感了。

此时可以保存下testwin窗体，保存的时候会出现一个选择框，选择要保存的窗体，由于现在只有testwin一个窗体，直接点OK，然后点保存就可以了，如下图：

按照相同的方式，可以为取消也添加一个这样的动画效果。

下面再实现一个点击“确定”后的动画效果：点击确定后，窗体上的控件都以动画方式分散开，并且渐渐变得透明。

先选中testwin，然后将动画层里的 “触发消息“ 选为LCLICK（左键点击消息），”消息类型“选为”子FRAME消息“，”目标窗体“选为 确定 ，点”增加“，动画层会增加一个 LCLICK%确定 的动画层，

选中动画层里的INIT，切换到INIT层，然后在窗体编辑区选中”姓名“，将”添加到动画层“下的下拉框选为”LCLICK%确定“，然后点”添加到动画层“，将”姓名“添加到 LCLICK%确定 这个动画层，依次将”年龄“，编辑框，下拉框，确定，取消，都添加到 LCLICK%确定 动画层，然后分别为子窗体添加动画对象，将动画对象的alpha值修改0%，并修改等待时间为别为：0，100，200，300，400，500，按照以下方式排列，如下图：

现在可以点测试，点确定按钮，如果参数无误的话，将会看到所有控件依次向左飞出，并渐渐消失。

5. 将做好的窗体，皮肤，布局输出成clayui可以读取的资源文件

点输出，然后选择testwin，OK后填写文件名与后缀，这里对文件名与后缀没有硬性规定，可以随便写，我这里就输出成testwin.ci文件，如下图：

输出皮肤文件：点皮肤库标签，点”导出皮肤“，保存文件名填写fui1.cncskinex，如下图：

输出布局文件：点布局库标签，点”导出布局库“，保存成 fui1.cnclayout，如下图：

操作无误的话，最后会得到testwin.ci，fui1.cncskinex，fui1.cnclayout，这三个文件

下面介绍如何在VC里使用clayui导入界面，并显示：

1. 新建一个MFC对话框工程，工程名为：Clayui_demo1，在工程里加入clayui的include和lib路径，将clayui_ext文件夹复制到工程目录，并将clayui_ext目录下的所有文件添加到工程里

clayui_ext下的类和函数是一些辅助类与函数，帮助你快速创建初始化clayui，以及减少一些代码量

为工程添加RTTI支持，并选择Debug MultiThreaded DLL（debug模式），或者MultiThreaded DLL（ Release模式），如下图：

在stdafx里加上：#include "clayui_ext/config_clayui.h"

LINK里添加：clayui_D.lib imm32.lib

2. 在CClayui_demo1Dlg里添加如下变量：

CClayuiManager负责clayui的初始化，以及销毁

CClayuiRootWin负责管理clayui的窗口，绘图区，消息循环

3. 在CClayui_demo1Dlg::OnInitDialog()里添加如下代码：

这里可以看到，m_clayuimgr载入了皮肤，布局文件，接在路径名后面的参数是皮肤和布局的名称，名称可以在编辑器里看到，如下图：

m_rootwin里设置了绘图区的大小，为800，600，后面的islayeredwindow如果设为1，会将当前的MFC窗口变成一个layeredwindow，效果会更好

注意：设成layeredwindow时，需要将MFC的对话框的Border设为NONE，如下图：

后面的看代码就很明白了，先创建一个clayui的窗口，然后载入我们刚做好的testwin.ci界面文件，然后将窗口指针传给m_rootwin.

CTestWin是一个派生自CLAYUI_BFRAME的自定义类。

4. 为CClayui_demo1Dlg添加一个WM_TIMER消息处理函数，并重载PreTranslateMessage(MSG* pMsg) ，代码如下：

voidCClayui_demo1Dlg::OnTimer(UINTnIDEvent)
{
//TODO:Addyourmessagehandlercodehereand/orcalldefault
m_rootwin.Step(GetSafeHwnd());
CDialog::OnTimer(nIDEvent);
}

BOOLCClayui_demo1Dlg::PreTranslateMessage(MSG*pMsg)
{
//TODO:Addyourspecializedcodehereand/orcallthebaseclass
m_rootwin.HandleMessage(this,pMsg->message,pMsg->lParam,pMsg->wParam);
returnCDialog::PreTranslateMessage(pMsg);
}

这时候可以点f5来运行一下程序，别忘记将clayui_d.dll，clayui.dll，testwin.ci，fui1.cnclayout，fui1.cncskinex与执行程序放到一个目录，如果没有意外的话，将会出现刚才做好的界面，将鼠标移动到“确定”按钮上试试，并点击“确定”按钮试试，是不是有动感效果呢？

5. 添加消息处理函数，clayui的消息处理函数与MFC类似，在MFC里是重载PreTranslateMessage函数，那么在clayui里则是重载UserAction(CLAYUI_MSGINFO *msginfo, int x, int y, DWORD msg)函数

好的，那么前面是从CLAYUI_BFRAME派生了一个CTestWin，并作为了主窗口，所以为CTestWin添加一个UserAction(CLAYUI_MSGINFO *msginfo, int x, int y, DWORD msg)函数，如下

voidCTestWin::UserAction(CLAYUI_MSGINFO*msginfo,intx,inty,DWORDmsg)
{
if(msg==CLAYUI_LCLICK)
{
CLAYUI_FRAME*frame=msginfo->GetFrame(this);
if(FrameNamecmp(frame,"取消"))
{
CClayui_demo1Dlg*dlg=(CClayui_demo1Dlg*)AfxGetApp()->m_pMainWnd;
dlg->m_rootwin.m_isquit=TRUE;
PostQuitMessage(0);
}
}
}

代码很简单，可以看出是响应了LCLICK消息，

CLAYUI_FRAME* frame = msginfo->GetFrame(this); 这句是得到消息的来源窗口，然后利用窗口的标识来判断是哪个子窗口发来的消息，这里判断是否是“取消”按钮发送的消息，如果是，就结束整个程序。

然后，我们用代码来为testwin加上一个初始动画，演示下使用代码来创建动画效果。先为CTestWin重载LoadFromMem(BYTE *filebuffer, DWORD filesize, BOOL isMemMgr)函数，如下：

voidCTestWin::LoadFromMem(BYTE*filebuffer,DWORDfilesize,BOOLisMemMgr)
{
CLAYUI_BFRAME::LoadFromMem(filebuffer,filesize,isMemMgr);

AlphaTo(0);
ScaleTo(0,0,1);

SetScaleAnimation("twscale",this,1000,0,1,1,this,0);
SetAlphaAnimation("twalpha",this,1000,0,100,this,0);
}

当CTestWin加载完布局后，会调用LoadFromMem函数

在LoadFromMem函数里，先将窗口的透明值设为0，x，y缩放系数设为0，然后为CTestWin添加缩放动画与alpha动画，让CTestWin有一个渐显，放大的动态效果。

在config_clayui.h里还有其他的SetXXXAnimation系列的函数，这里说明一下里面的参数：

CLAYUI_BFRAME* parent：这个是指动画对象创建以后，会放到哪个窗口里管理，如果parent被销毁了，动画对象也会被销毁。

CLAYUI_FRAME* target：目标窗口，这里注意一下，parent和target可以是2个毫不相干的窗口，parent只是管理动画，而目标窗口是发生动画的窗口。

short isdie：动画播放完毕后，是否销毁目标窗口

short isendmsg：动画播放完毕后，是否发送一个动画播放完毕的消息CLAYUIMSG_ANIMATIONEND给target的父窗口，这里再说明下，target的父窗口是target->GetParent()，与传给动画的parent参数没有任何关系。

short loopmode：动画的循环方式：0-只播放一次，1-循环，2-定格在最后一桢

好的，这次就讲解到这里了，下次会继续介绍clayui的各种功能。

转自：http://blog.csdn.net/clayui/article/details/6949511