隨著計算機技術的發展與普及,計算機逐漸走進了人們的日常生活當中。人們通過它來學習,娛樂,信息的交互等等.並且對應需而生的各種各樣的軟件產品的要求也有了一定的提高。除了基本功能外,對軟件易操作性,界面的美觀性等也是一個成功軟件必不可少的重要因素。美觀個性化的界面是一個軟件吸引和留住用戶的法寶之一,通訊軟件QQ/MSN就是這類產品中的一個典型的代表,下面將用VC++對QQ的界面進行模擬實現,供廣大朋友參考。
相信各位對QQ已經相當熟悉,因此對其外觀特性等不作累敘.我們將選用Visual C++來進行進行實現。在這之前,有必要向讀者介紹一下大體情況。
其實,整個過程最重要的部分是個性化界面自繪部分,也是難度最大的部分。關於界面編程方面的知識,誠然這是一個較為大的體系結構,我們不能奢求通過簡短的篇幅就能對它進行較為全面的描述,並且現在軟件開發行業也有縮短開發周期,提高開發效率的趨勢,於是將這一難度問題借用外在控件協助我們完成。
關於換膚控件的選擇,這裡也向大家簡單介紹一下,當然這只是個人的觀點,僅供參考了解。當前市場提供多個換膚出名的換膚產品(SkinMagic,Skin++,USkin,AppFace,SkinCrafte,等),其中SkinMagic,AppFace,USkin等都是做得比較馬虎的,界面的某些元素效果做得讓人不太滿意.而Skin++和SkinCrafte在這方面做得比較出色.客觀的說Skin++目前應該說,是國內較為出色的產品,其占用資源消耗比俄國產品SkinCrafte要出色,而俄國產品SkinCrafte在外觀性能上做到的效果比Skin++要優秀點,COOL一點。
雖然如此,本實現沒有選用以上任何一產品,原因是這裡有一個新起之秀SkinBeauty,它無論是性能和外觀做出的效果都比較囂張,更甚的是宣稱提供良好的鍵盤操作支持同時並號稱在Win2K和XP等系統可以做出Vista的玻璃磨沙效果。
當然,這些都是所謂的比較結果而已,還有一個選用SkinBeauty的原因是:SkinBeauty可以使用自帶的皮膚編輯軟件(SkinBeauty Studio)實現一套皮膚包含多種樣式的窗口界面,按鈕樣式等。這是以上任何一個產品暫時似乎都不能提供的。而我們這個項目的需求也有此(主界面,聊天對話框窗口不同,並有多個不同特性的按鈕等細節問題)。
經過了前面的簡單描述,接下來將開始具體的實現了。先看一下目標效果,如圖:
0.准備工作:
用產品相應的皮膚編輯軟件SkinBeautyStudio編輯好界面各元素皮膚,一般好看的界面都是由圖片繪制所成(這裡是到其主站下載已有的BeautyQQ.bsk皮膚)。將下載好的換膚開發庫(SkinBeauty.dll,SkinBeauty.lib)和接口文件SkinBeautyExport.h准備好,下載地址在本文章後有給出,或自己到www.afe-soft.com上自己下載。
1.建立項目:
打開VC++,利用向導幫助建立基於MFC的對話框項目BeautyQQ,過程如下
New-> Projects -> MFC AppWizard(exe) -> Dialoag based 其他默認完成建立。簡單的修改一下對話框的大小,標題欄名稱等,編譯一下,如圖:
運行一下基本正常,這就算完成了項目的創建工作了。
2.加載換膚庫
做好基本框架後,界面還是很土,運行效果難以讓人滿意,於是我們接下來可以加載換膚庫,初步改變程序的界面外觀了。
將先前准備好的skinBeauty.dll庫放在項目的運行目錄,在項目的目錄放入SkinBeautyExport.h文件和SkinBeauty.lib文件,以便稍後引入並調用函數接口。(一般DLL庫的調用分成靜態調用和程序運行期間動態調用2種,關於這兩種的區別,可參考其他文章。這裡,我們將選用靜態調用的方式實現)
在適當的位置添加引入庫的聲明,這裡我們選擇在stdafx.h文件裡面添加:
//inside stdafx.h
//SkinBeauty Lib Call
#include "SkinBeautyExport.h"
#pragma comment(lib,"SkinBeauty.lib")
在項目得初始化位置(這裡選擇在項目的創建實例cpp文件裡面,BeautyQQ.cpp的CBeautyQQApp::InitInstance()函數的開始,一般都可以在此加載)加入皮膚加載的代碼:
BOOL CBeautyQQApp::InitInstance()
{
CString exeFullPath;
CString strFilename;
int nLen = GetModuleFileName(NULL, exeFullPath,MAX_PATH);
CString strPath(exeFullPath);
strPath = strPath.Left(strPath.ReverseFind('\\'));
strFilename = strPath +_T("\\beautyQQ.bsk");
SkinLoad(THCAR2char(strFilename.GetBuffer(0)));
......
}
從上面可知,我們先用GetModuleFileName()獲取加載皮膚的路徑,然後調用提供的函數接口SkinLoad()實現換膚庫的加載。而SkinLoad()函數的參數也比較容易理解,就是皮膚所謂位置的路徑。它的原型可以在頭文件找到://load the skin with a skin-file from a path.
//[IN]:absolute file path
BOOL SkinLoad(char* szSkinPath);
至此,已經完成換膚庫的加載了。運行看看效果是不是眩了很多,呵呵。
順便說一下的是,官方聲稱,調用完SkinLoad()載入後,在退出程序前並不需要調用任何卸載函數,換膚引擎將自動實現庫的銷毀拆裝等操作,除非你程序運行中途意願性的想去掉皮膚外觀。
現在已經完成QQ主界面的外觀實現與美化了,接下來我們通過VC向導添加一個對話框資源並添加相應的類,命名CtalkDlg類,其功能是聊天對話框的對話窗口,也就是當我們雙擊用戶列表的其中一個用戶後彈出的聊天窗口.當我們運行的時候發現,它的窗口背景外觀除了大小外,其它跟主界面是完全一樣的, 怎麼辦呢?沒有關系,因為在皮膚文件裡面已經編輯和准備好另一外觀的窗口皮膚資源,我們只需要將這個聊天對話框創建後跟這個皮膚資源綁定則可,重載這個CtalkDlg類的初始化函數,並添加綁定代碼,具體實現如下:
BOOL CTalkDlg::OnInitDialog()
{
CDialog::OnInitDialog();
//將該對話框綁定某資源ID,讓其繪制根據該資源定義來實現
//bind with the predefine res
BindRes2CtrlbyHWND(103,m_hWnd);
......
}
上述代碼功能是將預先在beautyQQ.bak皮膚裡面定義好的對話框圖像資源與對話框綁定,資源內部ID號為103(注意,該資源編號是編輯皮膚的時候就是由用戶定義的,一般從101開始)。從上面的BindRes2CtrlbyHWND()函數名稱以及參數可知道,功能是將窗口句柄為m_hWnd的窗口外觀與資源Id為103的皮膚資源綁定.於是,這就實現了不同窗口可以顯示不同的背景皮膚了。
跟這個功能相類似的是,我們聊天對話框有好幾個按鈕,它們擁有不一樣的外觀,按理也應該綁定指定需要的外觀皮膚資源,於是,我們可以采用以下函數接口實現:
BindRes2CtrlbyID(106,IDC_BUTTON_TALK_SERACH);
以上語句是將皮膚資源ID為106的皮膚跟程序資源ID為IDC_BUTTON_TALK_SERACH的搜索按鈕相綁定,該函數接口可以在程序運行前面預先將某控件與指定的皮膚資源相綁定,提供的是控件資源ID與皮膚資源ID。當然也可以用句柄的方式綁定,跟前面的BindRes2CtrlbyHWND()不同的是,大多數對話框窗口在運行期間沒有固定的控件資源ID的概念(不象button,edit等控件),所以只能使用實時句柄HWND的形式進行綁定。前面兩個資源綁定函數的原型在SkinBeautyExport.h頭文件裡面可以找到,如下:
//bind a skin_resource with a Ctrl by Ctrl ID or by handle
//[IN]:user resource define in the skin-file; the ID/handle of Ctrl to be set
void BindRes2CtrlbyID(int nUserResID,DWORD dwCtrlID);
BOOL BindRes2CtrlbyHWND(int nUserResID,HWND hWnd);
好,經過上面的描述後,對照附件的源碼,對於QQ的菜單,用戶列表等實現已經不是那麼困難了,用戶只需象正常的菜單和ListCtrl那樣使用就可以了,運行的時候換膚庫自動會將他們的外觀美化起來。讀者可下載源碼,看它是怎麼綁定實現的。
基本整個復雜而超眩的項目就在完成向導創建後調用兩到三個第三方接口函數中完成。坦白說,整個換膚開發包提供的接口函數相當簡練,就10多個,功能與使用方法亦是相當明了,相信無需多研究就知道如何使用;如果對這幾個接口函數有什麼疑問,可以參考官方提供的開發文檔說明書。
其實上面的例子跟商家提供的源碼類似,只是本人將其實現過程解釋出來而已,希望對做界面的朋友有參考作用。開始我是對使用商家界面換膚產品的行為比較反感,後來發現效果和效率還湊和,就算了,並在商家的鼓勵下寫了篇文章幫他們介紹給讀者認知,換取了一個企業版本的開發包。算是“個人利益跟群眾利益結合”吧,的確不錯的,大家可以測試。不過我想對國內某些用戶不太滿意的是,目前SkinBeauty的使用文檔是英文著寫的,暫時沒有中文版本,這對部分不動E文的朋友有點不方便罷了。
搞界面開發的,建議多下載幾個換膚產品看看其性能,如資源占用,做到的效果,鍵盤操作性等。
結語
在尤為強調效率的時代,不妨考慮使用可信賴的第三方控件,將繁雜而固化的實現扔給它們來處理,深入產品功能業務,站在別人的肩膀上,再優化自身,從而走得更高更遠。
本文配套源碼