开源框架LibUIDK之仿鲁大师

骑着蜗牛游地球

       本文主要借助开源框架LibUIDK仿制鲁大师的界面，主要是熟练开源库及做个小笔记，没啥技术含量，大牛勿喷！

       LibUIDK是基于C++和MFC框架下的一个非常不错的开源库，方便简单。开源库下载地址为：https://github.com/iUIShop/LibUIDK

下载后，解压目录结构文件如下：

                                                                  

       Help目录做标记，是由于其内部有两个非常重要的文档，可以完全借助此文档开发出任何主流的软件界面。

       大概介绍了一下开源库，那么下面开始基本的操作和界面仿制，步骤如下：

       1.使用合适的编译器打开工程，最新的库支持VS2010和2017，此处使用VS2010打开UIShop目录下的工程文件，编译运行后，出现界面制作工具界面：

                                                                                                                      

       点击途中的红框部分的菜单功能，选择下图红框部分：

                                                               

       弹出创建工程界面，按如下图中选择配置，便可开始绘制界面：

                                                               

       点击确定后，界面如下：

                                                               

       删除绘制窗口中默认生成的控件，通过鼠标拖动修改窗口大小围殴800*600（在窗口的最下会显示当前窗口顶点位置和高宽）如下图：

                                                               

       2.设置好大小后，为窗口设置背景色，操作步骤如下图

                                                               

       点击红框的菜单部分，然后新添加一个颜色，选中后，在右边属性的操作如下图标及注释：

                                                               

       此处现在为蓝色。选中窗口，选择窗口背景颜色ID为刚创建的颜色ID设置完成后，同时到创建工程时的文件目录下，删除里面的背景图片，拷进咱们的背景图片，然后运行，操作如下

                                                               

                                                               

                                                               

                                                               

PS:由于图片资源未弄全，所以创建的主窗口存在瑕疵，但是操作步骤无任何问题。

       3.创建选择的TAB。由于此库未重绘TAB控件，所以只能借助单选控件来模拟此操作。操作如下：

                                                               

       给此控件添加背景图，和选中状态，由于初始没显示，所以Normal Image不是在背景图片：

                                                              

       添加完成后，你发现控件大小和图片大小不匹配，这里有给小技巧，就是设置Normal Image属性为所需改变的大小的图片，然后点击如图的按钮，即可将控制自动换成图片的大小：

                                                            

      以同样的方式添加第二给控件，同时可以借助如下两个按钮调整控件位置和对其：

                                                            

       4.添加好控件后，就是给控件添加各个共能的图片和文字了，操作如下:

                                                           

       设置好控件后，就是设置文字了，设置如下：

                                                         

                                                         

由于字体需要是白色，所以使用上面的添加颜色的方法，增加一个白色，然后选中，如下图：

                                                         

同理，可以做出另一个图标,同时改变标题

                                                         

其他按钮的操作类似，在此就不重复处理。

       5.做好了主界面，下面就是子窗口了。给每个控件做一个窗口，通过点击关联隐藏和显示来切换对应功能。操作如下,创建两个窗口对应游戏和温度

                                                        

                                                        

       在这里为了避免重复的工作，所以就不一一将界面仿制出来，用特别的标识，表示区分两个窗口：

                                                        

                                                        

       6.创建好窗口后，可以给没窗口创建对应的类，操作如下：

                                                      

       选好路径，即可生成对应的文件：

                                                      

                                                     

7.创建完成后，就可以开始写代码了，打开工程，将新文件添加到工程中，然后书写代码，，如下：

·      在MainWndHandler.cpp中添加头文件

              #include "LDSGameData.h"

#include "LDSTemData.h"

添加IUI_ON_COMMAND_RANGE事件响应单选框的仿TAB事件：

IUI_ON_COMMAND_RANGE(IDC_RAD_1, IDC_RAD_2,&CMainWndHandler::OnTabClieck)

然后在OnTabClieck下书写如下代码：

        CWnd *pWndTem= pUIWnd->GetDlgItem(IDW_WINDOW_TEM);

        CWnd *pWndGame = pUIWnd->GetDlgItem(IDW_WINDOW_GAME);

        RECT tmpRect ={0};

        tmpRect.bottom= 600;

        tmpRect.right=  800;

        if(IDC_RAD_1 == wParam)

        {

            pWndGame->ShowWindow(TRUE);

            pWndTem->ShowWindow(FALSE);

        }

        else if(IDC_RAD_2 == wParam)

        {

            pWndGame->ShowWindow(FALSE );

            pWndTem->ShowWindow(TRUE);

        }

编译运行，结果如下：

                                                

8.界面做的有点丑，但是另外两个窗口原理如主窗口，操作相同。

resingcsq

学习了，谢谢分享