[转]循序渐进实现仿QQ界面（一）：园角矩形与双缓冲贴图窗口

印象里仿QQ界面的程序应该有很多，搜了一下，虽然出来一大堆，排除了重复的，却只有两三个，没我想象的好。经常看到CSDN上有人问，QQ这个功能怎么实现，那个界面怎么实现，归纳了一下，决定写这么一个仿QQ界面程序，实用功能一律不实现，仅仿界面：

异型窗口
贴图界面
界面可调色，换底纹
仿QQ界面上的各种自绘控件

QQ2009界面仔细研究起来，其实还是很复杂的，完全模拟做到一模一样还是很花工夫的，用API实现是个噩梦，因此这里是用RingSDK实现。关于RingSDK，请到这个链接http://blog.csdn.net/ringphone/archive/2008/09/11/2911244.aspx,最新版本请用SVN到svn://svnhost.cn/RingSDK下载。RingSDK的图象库与界面库结合，可以实现一些比较酷的界面。这里就是演示图象库与界面库结合实现QQ2009的界面。OK，Let's go!不过先声明一下，这里只是模仿界面，实际QQ的界面不是这么做的。

QQ2009是园角矩形窗口，不是复杂形状，因此实现起来很简单，CreateRoundRectRgn然后SetWindowRgn就行了。不过窗口可以拖动调整大小，因此不是简单的在开始设定就可以，需要在WM_SIZE消息里随时改变这个RGN：

C/C++ code: RECT rc; GetWindowRect(m_hWnd, & rc); OffsetRect( & rc, - rc.left, - rc.top); if (m_hrgn) DeleteObject(m_hrgn); m_hrgn = CreateRoundRectRgn(rc.left,rc.top,rc.right,rc.bottom,NCB_CORNERSIZE,NCB_CORNERSIZE); SetWindowRgn(m_hWnd,m_hrgn,TRUE); InvalidateRect(m_hWnd,NULL,TRUE); RECT rc; GetWindowRect(m_hWnd, & rc); OffsetRect( & rc, - rc.left, - rc.top); if (m_hrgn) DeleteObject(m_hrgn); m_hrgn = CreateRoundRectRgn(rc.left,rc.top,rc.right,rc.bottom,NCB_CORNERSIZE,NCB_CORNERSIZE); SetWindowRgn(m_hWnd,m_hrgn,TRUE); InvalidateRect(m_hWnd,NULL,TRUE);

然后需要在WM_NCPAINT的时候描边，创建QQ边框颜色的画笔，用RoundRect就可以画个圆角边框。

QQ的标题栏和系统按钮是自绘的，本来应该在WM_NCPAINT消息里绘制，但是发现点击“编辑个性签名”会出现一个编辑框供输入，而标题栏是不能放置控件的，因此主窗口创建时干脆不要标题栏，全部客户区，在客户区上方模拟一个标题栏区域出来。由于要支持调整窗口尺寸，因此创建窗口时窗口类型是WS_POPUPWINDOW|WS_THICKFRAME|WS_MINIMIZEBOX|WS_MAXIMIZEBOX，如此默认的窗口边框并不符合我们的要求，需要在WM_NCCALCSIZE消息里设置一下边框尺寸：

C/C++ code: RINGMAINMSG(WM_NCCALCSIZE) { LPRECT lprc = (LPRECT)param.lParam; lprc -> top += WND_BORDER; lprc -> left += WND_BORDER; lprc -> right -= (WND_BORDER + 1 ); // 右边框需要留出画边框线的位置，1 lprc -> bottom -= (WND_BORDER + 1 ); // 同理 return 0 ; }

设置边框尺寸为2。这里有一个有趣的现象：即使不响应WM_NCCALCSIZE消息，创建的窗口也是没有标题栏的，没有最小/大化，关闭按钮，但是在任务栏上的程序按钮上按鼠标右键，最小化，移动，大小，关闭的选项一个不少，并且窗口也响应这些命令。如果窗口加上WS_EX_TOOLWINDOW的扩展类型，则程序不会出现在任务栏上，就跟QQ的表现一样了，不过目前我们的程序暂时仅实现标题栏的贴图，不支持实际功能，因此暂时不加这个扩展类型，靠在任务栏上的程序按钮上按鼠标右键实现窗口的最小/大化和关闭操作。不过这也太那个了一点，因此还是在系统栏加个图标为上，怎么在系统栏加图标这个应该不成问题了，这里就不解释了，RingSDK对此进行了封装，一句AddInTaskBar(m_hWnd,LoadIcon(GetInstance(),MAKEINTRESOURCE(IDI_QQ)),"仿QQ2009界面");搞定。响应图标的点击弹出菜单这里也不解释了，看代码就知道了。

接下来就是界面贴图，实现QQ的上下两个区域的绘制，这里就要用到界面库了。首先就是要准备图片，QQ资源里没找到，懒得研究，就自己截图搞了，弄了个宽度为1，高95和55的图片平铺做上下两部分的背景，VISTA风格的系统按钮图案，因为是圆角，需要有透明色，就做成了GIF格式。底纹，右边的沙滩海鸥图案抠图没这个本事，另找了一个相似的，做成PNG格式，PS里面加个蒙板就有了ALPHA通道。图象库支持PNG的半透明绘制，只要调用AlphaTo就行。还有用户头像，随便截了一个，把这些素材加入资源，算准坐标进行双缓冲绘制，依次绘制到内存图象就可以了。这里说一下内存图象的创建，是一开始就创建了一个跟屏幕等宽，高95+55的内存图象，这样就不需要在WM_SIZE里频繁释放再创建了。代码如下：

C/C++ code: // 先把各素材绘制到内存图象m_dibBanner // 背景 m_dibBkg.StretchTo( & m_dibBanner, 0 , 0 ,rc.right,m_dibBanner.Height(), 0 , 0 ,m_dibBkg.Width(),m_dibBkg.Height(),FALSE); // 标题（“QQ2009”） m_dibCaption.AlphaTo( & m_dibBanner, 8 , 5 , 0 , 0 ); // 装饰图案，即QQ所谓的“底纹” m_dibTatoo.AlphaTo( & m_dibBanner,rc.right - m_dibTatoo.Width(), 0 , 0 , 0 ); // 用户头像 m_dibUser.DrawTo( & m_dibBanner, 7 , 25 , 0 , 0 ,m_dibUser.Width(),m_dibUser.Height()); // 用户名及签名 m_dibUserBanner.DrawTo( & m_dibBanner, 54 , 25 , 0 , 0 ,m_dibUserBanner.Width(),m_dibUserBanner.Height()); // 系统按钮 // 最小化 m_dibBtnRc.DrawTo( & m_dibBanner,rc.right - NCB_ENTIREWIDTH - NCB_SPACE,yPos,gRcBtn[ 0 ].x,gRcBtn[ 0 ].y, NCB_MINWIDTH,NCB_HEIGHT); // 关闭 m_dibBtnRc.DrawTo( & m_dibBanner,rc.right - NCB_CLOSEWIDTH - NCB_SPACE,yPos, gRcBtn[NCB_CLOSENORMAL].x,gRcBtn[NCB_CLOSENORMAL].y,NCB_CLOSEWIDTH,NCB_HEIGHT); // 最大化/还原 if (IsZoomed()) { m_dibBtnRc.DrawTo( & m_dibBanner,rc.right - NCB_ENTIREWIDTH - NCB_SPACE + NCB_MINWIDTH,yPos, gRcBtn[NCB_RESTORENORMAL].x,gRcBtn[NCB_RESTORENORMAL].y,NCB_MAXWIDTH,NCB_HEIGHT); } else { m_dibBtnRc.DrawTo( & m_dibBanner,rc.right - NCB_ENTIREWIDTH - NCB_SPACE + NCB_MINWIDTH,yPos, gRcBtn[NCB_MAXNORMAL].x,gRcBtn[NCB_MAXNORMAL].y,NCB_MAXWIDTH,NCB_HEIGHT); } // 绘制到窗口 // 标题栏区域 m_dibBanner.Draw(hdc, 0 , 0 , 0 , 0 ,rc.right,NCB_TITLEHEIGHT,rc.right,NCB_TITLEHEIGHT); // 底栏区域 m_dibBanner.Draw(hdc, 0 ,rc.bottom - NCB_BOTTOMHEIGHT, 0 ,NCB_TITLEHEIGHT,rc.right, NCB_BOTTOMHEIGHT,rc.right,NCB_BOTTOMHEIGHT); 先把各素材绘制到内存图象m_dibBanner // 背景 m_dibBkg.StretchTo( & m_dibBanner, 0 , 0 ,rc.right,m_dibBanner.Height(), 0 , 0 ,m_dibBkg.Width(),m_dibBkg.Height(),FALSE); // 标题（“QQ2009”） m_dibCaption.AlphaTo( & m_dibBanner, 8 , 5 , 0 , 0 ); // 装饰图案，即QQ所谓的“底纹” m_dibTatoo.AlphaTo( & m_dibBanner,rc.right - m_dibTatoo.Width(), 0 , 0 , 0 ); // 用户头像 m_dibUser.DrawTo( & m_dibBanner, 7 , 25 , 0 , 0 ,m_dibUser.Width(),m_dibUser.Height()); // 用户名及签名 m_dibUserBanner.DrawTo( & m_dibBanner, 54 , 25 , 0 , 0 ,m_dibUserBanner.Width(),m_dibUserBanner.Height()); // 系统按钮 // 最小化 m_dibBtnRc.DrawTo( & m_dibBanner,rc.right - NCB_ENTIREWIDTH - NCB_SPACE,yPos,gRcBtn[ 0 ].x,gRcBtn[ 0 ].y, NCB_MINWIDTH,NCB_HEIGHT); // 关闭 m_dibBtnRc.DrawTo( & m_dibBanner,rc.right - NCB_CLOSEWIDTH - NCB_SPACE,yPos, gRcBtn[NCB_CLOSENORMAL].x,gRcBtn[NCB_CLOSENORMAL].y,NCB_CLOSEWIDTH,NCB_HEIGHT); // 最大化/还原 if (IsZoomed()) { m_dibBtnRc.DrawTo( & m_dibBanner,rc.right - NCB_ENTIREWIDTH - NCB_SPACE + NCB_MINWIDTH,yPos, gRcBtn[NCB_RESTORENORMAL].x,gRcBtn[NCB_RESTORENORMAL].y,NCB_MAXWIDTH,NCB_HEIGHT); } else { m_dibBtnRc.DrawTo( & m_dibBanner,rc.right - NCB_ENTIREWIDTH - NCB_SPACE + NCB_MINWIDTH,yPos, gRcBtn[NCB_MAXNORMAL].x,gRcBtn[NCB_MAXNORMAL].y,NCB_MAXWIDTH,NCB_HEIGHT); } // 绘制到窗口 // 标题栏区域 m_dibBanner.Draw(hdc, 0 , 0 , 0 , 0 ,rc.right,NCB_TITLEHEIGHT,rc.right,NCB_TITLEHEIGHT); // 底栏区域 m_dibBanner.Draw(hdc, 0 ,rc.bottom - NCB_BOTTOMHEIGHT, 0 ,NCB_TITLEHEIGHT,rc.right, NCB_BOTTOMHEIGHT,rc.right,NCB_BOTTOMHEIGHT);

至此贴图窗口完成，看一下程序截图：

目前的这个程序可拖动，可调整大小，双击可最大化，系统栏图标按右键可弹出仿QQ的菜单，不过仅“打开主面板”和“关闭”命令有效。界面上的按钮只是贴图，并不会响应鼠标动作。下一步会实现界面按钮的三态和功能响应，添加其他功能，下一篇再说了。

补充说明：界面库是支持MFC的，程序中的贴图代码基本可以照搬到MFC的程序，只需要包含"ringdib.h"即可。不过需要先编译libsrc\freelib下的zlib,png库，想支持JPG还需编译JPG库。

程序下载地址：http://d.download.csdn.net/down/1974639/ringphone

[转]循序渐进实现仿QQ界面（一）：园角矩形与双缓冲贴图窗口相关推荐

循序渐进实现仿QQ界面（一）：园角矩形与双缓冲贴图窗口
印象里仿QQ界面的程序应该有很多,搜了一下,虽然出来一大堆,排除了重复的,却只有两三个,没我想象的好.经常看到CSDN上有人问,QQ这个功能怎么实现,那个界面怎么实现,归纳了一下,决定写这么一个仿QQ ...
vc循序渐进实现仿QQ界面（一）：圆角矩形与双缓冲贴图窗口
印象里仿QQ界面的程序应该有很多,搜了一下,虽然出来一大堆,排除了重复的,却只有两三个,没我想象的好.经常看到CSDN上有人问,QQ这个功能怎么实现,那个界面怎么实现,归纳了一下,决定写这么一个仿Q ...
循序渐进实现仿QQ界面（三）：界面调色与控件自绘
本篇讲述如何进行界面调色.界面调色一般有两种方法,调色板和HSL色彩变换.调色板局限于256色,这里不采用,因此用HSL色彩变换实现.首先要了解一下什么是HSL色彩空间,完整且详尽的知识请到维基百科去 ...
vc循序渐进实现仿QQ界面（三）：界面调色与控件自绘
本篇讲述如何进行界面调色.界面调色一般有两种方法,调色板和HSL色彩变换.调色板局限于256色,这里不采用,因此用HSL色彩变换实现.首先要了解一下什么是HSL色彩空间,完整且详尽的知识请到维基百科 ...
转一个仿QQ界面(VC实现)
转一个仿QQ界面(VC实现) 摘自:http://topic.csdn.net/u/20100519/21/05d4822d-c59c-413d-abd3-6c26149b8dd9.html 循序渐进 ...
仿qq左滑删除listview_Java基于Swing和Netty仿QQ界面聊天小项目
点击上方好好学java ,选择星标公众号重磅资讯.干货,第一时间送达今日推荐:硬刚一周,3W字总结,一年的经验告诉你如何准备校招! 个人原创100W+访问量博客:点击前往,查看更多来源:b ...
android+qq底部界面,Android 高仿QQ 界面滑动效果
Android高仿QQ界面滑动效果点击或者滑动切换画面,用ViewPager实现, 首先是布局文件: android:layout_width="match_parent" an ...
java实现仿qq界面及功能、网路编程、实现抽象工厂模式、线程池代码与测试
java实现仿qq界面及功能用Swing 代码在百度网盘:http://pan.baidu.com/s/1pJjxI4b 具体见https://www.iteye.com/topic/1137293 ...
仿QQ界面设计类(CYisongRichEdit)(原创）
仿QQ界面设计类(CYisongRichEdit) □ 深圳软客 (song_0962#sina.com) 大家对QQ的聊天工具都很熟悉,为了现实类似功,本人写了类QQ的消息发送和接的窗口是的 ...

[转]循序渐进实现仿QQ界面（一）：园角矩形与双缓冲贴图窗口

[转]循序渐进实现仿QQ界面（一）：园角矩形与双缓冲贴图窗口相关推荐

最新文章

热门文章