第11章圖形用戶(hù)界面GUI設(shè)計(jì)

1、第11章 圖形用戶(hù)界面（GUI）設(shè)計(jì) 11.1 GUIDE界面環(huán)境界面環(huán)境 11.2 GUI的創(chuàng)建 11.3 GUI菜單設(shè)計(jì)菜單設(shè)計(jì) 11.4 對(duì)話(huà)框設(shè)計(jì)對(duì)話(huà)框設(shè)計(jì) 11.5 綜合案例綜合案例 11.1 GUIDE界面環(huán)境界面環(huán)境 11.1.1 GUIDE啟動(dòng)及界面組成1GUIDE啟動(dòng)啟動(dòng)首頁(yè)首頁(yè)選擇MATLAB主界面菜單“File”“New”“GUI”命令，或點(diǎn)擊工具欄GUIDE圖標(biāo)，或直接在MATLAB命令窗口輸入guide，都可彈出對(duì)話(huà)窗“GUIDE Quick Start”界面，如圖所示。 2GUIDE界面組成界面組成 “GUIDE Quick StartGUIDE Quick Sta

2、rt”界面包括兩個(gè)選項(xiàng)：界面包括兩個(gè)選項(xiàng)：“Create New GUICreate New GUI”（創(chuàng)建新的（創(chuàng)建新的圖形用戶(hù)界面）和圖形用戶(hù)界面）和“Open Existing GUIOpen Existing GUI”（打開(kāi)已存在的圖形用戶(hù)界面）。（打開(kāi)已存在的圖形用戶(hù)界面）。其中其中“Create New GUICreate New GUI”提供四種基本類(lèi)型的提供四種基本類(lèi)型的GUIGUI模板：模板： Black GUIBlack GUI（DefaultDefault）：空白模板（缺?。?。）：空白模板（缺省）。 GUI with UicontrolsGUI with Uicontro

3、ls：帶有控件對(duì)象的：帶有控件對(duì)象的GUIGUI模板。模板。 GUI with Axes and MenuGUI with Axes and Menu：帶有坐標(biāo)軸與菜單的：帶有坐標(biāo)軸與菜單的GUIGUI模板。模板。 Modal Question DialogModal Question Dialog：?jiǎn)柎鹗綄?duì)話(huà)框的：?jiǎn)柎鹗綄?duì)話(huà)框的GUIGUI模板。模板。通過(guò)這些模板可快速創(chuàng)建通過(guò)這些模板可快速創(chuàng)建GUI。選定一種模板以后，它的預(yù)覽效果顯示在右邊。選定一種模板以后，它的預(yù)覽效果顯示在右邊的面板中。譬如選中的面板中。譬如選中“GUI with Uicontrols”，顯示在面板中的預(yù)覽效果如，顯示

4、在面板中的預(yù)覽效果如圖所示圖所示在“GUIDE Quick Start”對(duì)話(huà)窗中，點(diǎn)擊“Create New GUI”選項(xiàng)卡，選擇“Black GUI”選項(xiàng)，打開(kāi)的就是“帶有空白GUI模板的輸出編輯器”窗口，如圖所示。 11.1.2 輸出編輯器輸出編輯器 1控件與組件的功能輸出編輯器中的控件大致可分為兩種：一種為動(dòng)作控件，鼠標(biāo)點(diǎn)擊這些控件時(shí)會(huì)產(chǎn)生相應(yīng)的響應(yīng)；另一種為靜態(tài)控件，是一種不產(chǎn)生響應(yīng)的控件，如文本框等?？丶墓δ苋绫?1-1所示。11.1.3 控件功能與屬性2. 控件屬性每種控件都有一些可以設(shè)置的參數(shù)，用于表現(xiàn)控件的外形、功能及效果，即每種控件都有一些可以設(shè)置的參數(shù)，用于表現(xiàn)控件的外形

5、、功能及效果，即屬性。控件屬性包括屬性名和屬性值，其作用如表屬性。控件屬性包括屬性名和屬性值，其作用如表11-2所示。所示。 11.1.4 界面的存儲(chǔ)及運(yùn)行點(diǎn)擊輸出編輯器界面，工具欄中保存圖標(biāo)，或者選擇菜單“Fiel”“Save as”命令，彈出“Save as”對(duì)話(huà)框，填寫(xiě)用戶(hù)定義的文件名.(如gui)點(diǎn)擊“保存”按鈕，這時(shí)輸出編輯器界面變成名稱(chēng)為“gui.fig”的窗口，如圖所示， 首頁(yè)首頁(yè)保存的同時(shí)會(huì)在當(dāng)前路徑下自動(dòng)產(chǎn)生兩個(gè)文件：一個(gè)是“gui. fig”文件，另一個(gè)是“gui.m”文件。其中，“gui.fig”文件包含對(duì)GUI和GUI組件的完整描述，它也是打開(kāi)輸出編輯器界面“gui.f

6、ig”窗口的文件；“gui.m”文件包含控制GUI的代碼、組件的回調(diào)函數(shù)。 點(diǎn)擊運(yùn)行圖標(biāo)，顯示結(jié)果就是我們所要設(shè)計(jì)的GUI功能界面，如圖所示。 首頁(yè)首頁(yè)11.1.5 回調(diào)函數(shù)回調(diào)函數(shù) 實(shí)現(xiàn)GUI的基本機(jī)制是對(duì)控件的Callback（回調(diào)函數(shù)）屬性編程，當(dāng)在設(shè)計(jì)界面上選中一個(gè)控件后，選擇菜單欄中的“View”“View Callbacks”命令，或點(diǎn)擊鼠標(biāo)右鍵，從彈出的活動(dòng)菜單選擇“View Callback”，就會(huì)出現(xiàn)“Callbacks”、“CreateFcn”、“DeleteFcn”、“ButtonDownFcn”和“KeyPressFcn”子選單項(xiàng)，這些選項(xiàng)都是用來(lái)編寫(xiě)回調(diào)函數(shù)的 首頁(yè)首

7、頁(yè) CallBack：為一般回調(diào)函數(shù)，因不同的控件而不同，譬如，按鈕被按下時(shí)發(fā)生、下拉框改變值時(shí)發(fā)生、sliderbar 拖動(dòng)時(shí)發(fā)生等等。大多數(shù)MATLAB程序代碼都在這里編寫(xiě)，它實(shí)現(xiàn)諸多功能。 CreateFcn：是在控件對(duì)象創(chuàng)建的時(shí)候發(fā)生(一般為初始化樣式，顏色，初始值等)。 DeleteFcn：是在空間對(duì)象被清除的時(shí)候發(fā)生。 ButtonDownFcn：為鼠標(biāo)點(diǎn)擊事件的回調(diào)函數(shù)。 KeyPressFcn：為按鍵事件的回調(diào)函數(shù)。11.2 GUI的創(chuàng)建創(chuàng)建創(chuàng)建GUI主要包括設(shè)計(jì)主要包括設(shè)計(jì)GUI（界面布局）、控件屬性設(shè)置、回調(diào)函數(shù)編寫(xiě)和保存運(yùn)（界面布局）、控件屬性設(shè)置、回調(diào)函數(shù)編寫(xiě)和保存運(yùn)行

8、等步驟。下面以簡(jiǎn)單四則運(yùn)算器界面為例，說(shuō)明用行等步驟。下面以簡(jiǎn)單四則運(yùn)算器界面為例，說(shuō)明用GUIDE創(chuàng)建創(chuàng)建GUI的全過(guò)程。的全過(guò)程。 首頁(yè)首頁(yè)1打開(kāi)輸出編輯器點(diǎn)擊MATLAB主界面工具欄GUIDE圖標(biāo)，選擇空模板“Blank GUI”，點(diǎn)擊“OK”，即可打開(kāi)GUIDE的輸出編輯器設(shè)計(jì)界面“untitled.fig”。 2界面布局添加需要的控件擺放到輸出編輯器添加需要的控件擺放到輸出編輯器“untitled.figuntitled.fig”中合適的位置，對(duì)多個(gè)同樣的中合適的位置，對(duì)多個(gè)同樣的控件，為擺放整齊、選擇等間距，可以打開(kāi)工具欄中的排列控件，為擺放整齊、選擇等間距，可以打開(kāi)工具欄中的排列

9、“Align ObjectsAlign Objects”圖圖標(biāo)，進(jìn)行各種方式處理。并可用鼠標(biāo)選中右下角的版面大小控制句柄來(lái)縮放版面。標(biāo)，進(jìn)行各種方式處理。并可用鼠標(biāo)選中右下角的版面大小控制句柄來(lái)縮放版面。選擇4個(gè)靜態(tài)文本塊“Static Text”，2個(gè)編輯文本塊“Edit Text”，4個(gè)按鈕“Pushbutton按鈕”，分別用鼠標(biāo)拖到“untitled.fig”窗口中，其擺放位置如圖所示。 首頁(yè)首頁(yè)3編輯控件的屬性利用屬性查看器（Property Inspector），設(shè)置各個(gè)控件的參數(shù)。首頁(yè)首頁(yè)4存儲(chǔ)GUIDE輸出編輯器界面點(diǎn)擊菜單欄中的保存圖標(biāo)，在“Save as”對(duì)話(huà)框中填寫(xiě)文件名“

10、yunsuanqi”，單擊“保存”按鈕，則圖的界面最上角的名稱(chēng)變?yōu)椤皔unsuanqi.fig”。此時(shí)在當(dāng)前目錄下，MATLAB將自動(dòng)生成“yunsuanqi.m”和“yunsuanqi.fig”兩個(gè)文件。5編寫(xiě)GUI回調(diào)函數(shù)（Callback）代碼6運(yùn)行結(jié)果產(chǎn)生GUI功能界面點(diǎn)擊文件點(diǎn)擊文件“yunsuanqir.m”工具欄運(yùn)行按鈕，或點(diǎn)擊名稱(chēng)為工具欄運(yùn)行按鈕，或點(diǎn)擊名稱(chēng)為“yunsuanqi.fig”界面中工具欄運(yùn)行按鈕，運(yùn)行結(jié)果產(chǎn)生的具有操作功界面中工具欄運(yùn)行按鈕，運(yùn)行結(jié)果產(chǎn)生的具有操作功能的能的GU I界面，如圖所示。界面，如圖所示。 首頁(yè)首頁(yè)若在圖中第一個(gè)編輯文本框中填寫(xiě)450，第二

11、個(gè)編輯文本框中填寫(xiě)567，點(diǎn)擊“加法”按鈕，則立即顯示出結(jié)果為1017，如圖所示。11.3 GUI菜單設(shè)計(jì)菜單設(shè)計(jì) 利用利用GUIDEGUIDE輸出編輯器工具欄中的菜單圖標(biāo)創(chuàng)建帶有輸出編輯器工具欄中的菜單圖標(biāo)創(chuàng)建帶有“菜單欄菜單欄”的的GUIGUI界面的方法如下：界面的方法如下：首頁(yè)首頁(yè)（1 1）選擇空模板）選擇空模板“Blank GUI”Blank GUI”，點(diǎn)擊，點(diǎn)擊“OK”O(jiān)K”，即可打開(kāi)，即可打開(kāi)GUIDEGUIDE輸出輸出編輯器，如圖所示。編輯器，如圖所示。 （2 2）點(diǎn)擊工具欄上的菜單編輯器圖標(biāo)，打開(kāi)菜單編輯器）點(diǎn)擊工具欄上的菜單編輯器圖標(biāo)，打開(kāi)菜單編輯器“Menu EditorM

12、enu Editor”窗口，如圖所示，并在圖中我們給出了工窗口，如圖所示，并在圖中我們給出了工具欄圖標(biāo)的功能。具欄圖標(biāo)的功能。首頁(yè)首頁(yè)(3(3）在界面）在界面“Menu BarMenu Bar”選項(xiàng)卡中，點(diǎn)擊選項(xiàng)卡中，點(diǎn)擊“To add a menu,To add a menu,”處，或者工具欄中的圖標(biāo)，則窗口中出現(xiàn)菜單圖標(biāo)處，或者工具欄中的圖標(biāo)，則窗口中出現(xiàn)菜單圖標(biāo)“Untitled Untitled 1 1”，再點(diǎn)擊圖標(biāo)，再點(diǎn)擊圖標(biāo)“Untitled 1Untitled 1”，則顯示帶有菜單屬性，則顯示帶有菜單屬性“Menu Menu PropertiesProperties”的界面，如圖

13、所示。的界面，如圖所示。首頁(yè)首頁(yè)（4 4）將圖中）將圖中“Label”Label”選項(xiàng)的菜單名選項(xiàng)的菜單名“Untitled 1”Untitled 1”改為改為“文文件件”，“Tag”Tag”欄選項(xiàng)改為欄選項(xiàng)改為“m_file”m_file”，“Accelerator: Ctrl+”Accelerator: Ctrl+”欄選項(xiàng)改為欄選項(xiàng)改為“F”F”，其它選項(xiàng)默認(rèn)，設(shè)置如圖所示。，其它選項(xiàng)默認(rèn)，設(shè)置如圖所示。 （5）在新建的）在新建的“文件文件”菜單下添加子菜單項(xiàng)：菜單下添加子菜單項(xiàng)：“打開(kāi)打開(kāi)”、“保存保存”和和“退出退出”，且設(shè)置其屬性，且設(shè)置其屬性， 首頁(yè)首頁(yè)（6 6）繼續(xù)添加其它菜單項(xiàng)

14、。）繼續(xù)添加其它菜單項(xiàng)。點(diǎn)擊點(diǎn)擊“Menu Editor”界面中工具欄新建圖標(biāo)，依次添加界面中工具欄新建圖標(biāo)，依次添加“編輯編輯”、“查看查看”、“工具工具”、“幫助幫助”菜單項(xiàng)，并設(shè)定各自菜單項(xiàng)，并設(shè)定各自“Tag”選項(xiàng)（譬如選項(xiàng)（譬如“幫助幫助”中的中的“Tag”選項(xiàng)設(shè)為選項(xiàng)設(shè)為“m_help”，其余類(lèi)似），如圖所示。當(dāng)編輯完所有菜單項(xiàng)以后，單擊，其余類(lèi)似），如圖所示。當(dāng)編輯完所有菜單項(xiàng)以后，單擊圖中的圖中的“OK”按鈕。按鈕。 （7）保存界面并運(yùn)行界面名稱(chēng)變?yōu)椤癵ui1.fig”，如圖所示。 首頁(yè)首頁(yè) （8）改寫(xiě)界面名稱(chēng)（用中文表示）。在輸出編輯器界面中，單擊鼠標(biāo)右鍵，選擇“Proper

15、ty Inspector”，即可打開(kāi)界面屬性窗口“Inspector”。對(duì)窗口的“Name”（標(biāo)題）屬性改為“圖形界面1”，如圖所示。首頁(yè)首頁(yè)（10）通過(guò)菜單編輯窗口上的按鈕“View”，可以查看各菜單項(xiàng)的回調(diào)函數(shù)，也就是Callback 函數(shù)。也可以在M文件gui1.m 中找到回調(diào)函數(shù)，比如“打開(kāi)”的“Tag” 屬性是“m_file_open”，那么它對(duì)應(yīng)的Callback 函數(shù)的名字就是“m_file_open_Callback”。在回調(diào)函數(shù)程序的下方編寫(xiě)代碼，就可激活該菜單項(xiàng)的功能。11.4 對(duì)話(huà)框設(shè)計(jì)對(duì)話(huà)框設(shè)計(jì) 1信息對(duì)話(huà)框（msgbox）格式 msgbox(Message,Title

16、,Icon)說(shuō)明 Message：顯示的信息（字符串）；Title：對(duì)話(huà)框標(biāo)題（字符串）；Icon：對(duì)話(huà)框圖標(biāo)，可選擇none（默認(rèn)值，無(wú)圖標(biāo)）、error（錯(cuò)誤提示圖標(biāo)）、help（幫助提示圖標(biāo)）、warn（警告提示圖標(biāo)）和custom（用戶(hù)自創(chuàng)圖標(biāo)）。首頁(yè)首頁(yè)2錯(cuò)誤對(duì)話(huà)框（errordlg）格式 errordlg(ErrorString,DlgName)說(shuō)明 ErrorString：顯示錯(cuò)誤信息的字符串；DlgName：對(duì)話(huà)框標(biāo)題（字符串）。 3警告對(duì)話(huà)框（warndlg）格式格式 warndlg(WarnString,DlgNamewarndlg(WarnString,DlgName )

17、 )說(shuō)明說(shuō)明 WarnStringWarnString：顯示警告信息的字符串；：顯示警告信息的字符串；DlgNameDlgName：對(duì)話(huà)框標(biāo)：對(duì)話(huà)框標(biāo)題（字符串）題（字符串）首頁(yè)首頁(yè)4幫助對(duì)話(huà)框（helpdlg）格式格式 helpdlg(HelpString,DlgNamehelpdlg(HelpString,DlgName) )說(shuō)明說(shuō)明 HelpStringHelpString：顯示幫助信息的字符串；：顯示幫助信息的字符串；DlgNameDlgName：對(duì)話(huà)框標(biāo)：對(duì)話(huà)框標(biāo)題（字符串）。題（字符串）。5進(jìn)度條對(duì)話(huà)框（waitbar）格式格式 waitbarwaitbar(X, title)(X

18、, title)說(shuō)明說(shuō)明 X為進(jìn)度條的比例長(zhǎng)度，其值必須在為進(jìn)度條的比例長(zhǎng)度，其值必須在0都都1之間；之間；title：顯示：顯示提示信息提示信息 6輸入對(duì)話(huà)框（inputdlg）格式格式 inputdlg(Prompt,Title,Numlines,DefAnsinputdlg(Prompt,Title,Numlines,DefAns,Resize),Resize)說(shuō)明說(shuō)明 PromptPrompt：顯示提示信息（單元數(shù)組）；：顯示提示信息（單元數(shù)組）；TitleTitle：對(duì)話(huà)框標(biāo)題（字符：對(duì)話(huà)框標(biāo)題（字符串）；串）；NumlinesNumlines：指定輸入數(shù)據(jù)的行數(shù)；：指定輸入數(shù)據(jù)的行

19、數(shù)；DefAnsDefAns：是一單元數(shù)組，存儲(chǔ)每：是一單元數(shù)組，存儲(chǔ)每個(gè)輸入數(shù)據(jù)的默認(rèn)值，元素個(gè)數(shù)必須與個(gè)輸入數(shù)據(jù)的默認(rèn)值，元素個(gè)數(shù)必須與Prompt Prompt 所定義的輸入窗口數(shù)相同，所定義的輸入窗口數(shù)相同，所有元素必須是字符串；所有元素必須是字符串；ResizeResize：設(shè)定對(duì)話(huà)框尺寸是否可調(diào)節(jié)（：設(shè)定對(duì)話(huà)框尺寸是否可調(diào)節(jié)（on/offon/off）。）。首頁(yè)首頁(yè)7列表對(duì)話(huà)框（listdlg）格式格式 sel,ok=listdlg (ListStringsel,ok=listdlg (ListString,S),S)說(shuō)明說(shuō)明 ListStringListString 設(shè)置備選項(xiàng)，

20、備選項(xiàng)設(shè)置備選項(xiàng)，備選項(xiàng)S S為字符串或者字符串?dāng)?shù)組。輸入為字符串或者字符串?dāng)?shù)組。輸入?yún)?shù)項(xiàng)還可以添加其它成對(duì)的屬性及屬性值。如：參數(shù)項(xiàng)還可以添加其它成對(duì)的屬性及屬性值。如： NameName設(shè)置對(duì)話(huà)框標(biāo)題；設(shè)置對(duì)話(huà)框標(biāo)題； PromptStringPromptString 設(shè)置提示字符；設(shè)置提示字符； SelectionModeSelectionMode 設(shè)置是否多選，設(shè)置是否多選， singlesingle為單選，為單選， multiplemultiple為多選。為多選。文件選擇成功后，單擊文件選擇成功后，單擊“OKOK”按鈕，系統(tǒng)將選擇好的文件序號(hào)存入相應(yīng)向按鈕，系統(tǒng)將選擇好的文件序號(hào)存

21、入相應(yīng)向量量selsel，參數(shù)，參數(shù)okok的值為的值為1 1。8問(wèn)題對(duì)話(huà)框（questdlg）格式格式 questdlgquestdlg(Question,Title ) %(Question,Title ) %默認(rèn)值，回答按鈕有三個(gè)：默認(rèn)值，回答按鈕有三個(gè)：YesYes、NoNo、CancelCancelquestdlgquestdlg(Question,Title,Btn1,Btn2,Btn3,Default) %(Question,Title,Btn1,Btn2,Btn3,Default) %自定義回答按鈕自定義回答按鈕說(shuō)明說(shuō)明 Question：顯示的問(wèn)題信息（字符串）；：顯示的問(wèn)題

22、信息（字符串）；Title：對(duì)話(huà)框標(biāo)題（字符：對(duì)話(huà)框標(biāo)題（字符串）。串）。 9 打開(kāi)文件對(duì)話(huà)框（uigetfile）格式格式 FileName,PathName,FilterIndex = uigetfile(FilterSpecFileName,PathName,FilterIndex = uigetfile(FilterSpec,Title),Title)FileName,PathName,FilterIndex = uigetfile(FilterSpecFileName,PathName,FilterIndex = uigetfile(FilterSpec,Title,File),Ti

23、tle,File)說(shuō)明說(shuō)明 FilterSpec：文件類(lèi)型設(shè)置；：文件類(lèi)型設(shè)置；Title：對(duì)話(huà)框標(biāo)題；：對(duì)話(huà)框標(biāo)題；File：默認(rèn)指向的文件：默認(rèn)指向的文件名；名；FileName：返回的文件名；：返回的文件名；PathName：返回的文件的路徑名；：返回的文件的路徑名；FilterIndex：選擇的文件類(lèi)型。：選擇的文件類(lèi)型。 首頁(yè)首頁(yè)10文件保存對(duì)話(huà)框（uiputfile）格式格式 FileName,PathName,FilterIndex = uiputfile(FilterSpecFileName,PathName,FilterIndex = uiputfile(FilterSpec,Title),Title)FileName,PathName,