类似QQ可收缩界面在工程中的应用

宋勇强

(山西大众电子信息产业集团有限公司，山西 太原 030024)

随着软件技术的蓬勃发展，用户对软件产品的要求越来越高，不仅要求有完善的功能，而且对人机交互也提出了更加严格的要求，软件要有易操作性，界面美观大方，在我们平时使用的软件中，QQ的抽屉式菜单给大家留下了深刻的印象，可以任意显示隐藏界面，自由切换，不用时可以收缩悬挂，用时按照实际需求展开相应对话框。虽然网上有很多例子和控件，但是要不就是不开源，修改困难，要不就是不够灵活，无法满足我们实际要求，为了真正实现此功能，我以Microsoft Visual C++6.0作为编译环境，用自定义基类扩展结合BCG的方式实现了QQ抽屉式功能，下面以一个设备管理部分程序为例进行叙述。

1 概述

本软件主要功能为自由显示多设备关键信息，共包含6个设备，每个设备信息可以自由展开收缩，当设备对话框展开时，标题框显示为“▲”，显示设备信息，当设备框收缩时，标题框显示为“▼”，设备信息隐藏。程序采取面向对象方式，编码由CheadDlg(单个抽屉基类)，CdialogAI(多个抽屉组合形成的类)，以及若干个对话框类(不同设备的关键信息)组成。显示效果调用了界面集成类BCG，使界面更加美观大方，形成最终效果如图1所示。

图1 软件界面效果图

软件内部的类调用关系如图2所示。

图2 程序内部类调用关系图

软件需要先安装BCG,版本V22.1，这里有几个重点设置，首先要编译安装好的BCG项目，生成VC下需要的库文件和lib文件，然后程序里要包含BCG的头文件"BCGCBProInc.h"，设置程序包含库文件路径指向BCG的头文件，路径为C:Program FilesBCGSoftBCGControlBarProBCGCBPro，设置程序lib路径为C:Program FilesBCGSoftBCGControlBarProBin，这样才能正常调用BCG资源。

2 主要实现类的设计

2.1 子类CHeadDlg的设计

CHeadDlg类主要负责显示某一个设备的信息，包括设备标签按钮以及关键信息显示对话框，标签按钮关联一个按钮控件，点击按钮时激发关键信息的展开和收缩功能，设备信息对话框的参数设置如图3所示。

图3 设备信息对话框

其中Style的风格必须设置为Child，即子对话框。CHeadDlg类的编码实现如图4所示。

图4 CHeadDlg类图

CHeadDlg类中应用了BCG界面效果，设置风格为黑色系，设备标签为白色渐变背景，黑色字体。设置设备信息为黑色背景，字体显示为黄色，这样能让显示更加立体，对比强烈。设备信息对话框大小根据实际显示内容多少调整。保持标签框和信息对话框宽度一致。

2.2 类CDialogAI的设计

CDialogAI类是通过定义多个关联信息对话框的CHeadDlg类对象，将多个设备信息整合在一起显示，实现任意子对话框的展开/收缩显示，多个设备信息对话框整合在一起后可以整体移动，可以关闭整个信息显示对话框。CDialogAI类的类结构如图5所示。

CDialogAI类定义了6个(根据实际情况可以更改个数)CHeadDlg类对象并将类对象和相应设备信息对话框进行关联，能够设置对象标签显示内容，界面选用BCG效果，能够设置子对话框的大小。能够设置如果子对话框内容太长，是否显示滚动条。

图5 CDialogAI类图

2.3 信息显示子类的设计

设备信息对话框显示设备基础信息，可以包含对设备信息的显示以及按钮控制，根据实际情况进行定制。

设备信息对话框子类结构如图6所示。

图6 CHeadDlg类对象

3 类之间的通讯和调用

CDialogA类中定义CHeadDlg对象，CHeadDlg调用类函数实现设置子对话框大小，子对话框标题，子对话框显示风格，并且把CHeadDlg对象都加入队列，在CHeadDlg中定义BCG风格的对话框对象，在建立CHeadDlg时把其内容区和BCG对话框进行关联。

4 常见问题及解决方案

4.1 调整某一个设备界面时如何让界面显示不乱

当其中一个界面进行拉伸操作时，界面会因为内容变化引起显示混乱，所以对界面发生变化的对话框尺寸处理非常重要，一般来说，通过宏定义对设备子对话框的标题的宽度和高度进行设置，例如#define HEAD_WIDTH 305 #define HEAD_HEIGHT 30，在CHeadDlg中的WM_SIZE消息进行处理(对话框发生改变时自动触发)，当界面大小发生变化时，调整新窗口大小，新窗口左上角坐标为(0，HEAD_HEIGHT)，界面宽度为调整后界面宽度，界面高度为调整后界面y坐标减去HEAD_HEIGHT，这样的话界面就可以任意调整宽度高度。

4.2 防止点击按键导致屏幕刷新出错

运行程序时会发现如果无意按了回车或ESC键，设备显示界面会变成空白，这是因为没有对按键屏蔽导致的刷新显示错误，只要在CDialogAI类中增加对PreTranslateMessage函数的处理，如果判断按键已经按下并且键值为回车或ESC键，则直接返回，不进入WINDOWS消息处理，这样就可以有效避免按键屏幕刷新出错问题。

5 结束语

有这样的思路设计的类QQ界面，不仅可以起到类似标签的效果，而且更加灵活，可以随意调整大小，拖动，收缩/隐藏,可以有选择的显示一个或多个子对话框的界面，如果作为设备管理界面，标题框还可以表示设备在线状态，一举多得，而且既可以作为一个独立的类还可以生成链接库，调用简单，应用方便，还可以举一反三，让界面呈现其他多种方式的显示。