飘云阁(PYG官方)

 找回密码
 快速注册

QQ登录

只需一步,快速开始

查看: 72|回复: 0

[C/C++] 开源框架LibUIDK之仿鲁大师

[复制链接]
  • TA的每日心情
    开心
    2020-5-22 19:16
  • 签到天数: 13 天

    [LV.3]偶尔看看II

    发表于 2020-5-10 17:59:25 | 显示全部楼层 |阅读模式
    本帖最后由 骑着蜗牛游地球 于 2020-5-10 18:27 编辑


           本文主要借助开源框架LibUIDK仿制鲁大师的界面,主要是熟练开源库及做个小笔记,没啥技术含量,大牛勿喷!
           LibUIDK是基于C++和MFC框架下的一个非常不错的开源库,方便简单。开源库下载地址为:https://github.com/iUIShop/LibUIDK
    下载后,解压目录结构文件如下:
                                                                       1.png

           Help目录做标记,是由于其内部有两个非常重要的文档,可以完全借助此文档开发出任何主流的软件界面。
           大概介绍了一下开源库,那么下面开始基本的操作和界面仿制,步骤如下:
           1.使用合适的编译器打开工程,最新的库支持VS2010和2017,此处使用VS2010打开UIShop目录下的工程文件,编译运行后,出现界面制作工具界面:
                                                                    2.png                                                       
           点击途中的红框部分的菜单功能,选择下图红框部分:

                                                                    4.png
           弹出创建工程界面,按如下图中选择配置,便可开始绘制界面:
                                                                    4.1.png

           点击确定后,界面如下:

                                                                    5.png
           删除绘制窗口中默认生成的控件,通过鼠标拖动修改窗口大小围殴800*600(在窗口的最下会显示当前窗口顶点位置和高宽)如下图:
                                                                    6.png

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

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

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




    PS:由于图片资源未弄全,所以创建的主窗口存在瑕疵,但是操作步骤无任何问题。
           3.创建选择的TAB。由于此库未重绘TAB控件,所以只能借助单选控件来模拟此操作。操作如下:
                                                                    13.png

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

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

          以同样的方式添加第二给控件,同时可以借助如下两个按钮调整控件位置和对其:
                                                                 16.png
           4.添加好控件后,就是给控件添加各个共能的图片和文字了,操作如下:
                                                                17.png

           设置好控件后,就是设置文字了,设置如下:
                                                              18.png
                                                              19.png


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

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

    其他按钮的操作类似,在此就不重复处理。
           5.做好了主界面,下面就是子窗口了。给每个控件做一个窗口,通过点击关联隐藏和显示来切换对应功能。操作如下,创建两个窗口对应游戏和温度
                                                             22.png
                                                             23.png

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


           6.创建好窗口后,可以给没窗口创建对应的类,操作如下:
                                                           26.png

           选好路径,即可生成对应的文件:
                                                           27.png
                                                          28.png


    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);
            }
    编译运行,结果如下:
                                                     29.png

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




    ludashi.014.zip

    100.47 KB, 下载次数: 0, 下载积分: 飘云币 -2 枚

    ludashi.013.zip

    293.97 KB, 下载次数: 0, 下载积分: 飘云币 -2 枚

    ludashi.012.zip

    293.97 KB, 下载次数: 0, 下载积分: 飘云币 -2 枚

    ludashi.011.zip

    293.97 KB, 下载次数: 0, 下载积分: 飘云币 -2 枚

    ludashi.010.zip

    293.97 KB, 下载次数: 0, 下载积分: 飘云币 -2 枚

    ludashi.009.zip

    293.97 KB, 下载次数: 0, 下载积分: 飘云币 -2 枚

    ludashi.008.zip

    293.97 KB, 下载次数: 0, 下载积分: 飘云币 -2 枚

    ludashi.007.zip

    293.97 KB, 下载次数: 0, 下载积分: 飘云币 -2 枚

    ludashi.006.zip

    293.97 KB, 下载次数: 0, 下载积分: 飘云币 -2 枚

    ludashi.005.zip

    293.97 KB, 下载次数: 0, 下载积分: 飘云币 -2 枚

    ludashi.004.zip

    293.97 KB, 下载次数: 0, 下载积分: 飘云币 -2 枚

    ludashi.003.zip

    293.97 KB, 下载次数: 0, 下载积分: 飘云币 -2 枚

    ludashi.002.zip

    293.97 KB, 下载次数: 0, 下载积分: 飘云币 -2 枚

    ludashi.001.zip

    293.97 KB, 下载次数: 0, 下载积分: 飘云币 -2 枚

    您需要登录后才可以回帖 登录 | 快速注册

    本版积分规则

    关闭

    站长推荐上一条 /1 下一条

    小黑屋|手机版|Archiver|飘云阁安全论坛 ( 粤ICP备15107817号-2 )|扫码赞助

    Powered by Discuz! X3.3© 2001-2017 Comsenz Inc.

      
    快速回复 返回顶部 返回列表