GUIDesignStudio教程

1、如何制作界面圖在實(shí)際開發(fā)中，我們常常會(huì)用很多工具， 繪制界面圖。用于描述我們的產(chǎn)品的某個(gè)功能 對應(yīng)的界面，將來會(huì)是什么樣子?？梢允褂玫墓ぞ吆芏啵╲isio、smartdraw 等），也有用excel畫框圖，來標(biāo)明程序的各個(gè)區(qū)域的。其實(shí)使用 gui design studio，可以很容易的話界面圖。不僅輕松，而且十分的真實(shí)，既獲得一個(gè)很好的效果，也能減少溝通上的一些不便。不僅可以向非開發(fā)人員展示，也可以向開發(fā)人員展示你的設(shè)計(jì)。1 新建設(shè)計(jì)首i 背！ Vvxi<a-a ：-G0 Fil*I冇 /I說“可 :0 霊誌 奔tj;e to GUI Design StudioHunning piol

2、oflypEiWhen Rii W a <1皈n.賈 ch&a«r> eimeri thoM Xh 恤 giWi &n 曲耳寸屈前£ m # pnaitflign windyw耳#thqk H 別吐 用h 母 曲瞬 and 曲口 巒 can ctck on bunont Do navi典誕 belweeo spurns n vignpME wnGiethng StartedTdke fieQukl; SKdrt TuIjqmI hvm Ihe Hep nwu to gel hanvkdr 利出i mosfl 百 lheThen open Ihp

3、stifle pnDcii !，聲hNM I hey twe-砧an put togeibv 4nd rud ihe H-dp nurwHl to tham aboU ad2«d 呻t 古.AnMtAtianTYou C4n4mA atepuimngi q說 rwJatow and dio&M bohd«wack打開gui design studio ，其默認(rèn)會(huì)打開 welcome工程。由于我們只是做一個(gè)界面效果圖，所以不會(huì)用到工程那一塊的功能。我們就直接使用 File菜單下的new菜單項(xiàng)（CTRL+N ）新建一個(gè)設(shè)計(jì)。添加界面控件沂 i« si : .n

4、|H ； -J J! Si 選壯 % % p 口 聲 e ®' t iff!n l lLJnm盞連壇IR 瘩動(dòng)條 設(shè)計(jì)網(wǎng)軽際尺旬進(jìn)度 列舉角.見 chec Kbox 和 Ltdiobox oftice2007 鳳棺 標(biāo)簽面板&hd Tables.r«btOpt I 阿$ Ribban B*rFr«»£ «nd Divid«rIndicttri gd Ku1f詈Luts. Trt*sNiai;l*WindwI imd Di tlc1 竄偉豐i1 hjy JttTwt *nd E4it客簽豐二述入推TooLVtr

5、t «&d Menus工具舅和囲£單| Mir/rljii UiJoJ-J |r>右邊的面板叫設(shè)計(jì)器面板,它由多個(gè)頁簽構(gòu)成。分別對應(yīng)的功能是：工程面板、元素面板、圖標(biāo)面板、注釋面板、故事板、備注面板。而我們要用的是第二個(gè)面板元素面板”。在這個(gè)面板上分為上下兩部分， 上部分是一個(gè)分類列表， 下部分為各個(gè)分類下的元素。 當(dāng)你選擇一個(gè)分類后，下面的面板就會(huì)顯示該分類的元素。要將元素添加到設(shè)計(jì)文檔中，有兩種方法。i）用鼠標(biāo)雙擊要加入的元素;2）用鼠標(biāo)單選要加入的元素，不要放鼠標(biāo)左鍵，將對應(yīng)的元素拖拉到文檔中。整個(gè)設(shè)計(jì)文檔中間有一個(gè)紅色線條圍成的矩形，這個(gè)區(qū)域代表屏幕區(qū)

6、域。 在這個(gè)區(qū)域里的元素，在模擬器運(yùn)行中將顯示在屏幕中， 對于不在這個(gè)區(qū)域的元素將不會(huì)顯示。 那么其他 區(qū)域到底放什么呢，主要是放置在作為事件等動(dòng)作，觸發(fā)后被切換進(jìn)入屏幕區(qū)的元素。我們拖拉一個(gè)窗體作為整個(gè)設(shè)計(jì)的開始，你會(huì)發(fā)現(xiàn)這個(gè)窗體邊緣有淡淡的綠色。這個(gè)綠色表示是整個(gè)設(shè)計(jì)的主元素，默認(rèn)的情況studio認(rèn)為第一個(gè)就是主元素。當(dāng)然你也可以使展現(xiàn)的起始元素。如下圖所用F10或使用右鍵菜單來指明主元素（此時(shí)淡綠色會(huì)變?yōu)樯罹G色）。主元素是模擬器作為 顯示的起始元素，也是當(dāng)該設(shè)計(jì)作為其他設(shè)計(jì)文檔的組件時(shí)候， 示:Sp tee EvenlyMake Same SizLtytrScreen CanvaE S

7、i ze .Fit Scrttn Cutei W El««*nts好了我們模擬一個(gè)制作一個(gè)登錄界面。雙擊拖出的主窗體，則會(huì)彈出屬性編輯器（所有的設(shè)計(jì)元素，雙擊后都會(huì)彈出屬性窗體， 當(dāng)然你也可以選擇點(diǎn)右鍵菜單來完成該工作），我們輸入“xxxx協(xié)同辦公系統(tǒng)”，其它屬性不用修改。依此類推，我們放入標(biāo)簽和文本輸入窗，來完成用戶名和密碼。最后加入一個(gè)按鈕， 將它的文本改成登錄。效果如下：2 添加圖標(biāo)登錄按鈕看上去比較平淡，一般的程序在按鈕旁都有圖標(biāo)的。所以我們也想加入圖標(biāo)。這里我們直接使用 studio自帶的圖標(biāo)。我們選擇設(shè)計(jì)面板的第三個(gè)頁簽（Icons）,這個(gè)頁簽主要是上中下三部分

8、構(gòu)成，上部分是分類列表，中間是過濾條件（可以通過文件大小和顏色深度來過濾），下部分則是圖標(biāo)列表。我們選擇 toolbar類別在里面拖一個(gè)人物圖標(biāo)出來。浙建圏標(biāo)按鈕他+M緻 3業(yè)一狂曙略ffia昭才皿%0鬲® X. H*r2) x，：=Vy昌If游£酹彫出* =,gT ©1=Xc VelcMit _| DcicwtimiiTaclbitrs<a ia cx在圖標(biāo)列表上方有個(gè)工具條1,分別是新建圖標(biāo)、編輯圖標(biāo)、刷新列表、和刪除圖標(biāo)”。也就是說我們在這里可以維護(hù)這個(gè)圖標(biāo)庫，可以 通過studio提供的工具，自己來加入圖標(biāo)和修改現(xiàn)有的圖標(biāo)。4.重用已有程序的界面元素

9、其實(shí)我們很多的設(shè)計(jì)都不是白手起家，一般的情況都是修改原有的界面或基于原有的界面做改進(jìn)。那么從新使用studio , 一個(gè)一個(gè)元素的拖拉和擺放還原原先的界面的話，工作量是驚人的，細(xì)節(jié)調(diào)整工是巨大的。有沒有什么好的方法重用原有的界面呢？答案是有！最好的方式就是截圖。 在這里有三種方法使用屏幕截圖，第一種：使用截圖軟件先將圖截好， 然后通過design菜單下的add Bitmap菜單命令，完成圖片的插入。 第二 種方法：將截后的圖片放在工程目錄下，然后直接拖動(dòng)出來。第三種：現(xiàn)截現(xiàn)用，就是截完 圖后，使用工程面板下的paste img from clipboard命令，存放在工程目錄下，然后拖動(dòng)到設(shè)計(jì)

10、中。If 像文件我這里演示的是拷貝的左邊背景圖，其它界面是類似的，只要先前規(guī)劃好界面大小即可。5導(dǎo)出圖片當(dāng)我們的界面設(shè)計(jì)好后， 要放入設(shè)計(jì)文檔中，此時(shí)我們可以將我們先前制作的gui文檔,導(dǎo)出成圖片，然后就可以插入到設(shè)計(jì)文檔中了。Edit ¥irr Pr0j<ctpiSiaql«t4r 和趴ir«-tlrl+XOp«n. . Ctrl*CCl«i«i«ESt*CtrltSStr* Ax. . AllCirL*Shift*SCr««<« Di9.tF：iila.ii«HL Fil«.Gtntr it-t Dmwal.ligIfrv Frtjitct-. Ot«R Frckjuct . Cleit Pr4j«c|lFriedClrl*TPriat FrmwPrint S*t罟恥曲就Filtl*Rtc-tnl Frojtell*Fr«f«r*M4t Ei 1丨 'll打開設(shè)計(jì)好的gui文檔，選擇File下的Export嘴菜單項(xiàng)。在彈出來的導(dǎo)出窗體，選