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

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

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

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

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

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

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

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

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

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

這時候我們需要關心幾件事情，同時也來學習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