QT平臺上的動態(tài)可定制界面設(shè)計

安 峰

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

引 言

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

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

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

1 主題界面文檔化

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

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

圖2 XML文檔及主題界面

3 imagetype控件的屬性和外觀

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

2 加載主題界面

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

圖4 界面元素加載流程圖

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

圖5 解析XML文檔生成元素樹

3 切換主題界面

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

結(jié) 語

本文討論的QT平臺上動態(tài)定制界面的主要技術(shù)，提高了嵌入式設(shè)備的人機(jī)交互友好性，使得UI設(shè)計與顯示分離開，擺脫了傳統(tǒng)嵌入式設(shè)備的呆板界面設(shè)計方式，可以更快速地提供專業(yè)、統(tǒng)一的設(shè)備界面，已在工程實(shí)踐中證明了該方法的可行性，特別是隨著消費(fèi)類電子產(chǎn)品需求的日益發(fā)展，將會有越來越多的應(yīng)用領(lǐng)域。然而，由于QT 平臺特殊性，其并沒有提供如HTML＋CSS方式的界面解析功能，因此需要開發(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)用開發(fā)完全手冊［M］.北京：人民郵電出版社，2008.

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

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