qqlike完美仿QQ界面
目录
1. 循序渐进实现仿QQ界面(一):园角矩形与双缓冲贴图窗口 (2)
2. 循序渐进实现仿QQ界面(二):贴图按钮的三态模拟 (7)
3. 循序渐进实现仿QQ界面(三):界面调与控件自绘 (14)
青椒炒肉丝4. 循序渐进实现仿QQ界面(四):圆形按钮与工具栏自绘 (24)
斯卡布罗集市中文版
5. 循序渐进实现仿QQ界面演示程序编译问题及MFC调用RingSDK图象库示例 (31)
6. 循序渐进实现仿QQ界面(五):半透明窗体与不透明控件 (36)
7. 循序渐进实现仿QQ界面(六):异型菜单与内建滚动条自绘 (40)
8. RingSDK界面库已改为LGPL协议 (49)
1 / 50
桃李满天下下一句赞美老师的句子
1.循序渐进实现仿QQ界面(一):园角矩形与双缓冲贴图窗口
2010-01-08 02:01 13917人阅读评论(48) 收藏举报
印象里仿QQ界面的程序应该有很多,搜了一下,虽然出来一大堆,排除了重复的,却只有两三个,没我想象的好。经常看到CSDN上有人问,QQ这个功能怎么实现,那个界面怎么实现,归纳了一下,决定写这么一个仿QQ界面程序,实用功能一律不实现,仅仿界面:
异型窗口
贴图界面
界面可调,换底纹
仿QQ界面上的各种自绘控件
QQ2009界面仔细研究起来,其实还是很复杂的,完全模拟做到一模一样还是很花工夫的,用API
实现是个噩梦,因此这里是用RingSDK实现。关于RingSDK,请到这个链接
blog.csdn/ringphone/archive/2008/09/11/2911244.aspx,最新版本请用SVN到
svn://svnhost/RingSDK下载。RingSDK的图象库与界面库结合,可以实现一些比较酷的界面。这
里就是演示图象库与界面库结合实现QQ2009的界面。OK,Let's go!不过先声明一下,这里只是模仿界面,实际QQ的界面不是这么做的。
QQ2009是园角矩形窗口,不是复杂形状,因此实现起来很简单,CreateRoundRectRgn然后SetWindowRgn就行了。不过窗口可以拖动调整大小,因此不是简单的在开始设定就可以,需要在WM_SIZE消息里随时改变这个RGN:
view plain
1.RECT rc;
2.GetWindowRect(m_hWnd,&rc);
3.OffsetRect(&rc,‐rc.left,‐rc.top);
4.
5.if(m_hrgn)
京东购物流程6.    DeleteObject(m_hrgn);
7.m_hrgn = CreateRoundRectRgn(rc.p,rc.right,rc.bottom,NCB_CORNERSIZE,NCB_CORNE
RSIZE);
8.SetWindowRgn(m_hWnd,m_hrgn,TRUE);
9.InvalidateRect(m_hWnd,NULL,TRUE);
2 / 50
然后需要在WM_NCPAINT的时候描边,创建QQ边框颜的画笔,用RoundRect就可以画个圆角边框。
QQ的标题栏和系统按钮是自绘的,本来应该在WM_NCPAINT消息里绘制,但是发现点击“编辑个性签名”会出现一个编辑框供输入,而标题栏是不能放置控件的,因此主窗口创建时干脆不要标题栏,全部客户区,在客户区上方模拟一个标题栏区域出来。由于要支持调整窗口尺寸,因此创建窗口时窗口类型是WS_POPUPWINDOW|WS_THICKFRAME|WS_MINIMIZEBOX|WS_MAXIMIZEBOX,如此默认的窗口边框并不符合我们的要求,需要在WM_NCCALCSIZE消息里设置一下边框尺寸:
view plain
1.RINGMAINMSG(WM_NCCALCSIZE)
2.{
3. LPRECT lprc = (LPRECT)param.lParam;
4.
5. lprc‐>top += WND_BORDER;
6. lprc‐>left += WND_BORDER;
7. lprc‐>right ‐= (WND_BORDER + 1);  //右边框需要留出画边框线的位置,1
8. lprc‐>bottom ‐= (WND_BORDER + 1);  //同理
9.
10. return 0;
11.}
设置边框尺寸为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就行。还有用户头像,
3 / 50
随便截了一个,把这些素材加入资源,算准坐标进行双缓冲绘制,依次绘制到内存图象就可以了。这里说一下内存图象的创建,是一开始就创建了一个跟屏幕等宽,高95+55的内存图象,这样就不需要在WM_SIZE里频繁释放再创建了。代码如下:
view plain
1.先把各素材绘制到内存图象m_dibBanner
2.//背景
3.m_dibBkg.StretchTo(&m_dibBanner,0,0,rc.right,m_dibBanner.Height(),0,0,m_dibBkg.Width()
,m_dibBkg.Height(),FALSE);
4.//标题(“QQ2009”)
5.m_dibCaption.AlphaTo(&m_dibBanner,8,5,0,0);
6.//装饰图案,即QQ所谓的“底纹”
7.m_dibTatoo.AlphaTo(&m_dibBanner,rc.right‐m_dibTatoo.Width(),0,0,0);
8.//用户头像
9.m_dibUser.DrawTo(&m_dibBanner,7,25,0,0,m_dibUser.Width(),m_dibUser.Height());
10.//用户名及签名
11.m_dibUserBanner.DrawTo(&m_dibBanner,54,25,0,0,m_dibUserBanner.Width(),m_dibUserBanner.
Height());
怎么查ip地址12.//系统按钮
13.//最小化
14.m_dibBtnRc.DrawTo(&m_dibBanner,rc.right ‐ NCB_ENTIREWIDTH ‐ NCB_SPACE,yPos,gRcBtn[0].x
,gRcBtn[0].y, NCB_MINWIDTH,NCB_HEIGHT);
15.//关闭
16.m_dibBtnRc.DrawTo(&m_dibBanner,rc.right ‐ NCB_CLOSEWIDTH ‐ NCB_SPACE,yPos,
最新流行发型扎法
gRcBtn[NCB_CLOSENORMAL].x,gRcBtn[NCB_CLOSENORMAL].y,NCB_CLOSEWIDTH,NCB_HEIGH T);
17.//最大化/还原
18.if(IsZoomed())
19.{
20.    m_dibBtnRc.DrawTo(&m_dibBanner,rc.right ‐ NCB_ENTIREWIDTH ‐ NCB_SPACE + NCB_MINWID
TH,yPos,
21.    gRcBtn[NCB_RESTORENORMAL].x,gRcBtn[NCB_RESTORENORMAL].y,NCB_MAXWIDTH,NCB_HEIGHT);
22.}
23.else
24.{
25.    m_dibBtnRc.DrawTo(&m_dibBanner,rc.right ‐ NCB_ENTIREWIDTH ‐ NCB_SPACE + NCB_MINWID
TH,yPos,
26.        gRcBtn[NCB_MAXNORMAL].x,gRcBtn[NCB_MAXNORMAL].y,NCB_MAXWIDTH,NCB_HEIGHT);
27.}
4 / 50
5 / 50 28.
29. //绘制到窗口
30. //标题栏区域
31. m_dibBanner.Draw(hdc,0,0,0,0,rc.right,NCB_TITLEHEIGHT,rc.right,NCB_TITLEHEIGHT);
32. //底栏区域
33. m_dibBanner.Draw(hdc,0,rc.bottom  ‐ NCB_BOTTOMHEIGHT,0,NCB_TITLEHEIGHT,rc.right,
34.    NCB_BOTTOMHEIGHT,rc.right,NCB_BOTTOMHEIGHT);
至此贴图窗口完成,看一下程序截图:

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。