QT平臺(tái)上的動(dòng)態(tài)可定制界面設(shè)計(jì)

安 峰

（蘇州工業(yè)園區(qū)服務(wù)外包職業(yè)學(xué)院信息技術(shù)系，蘇州215123）

引 言

隨著嵌入式技術(shù)的飛速發(fā)展，人們對(duì)系統(tǒng)界面的要求日益提高，其中一個(gè)需求就是期望嵌入式設(shè)備的界面也提供類(lèi)似PC上軟件的動(dòng)態(tài)加載界面功能，用戶(hù)可以根據(jù)自己的愛(ài)好來(lái)選擇不同的主題界面，甚至自己來(lái)定制界面的布局、顏色等，圖1就是某開(kāi)源軟件所提供的不同主題的界面。

當(dāng)然，根據(jù)不同的平臺(tái)，動(dòng)態(tài)加載界面有著不同的實(shí)現(xiàn)方式，本文以嵌入式開(kāi)發(fā)平臺(tái)上較為常見(jiàn)的QT 開(kāi)發(fā)環(huán)境為例，引入了一種在QT 嵌入式平臺(tái)上實(shí)現(xiàn)動(dòng)態(tài)界面、定制界面的實(shí)現(xiàn)方式。

圖1 某嵌入式設(shè)備上不同的主題界面

1 主題界面文檔化

雖然不同的主題界面外觀差異很大，但是顯示的元素（如菜單項(xiàng)等）卻是相同的，所不同的是這些元素的布局、外觀等。因此，按照一定的規(guī)則，將不同的主題界面存儲(chǔ)為不同的XML 文檔，詳細(xì)記錄每個(gè)主題界面的元素布局、形狀、色彩或行為等界面相關(guān)的信息。在程序啟動(dòng)時(shí)，或者主題界面切換時(shí)，系統(tǒng)讀取不同的XML 文件，繪制出不同的主題界面。以圖2中的顯示界面為例，其對(duì)應(yīng)的XML文檔如下所示，從中可以看出，該界面包含了字體、時(shí)鐘、狀態(tài)欄、圖片等一系列控件，并且包含各自的屬性。

以上文中出現(xiàn)的imagetype控件為例，它是用來(lái)存儲(chǔ)、顯示圖片的控件，在XML文檔當(dāng)中，其包含了圖片文件名、位置和縮放、顏色格式和大小等信息，如圖3所示。

圖2 XML文檔及主題界面

3 imagetype控件的屬性和外觀

專(zhuān)業(yè)的美工人員可以設(shè)計(jì)出風(fēng)格統(tǒng)一、優(yōu)美的外觀界面，同時(shí)，通過(guò)填空的方式，將界面的所有顯示元素的信息填充至XML 文檔中，以備程序進(jìn)行加載調(diào)用。這些XML文檔的格式需要事先進(jìn)行規(guī)范和定義，包括元素的定義、屬性和行為應(yīng)該是事先規(guī)定好的，否則界面的設(shè)計(jì)與加載就無(wú)從談起。通常來(lái)說(shuō)，應(yīng)該至少定義包括字體、基本控件、基本界面等數(shù)十種元素及其屬性。

2 加載主題界面

在程序的啟動(dòng)階段，通過(guò)加裝相應(yīng)的主題界面，即可實(shí)現(xiàn)顯示不同的主題界面。圖4是讀取并加載界面元素的流程。從圖中可以看出，首先以Map容器的方式創(chuàng)建“界面元素樹(shù)”，然后以遞歸方式解析XML 文檔，每遇到一個(gè)界面元素就實(shí)例化并添加到元素樹(shù)當(dāng)中，同時(shí)繼續(xù)解析該元素的屬性，來(lái)設(shè)置界面元素的屬性（外觀）。如此循環(huán)進(jìn)行，直到解析完整個(gè)文檔為止。

圖4 界面元素加載流程圖

整個(gè)過(guò)程的最終結(jié)果將是一個(gè)樹(shù)，如圖5所示。這棵樹(shù)上的枝葉記錄了界面對(duì)應(yīng)的所有元素信息，包括時(shí)鐘、logo和menu三個(gè)元素控件，同時(shí)每個(gè)元素又包含有自己的屬性。如時(shí)鐘控件的屬性就包括其位置、大小、字體和對(duì)其方式等；menu控件的屬性包括大小、布局、間隔和風(fēng)格等。

圖5 解析XML文檔生成元素樹(shù)

3 切換主題界面

圖6是某開(kāi)源軟件的主題切換模塊。左側(cè)顯示了系統(tǒng)所支持的主題數(shù)，選擇不同的主題，右側(cè)會(huì)顯示其相應(yīng)的縮略圖。當(dāng)用戶(hù)選擇切換主題時(shí)，系統(tǒng)去讀取新的主題XML文檔，并重復(fù)新一輪的界面加載過(guò)程。通常在設(shè)計(jì)切換主題界面時(shí)，如果系統(tǒng)沒(méi)有特殊要求，則會(huì)在更換主題XML文檔之后強(qiáng)制重新啟動(dòng)應(yīng)用，新的界面會(huì)被自動(dòng)加載顯示。

結(jié) 語(yǔ)

本文討論的QT平臺(tái)上動(dòng)態(tài)定制界面的主要技術(shù)，提高了嵌入式設(shè)備的人機(jī)交互友好性，使得UI設(shè)計(jì)與顯示分離開(kāi)，擺脫了傳統(tǒng)嵌入式設(shè)備的呆板界面設(shè)計(jì)方式，可以更快速地提供專(zhuān)業(yè)、統(tǒng)一的設(shè)備界面，已在工程實(shí)踐中證明了該方法的可行性，特別是隨著消費(fèi)類(lèi)電子產(chǎn)品需求的日益發(fā)展，將會(huì)有越來(lái)越多的應(yīng)用領(lǐng)域。然而，由于QT 平臺(tái)特殊性，其并沒(méi)有提供如HTML＋CSS方式的界面解析功能，因此需要開(kāi)發(fā)人員自行進(jìn)行界面解析，這在一定程度上限制了該功能的推廣，也是本方案有待于提高之處。

圖6 主題界面的切換

［1］http：／／doc.qt.nokia.com／4.8-snapshot／qdeclarativeintroduction.html.

［2］http：／／doc.qt.nokia.com／4.8-snapshot／qdeclarativeexamples.html／.

［3］布蘭切特J.C＋＋GUI Qt 4編程［M］.2版.北京：電子工業(yè)出版社，2008.

［4］韋東山.嵌入式Linux應(yīng)用開(kāi)發(fā)完全手冊(cè)［M］.北京：人民郵電出版社，2008.

［5］薩默菲爾德.Qt高級(jí)編程［M］.白建平，等譯.北京：電子工業(yè)出版社，2011.

［6］吳迪.零基礎(chǔ)學(xué)QT 4編程［M］.北京：北京航空航天大學(xué)出版社，2010.