♥ 學習筆記Learning 程式語言 Coding

[程式] QT- 視覺化使用者介面設計(GUI) 軟體介面自己畫,來自創元件吧!

人,都是視覺化的動物!有時候寫程式,真的會寫得很無聊,因為沒有美美的軟體畫面,看著那堆黑底白字跳動,千辛萬苦最後只跑出一個對的數字,那種空虛感真是油然而生,好吧!多多少少混著一點點成就感。

這幾天玩QT,玩得很開心,雖然自己之前寫的都是程式黑手在做的事情,但是那堆像是火星文一樣的程式碼,在經過編譯器的巧手之後,就會變成一個個視覺化的軟體介面,最酷的是,QT所開發出來的軟體,屬於跨平台支援的,意思是當你寫好了後,丟進MAC,就會變成美美的MAC版應用程式;丟進WIN7就變成了WIN7版的應用程式,毫無違和感。

當然,我們也可以跟官方書籍一樣,搞得很花俏,用個粉紅色或咖啡色這樣。
可以輕易的做出屬於個人Style的軟體介面,或者是可以學學官方網站示範的那招,連圖形都自己畫。

最棒的是,因為蕾咪以前喜歡設計網站,而Qt的軟體介面設計,其實是以XML語言為主。所以,在一個團隊中合作開發新軟體時,往往會有這樣的分工,包含「使用者介面設計師」、「軟體開發工程師」等,兩者的合作,就能做出美美又好用的軟體工具了;常見的是,許多專業的使用者軟體介面設計師,是純設計出生的,所以並不需要太高難度的程式基礎,只要有敢接觸網站設計部分語法的能力,就可能可以勝任這個工作。

在這裡,我們需要有一些簡單的概念。
在網站設計的時候,圖形往往是存放在一個image資料夾,使用類似「嵌入」的方式呈現在網頁上。
因此,我們常常會使用一些固定的路徑,讓不同的網頁可以找到同一個圖片來顯示。

而在軟體開發時,QT裡面同樣也有個資源檔,附檔名是*.qrc,裡頭同樣存放著一個image資料夾,供軟體執行時存取,這裡面就儲存著,一些軟體元件設計師自行設計好的圖形元件,屬於比較完全自創的設計。
看看這個♥愛心的例子,不管是軟體顯示或系統工具列,都是呈現♥愛心這個圖形。

image

而如果是採用預設的軟體介面設計時,事實上,QT也提供了一個叫做QT Designer的工具,只要「拖拖拉拉」就可以設計完一個軟體工具介面,甚至只要再學習一點點「你丟我接」的概念,就可以做出簡單的小工具了。

image

因此,為了開始設計一些美美的介面,蕾咪需要練習一些簡單的語法。

在開始設計介面之前,請先想像自己是一場電影的導演

這時候我們需要關心幾件事情,同時也來學習Graphics View的架構。

1. 場景 Scene      (拍電影的場地)
2. 角色 Item          (場地中的角色與物品等)
3. 顯示區域 View (其實就是觀眾真正能看的到的東東啦!請想像它是你的攝影機。)

透過這樣的概念,我們一一來介紹如何使用。

1. 場景 Scene
型別:QGraphicsScene

場景裡面,我們同時需要考量的是各個角色的位置與工作分配,管理好彼此間的互動,藉此呈現一幕好電影。
因此,場景是我們最重要的介面,用來管理與分配工作給各個角色;QT預設Binary Space Partitioning Tree來做角色的管理動作。

2. 角色 Item
型別:QGraphicsItem

在場景裡面上演的角色,自然就是我們的演員了。
別忘了我們是能夠互動的軟體介面,因此,大部分的角色都支援滑鼠或鍵盤的互動功能。^^

3. 顯示畫面
型別:QGraphicsView

當導演指示攝影師操作畫面時,我們可以自由的選擇要用甚麼樣的視角去呈現,並且是否要縮放或特寫;因此,對於軟體的使用者而言,它們真正能接觸到的就是View這一塊,不同於一般電影的概念是 軟體本身是具有互動特性的,因此,View也同時是接收互動的區域,再藉由View告知Scene後,Scene再統籌各個Item去做出互動。

# 座標系統
1. 場景座標系統→決定每個角色的實際位置。
2. 角色座標系統→以角色為中心點,讓自己知道自己在場景的哪個位置。
3. 顯示畫面座標系統→決定你的攝影機要拍攝場景的哪一部分。

有了這些大致的概念後,再來好好的玩玩介面設計囉!(>  W  <)O
以下有非常多實用的參考資料,大家也可以點進去看看囉!

 

※參考資料(Reference)

[1] 解析QT資源文件使用方式 http://mobile.51cto.com/symbian-270121.htm

[2] Qt4 : Gossip: QT 資源系統 http://caterpillar.onlyfun.net/Gossip/Qt4Gossip/QtResourceSystem.html

[3] Glade – A User Interface Designer http://glade.gnome.org/

[4] How to create dynamic QML component by XML

http://www.developer.nokia.com/Community/Wiki/How_to_create_dynamic_QML_component_by_XML

[5] 使用 Qt GraphicsView 顯示 OpenNI 影像資料 http://kheresy.wordpress.com/2011/08/18/show_maps_of_openni_via_qt_graphicsview/

[6] Graphics View Framework http://doc.qt.digia.com/4.7/graphicsview.html

About the author

蕾咪

蕾咪,來自台東,卻不定期旅居歐洲的工程師女孩,身兼作家、部落客、創業家等多重身份。畢業於台大電子所,曾在義大利商與美商擔任研發工程師;走訪世界後,發現對台灣有段割捨不了的愛,讓我們一起努力成為想要的自己吧!:) 合作邀稿請聯繫:ramihaha@gmail.com

7 Comments

Leave a Comment