`
snzipeng
  • 浏览: 21497 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

[转]循序渐进实现仿QQ界面(六):异型菜单与内建滚动条自绘

阅读更多

本篇演示实现仿QQ界面的异型菜单与滚动条自绘。

先讲解一下如何实现QQ的圆角菜单,这个要用到HOOK了,因为菜单是一种特殊的窗口,无法用FindWindow或通过HMENU来获取到窗口句柄,也就无法子类化。必须下钩子,这里下的是WH_CALLWNDPROC的钩子:

C/C++ code
BOOL QQMenu::InstallHook() { if(m_hMenuHook == NULL) m_hMenuHook = SetWindowsHookEx(WH_CALLWNDPROC,MenuHook,GetInstance(),GetCurrentThreadId()); return (BOOL)m_hMenuHook; } LRESULT CALLBACK QQMenu::MenuHook(int code,WPARAM wParam,LPARAM lParam) { PCWPSTRUCT lpCwp = (PCWPSTRUCT)lParam; if(code == HC_ACTION && lpCwp->message == WM_CREATE) { //检测是否是菜单 TCHAR szClassName[16]; int nCount = GetClassName(lpCwp->hwnd,szClassName,12); if(nCount == 6 && lstrcmpi(szClassName,_T("#32768")) == 0) { QQMenu* pMenu = (QQMenu*)GetWindowPtr(lpCwp->hwnd); if(pMenu == NULL) { //未子类化 pMenu = window->NewRingObj(pMenu,TRUE); pMenu->Attach(lpCwp->hwnd); } } } return CallNextHookEx(m_hMenuHook,code,wParam,lParam); }



查MSDN知道菜单的窗口类名是“#32768”,找到菜单窗口就好办了,子类化后就可以做手脚了,做的手脚不多,只需要实现圆角矩形外形就够了,菜单的自绘早已实现,是交由主窗口处理的,就不必费手脚了。

首先是WM_NCCALCSIZE消息,需要加大其非客户区,为画圆角腾出空间来,但是注意腾出了空间画圆角,客户区的面积就缩小了,有可能会使菜单项显示不全,因此需要在WM_WINDOWPOSCHANGING消息里把吃掉的客户区空间再吐出来,就是加大菜单窗口的尺寸,这样才不影响菜单项的显示。怎么实现及绘制圆角矩形窗口这个系列文章的第一篇就讲过了,这里就不多费口舌了。

回答一下有位朋友在我博客前面文章的留言,为什么子类化菜单后截不到WM_MOUSEMOVE消息,试了一下的确没有,其实菜单的WM_MOUSEMOVE消息被替换掉了,变成了MN_MOUSEMOVE消息,值为0x01EE,定义看这个链接:http://topic.csdn.net/t/20050713/18/4142641.html

接下来讲解怎么实现QQ左下角按钮上弹出来的异型菜单,一般做法是自己实现一个异型窗口然后加载菜单,不过既然是HOOK了菜单,还是直接在菜单上实现比较好。首先一个问题是怎么区分这个主菜单和其他圆角菜单,才好实现不同的处理。方法是主菜单创建的时候调用SetMenuInfo为其设置一个值,以后可以通过GetMenuInfo来检测这个值以鉴别是主菜单:

C/C++ code
//设置数据标识QQ主菜单 MENUINFO mf; mf.cbSize = sizeof(MENUINFO); mf.fMask = MIM_MENUDATA; mf.dwMenuData = ID_QQMENU; m_rmQQ->SetMenuInfo(&mf);


鉴别出主菜单后就可以实现不同的外形处理了,这个菜单的外形可以有两种方案,一个是带上QQ圆形按钮的外形,弹出时盖住QQ按钮。不过考虑到QQ图案不能调色,绘制时要多道手脚专门画那个企鹅,还是省点事采用挖掉那个圆形的外形,如下图(左边的图像):




由于菜单项是可增减的,因此这个外形必须动态生成,几何学得好的话可以用线条绘制出来,我是属于几何学得不好的,早忘光了:P,因此采用圆角矩形和图片合成的方式来构造这个外形。看上图中的右图,兰色边框勾勒出了圆角矩形,可以用CreateRoundRectRgn生成,红色虚线勾出了需要在这个圆角矩形区域挖掉和添加的部分,黄色是这两个HRGN相交叠的部分,这块区域是固定尺寸不会变动的,因此可以用图片实现,根据这个图来生成HRGN。这张图片如下:



形状有点怪异,黑色部分就是需要生成的HRGN形状,生成HRGN后可以调用CombineRgn来与圆角矩形的HRGN合并,参数采用RGN_XOR:

C/C++ code
CombineRgn(m_hrgn,m_hrgn,hrgn,RGN_XOR);


m_hrgn是圆角矩形,hrgn是图中黑色部分形状的HRGN,采用RGN_XOR参数的效果是:合并两个形状,去掉重叠的部分,结果就是圆角矩形在左下角挖掉了图中半圆的形状,添加了下面的圆弧三角,恰好符合QQ主菜单的外形。

下面讲解一下如何根据图片来生成HRGN,原理是逐行扫描像素,发现是白色(透明色)不处理,发现是黑色(非透明色)就根据连续的像素数量调用CreateRectRgn来生成高度为1的HRGN,每一扫描行可能会有一些不连续的点或线,可以通过CombineRgn,采用RGN_OR参数把这些不连续的HRGN合并起来,然后把整个图象所有扫描行生成的这些HRGN再合并,最终就得到了图片中指定形状的HRGN,代码有点复杂,这里就不贴了,可以去看RingSDK图象库libsrc\ringdib\rdib.cpp里面的RingDIB::CreateRgn函数代码。

得到最终的HRGN后就可以通过SetWindowRgn实现异型菜单了,当然还要准备好窗口非客户区的贴图,左下角的贴图如下:



怎么贴图绘制就不说了,前面的文章都讲解过了。

接下来就是菜单的弹出问题,计算好位置弹出,貌似可以了,其实还是有工作要做,把窗口移到桌面上方,再点按钮弹出菜单,晕,菜单是往下弹出了,缺口跑到主界面下方去了,必须限制菜单的弹出方向,这时要用到TrackPopupMenuEx函数的最后一个参数LPTPMPARAMS了,这个参数一般调用时是指定为NULL,其实是可以用这个参数限制菜单的弹出方向的,这个参数说明如下:

C/C++ code
typedef struct tagTPMPARAMS { UINT cbSize; RECT rcExclude; } TPMPARAMS, *LPTPMPARAMS; cbSize :Size of structure, in bytes. rcExclude :Rectangle to exclude when positioning the window, in screen coordinates


指定rcExclude的坐标,菜单弹出时就会避开这个区域,我们把主窗口下方的空间坐标赋给这个rcExclude,主菜单弹出时为了避免覆盖这个坐标,就只能往上弹出,这下终于达到我们期望的效果了。不过且慢,这个rcExclude只是个矩形,我们拦住了菜单不往下弹,却拦不住左右,把窗口移到屏幕最右边,再弹出菜单,继续晕,菜单往左弹出了!缺口跑到了左边,又露馅了。这下没有取巧的办法,只能实现菜单外形的左右翻转,同时因为左右翻转,还需要调整菜单的弹出位置以使缺口套准QQ圆形按钮。弹出菜单的代码如下:

C/C++ code
RINGCMD(WndQQButton,OnQQMenuPopup) { if(event == STN_CLICKED) { RECT rc,rcEx; int xoff = 0; GetWindowRect(m_hWnd,&rc); rc.left += QQBTN_X; rc.bottom -= (window->m_dibQQCorner.Height() + QQBTN_QQ_HEIGHT + 3); //菜单如果靠屏幕右边弹出,需要横向翻转其不规则外形,则需要调整其弹出位置的X坐标 if(rc.left + QQMENU_WIDTH > WINVAR(SM_CXSCREEN)) xoff = QQMENU_OFFSET; //限制菜单弹出位置,使其始终向上弹出。 rcEx.left = 0; rcEx.right = rc.right; rcEx.top = rc.bottom + 1; rcEx.bottom = WINVAR(SM_CYSCREEN); //先置标记通知刷新,绘制QQ按钮上的企鹅 m_bMenuPopup = TRUE; InvalidateRect(m_hWnd,NULL,TRUE); //弹出菜单,设定避开rcEx指定的坐标 window->m_rmQQ->PopupEx(m_hWnd,rc.left+xoff,rc.bottom,FALSE,&rcEx); } }


翻转菜单不规则外形,其实是先把左下角HRGN图象横向翻转,再生成HRGN。图象横向翻转其实就是把图象的每一行数据数组进行倒序,属于C语言的入门功课了,这里就不说了。

现在终于实现了QQ的异型主菜单,剩下最后好友列表区的滚动条了。

自绘滚动条的实现:

自绘滚动条其实很简单,看过这个系列前面的文章大家应该会了,子类化后贴图不是很难。但是QQ好友列表区的滚动条自绘却不是那么简单,因为好友列表是用ListBox控件实现,而ListBox的滚动条是内建的,是画出来的,根本不是窗口!没办法子类化,这下完蛋,只能子类化ListBox,自己实现绘制滚动条的代码。然而有个要命的地方,ListBox绘制滚动条既没提供接口,也没提供消息,光在WM_NCPAINT里面绘制没用,有很多消息都是直接进行了滚动条的绘制,这下子就需要围追堵截,把可能绘制滚动条的消息全部截过来自己处理。除了WM_NCPAINT,需要拦截的消息如下:

WM_STYLECHANGED
WM_LBUTTONDBLCLK
WM_NCLBUTTONDBLCLK
WM_TIMER
WM_LBUTTONDOWN
WM_NCLBUTTONDOWN
WM_LBUTTONUP
WM_MOUSEWHEEL
WM_SIZE
WM_VSCROLL


那个晕哪!有这工夫还不如自己写个窗口实现了。事实也确实是,研究这些消息的时间够自己写个窗口实现了。不过实现ListBox的滚动条自绘还是有意义的,一个个消息来吧。

首先当然要实现WM_NCPAINT消息,把滚动条画出来,这个不难。实现之后窗口被其他程序覆盖,再切换到前台,滚动条象样子了,不过滚动条一动就露馅了。

然后是WM_VSCROLL,ListBox有个窗口类型是LBS_DISABLENOSCROLL,说明没有滚动条,窗口还是能滚动的,因此在这个消息里面,先把窗口的WS_VSCROLL类型去掉,然后调用默认的窗口过程,再把WS_VSCROLL类型设置回来。现在效果是按翻页滚动不会露馅,发送WM_VSCROLL消息设定滚动条位置不会露馅。

C/C++ code
case WM_VSCROLL: { ReplaceStyle(WS_VSCROLL,0); LRESULT res = RingListBox::RingdowProc(m_hWnd,param); ReplaceStyle(0,WS_VSCROLL); return res; }


WM_SIZE消息做同样处理,这下调整窗口大小也不会露馅了。

WM_STYLECHANGED,WM_LBUTTONDBLCLK,WM_NCLBUTTONDBLCLK三个消息拦截掉,直接return 0;这下在窗口上双击不会露馅了。

WM_LBUTTONDOWN,因为设定了ListBox的LBS_NOINTEGRALHEIGHT类型,因此ListBox的最下面一个可视的选项有可能是显示不完全的,如果选择了这个选项,ListBox会滚动窗口让这个选项完全显示,这时会重绘滚动条,因此需要在这个消息里检测如果选中的是没有显示完整的选项,就发送wParam为SB_LINEDOWN的WM_VSCROLL消息让其显示完全,然后选中该选项,return 0;其余情况交给默认的窗口过程处理。

WM_MOUSEWHEEL:计算好要滚动的位置,然后连着发送下面两个消息就OK了。

C/C++ code
SendMessage(m_hWnd,WM_VSCROLL,MAKELONG(SB_THUMBPOSITION,nPos),0); SendMessage(m_hWnd,WM_VSCROLL,SB_ENDSCROLL,0);


接下来就来到最困难的部分,点击滚动条上的上下箭头和拖动滑块。这个需要先处理WM_NCLBUTTONDOWN和WM_LBUTTONUP消息,WM_NCLBUTTONDOWN消息里面先检测鼠标是否点在了滚动条上,是就要SetCapture捕获鼠标,如果是按在上下箭头或不在滑块上,就设定一下定时器,在WM_TIMER消息里发送wParam为SB_LINEUP,SB_LINEDOWN,SB_PAGEUP,SB_PAGEDOWN的WM_VSCROLL消息,可以连续滚动。WM_LBUTTONUP消息里ReleaseCapture,清除定时器,再发送wParam为SB_ENDSCROLL的WM_VSCROLL消息终止滚动。

最难的就是拖动滑块的处理了,必须自己绘制滑块位置,定时器检测并绘制滑块位置,当检测到滑块移动的距离足够需要滚动窗口的时候,就需要计算出滚动条的滑块位置并发送wParam为SB_THUMBPOSITION的WM_VSCROLL消息,ListBox的滚动条滚动范围(GetScrollRange返回的值)是选项总数-1,绘制时是按像素,因此计算时难免会有误差,会造成滑块拖动时的偶尔抖动,不过总算是实现了ListBox内建的滚动条自绘,演示程序就先这样了,要想达到商用级别尚需进行代码优化和调整。

现在看看程序的截图:



终于完成了,长吁一口气,在此谢谢大家一直以来的支持和鼓励。

演示程序下载地址:http://download.csdn.net/source/2125267

说明:在编写这个演示程序的时候发现和修正了RingSDK的几个BUG,因此编译这个演示程序需要更新到最新版本的RingSDK,不更新的话主菜单和部分调色功能可能会不正常,不过不影响效果演示。这个演示程序的源代码也已经提交到SVN,更新RingSDK的时候会自动下载下来,可以不用去下演示程序。

分享到:
评论

相关推荐

    循序渐进实现仿QQ界面

    RingPhone大侠实现的,循序渐进实现仿QQ界面,做成的pdf文档供大家学习。 最终实现效果图:http://hi.csdn.net/attachment/201003/13/23990_12684890525zzo.jpg

    循序渐进实现仿QQ界面(一):

    序渐进实现仿QQ界面(一):园角矩形与双缓冲贴图窗口 - CSDN论坛 - CSDN.NET.mht

    循序渐进实现仿QQ界面(四)

    自己花时间整理的,什么都不少,VC6编译通过

    仿QQ界面程序

    编译有问题的,请到以下地址去看: ... 循序渐进实现仿QQ界面(六):异型菜单与内建滚动条自绘的配套源码,文章请见: http://blog.csdn.net/ringphone/archive/2010/03/13/5377522.aspx

    仿QQ界面程序(6)

    编译有问题的,请到以下地址去看: ... 循序渐进实现仿QQ界面(六):异型菜单与内建滚动条自绘的配套源码,文章请见: http://blog.csdn.net/ringphone/archive/2010/03/13/5377522.aspx

    山寨版QQ-韩顺平循序渐进学Java

    这个项目是基于韩顺平循序渐进学Java视频制作完成的,包含两个项目:QQ客户端和服务器端。具有登录、好友聊天、在线提示等功能。

    仿QQ界面程序(3)

    循序渐进实现仿QQ界面(三):界面调色与控件自绘的配套源码,文章请见:http://blog.csdn.net/ringphone/archive/2010/01/15/5191809.aspx

    易语言自绘登陆UI界面 仿QQ界面源码

    易语言自绘登陆UI界面 仿QQ界面源码。@小酚。

    Python循序渐进(题库)

    python 循序渐进题库.从基础到困难.一步一步走向大神,

    仿QQ界面程序(5)

    编译有问题的,请到以下地址去看: ... 循序渐进实现仿QQ界面(五):半透明窗体与不透明控件的配套源码,文章请见: http://blog.csdn.net/ringphone/archive/2010/02/11/5306231.aspx

    fragment+viewpager 仿qq界面

    fragment+viewpager 仿qq界面 实现点击菜单切换界面+滑动切换viewpager切换界面

    高仿QQ界面(源代码)

    高仿QQ界面,飞信界面,源代码,c++;循序渐进实现仿QQ界面(二):贴图按钮的三态模拟

    仿QQ登陆界面 仿QQ登陆界面

    仿QQ登陆界面 仿QQ登陆界面 仿QQ登陆界面 仿QQ登陆界面

    循序渐进Linux 第2版

    《循序渐进Linux 第2版》PDF下载 试读

    Visual.Basic.6.0循序渐进教程中文版

    Visual.Basic.6.0循序渐进教程中文版,系统介绍了vb程序语言的用法 勾月科技www.gouyue.net QQ17878387

    仿QQ界面程序(2)

    缺头文件的,请到下面文章的地址去看。 循序渐进实现仿QQ界面(二):贴图按钮的三态模拟的配套源码,文章请见:http://blog.csdn.net/ringphone/archive/2010/01/10/5171490.aspx

    ( Windows编程循序渐进(清晰完整版).rar )

    windows编程循序渐进一书为我们详细而全面地介绍了vc++的编程基础知识,本书共20章,内容全面丰富,适合于vc++初学者和相关的工程技术人员。 此部分为配套的code源码,方便学习使用,祝大家学习愉快。

    循序渐进学java视频教程之山寨版QQ

    资源名称:循序渐进学java视频教程之山寨版QQ资源目录:【】abbr_2b0a956c6deaffd161055bcc69352490【】abbr_69fe1d0216f529000a178ba7a943dbd8【】abbr_83be30c3d0d895e0b4887fe4e9c049f2【】abbr_89247c1a9c971d54...

    一个简易仿qq登录界面

    实现一个简易仿qq登录界面,要求实现: 1) 登录界面有帐号、密码文本和编辑框,登录和退出按钮。在程序中维护一个帐号密码的数组,用以判断正确登录与否。如果登录成功,则进入qq主界面,否则清空帐号和密码编辑框,...

    仿QQ界面程序(4)

    缺头文件的,请到下面文章的地址去看。 ...循序渐进实现仿QQ界面(四):圆形按钮与工具栏自绘的配套源码,文章请见:http://blog.csdn.net/ringphone/archive/2010/01/26/5259819.aspx

Global site tag (gtag.js) - Google Analytics