循序漸進實現仿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:
 

然後需要在WM_NCPAINT的時候描邊,創建QQ邊框顏色的畫筆,用RoundRect就可以畫個圓角邊框。

QQ的標題欄和系統按鈕是自繪的,本來應該在WM_NCPAINT消息裏繪製,但是發現點擊“編輯個性簽名”會出現一個編輯框供輸入,而標題欄是不能放置控件的,因此主窗口創建時乾脆不要標題欄,全部客戶區,在客戶區上方模擬一個標題欄區域出來。由於要支持調整窗口尺寸,因此創建窗口時窗口類型是WS_POPUPWINDOW|WS_THICKFRAME|WS_MINIMIZEBOX|WS_MAXIMIZEBOX,如此默認的窗口邊框並不符合我們的要求,需要在WM_NCCALCSIZE消息裏設置一下邊框尺寸:

設置邊框尺寸爲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裏頻繁釋放再創建了。代碼如下:

 

 

至此貼圖窗口完成,看一下程序截圖:

 

目前的這個程序可拖動,可調整大小,雙擊可最大化,系統欄圖標按右鍵可彈出仿QQ的菜單,不過僅“打開主面板”和“關閉”命令有效。界面上的按鈕只是貼圖,並不會響應鼠標動作。下一步會實現界面按鈕的三態和功能響應,添加其他功能,下一篇再說了。

 

補充說明:界面庫是支持MFC的,程序中的貼圖代碼基本可以照搬到MFC的程序,只需要包含"ringdib.h"即可。不過需要先編譯libsrc/freelib下的zlib,png庫,想支持JPG還需編譯JPG庫。

 

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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章