人,都是視覺化的動物!有時候寫程式,真的會寫得很無聊,因為沒有美美的軟體畫面,看著那堆黑底白字跳動,千辛萬苦最後只跑出一個對的數字,那種空虛感真是油然而生,好吧!多多少少混著一點點成就感。
這幾天玩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
QT的介紹得很好懂,感謝
哈哈 很開心你這麼說。:)
我從你舊站連過來的
謝謝你的資訊 讓我學了不少招
八月退伍 九月才去歐洲洽公回來 歐洲消費真的太高了
最近才剛開始學QT
在歐洲打拼加油啊
呵呵 那我們一起加油囉:)
I appreciate, cause I found exactly what I was looking for. You’ve ended my 4 day long hunt! God Bless you man. Have a nice day. Bye
Thank you for your post,but I left only one msg from you.
Because too many comments more than 100msgs from the same account is not good to me.