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

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

2、面包括兩個選項：界面包括兩個選項：“Create New GUICreate New GUI”（創(chuàng)建新的（創(chuàng)建新的圖形用戶界面）和圖形用戶界面）和“Open Existing GUIOpen Existing GUI”（打開已存在的圖形用戶界面）。（打開已存在的圖形用戶界面）。其中其中“Create New GUICreate New GUI”提供四種基本類型的提供四種基本類型的GUIGUI模板：模板： Black GUI Black GUI（DefaultDefault）：空白模板（缺?。?。）：空白模板（缺?。?GUI with Uicontrols GUI with Uicontrols

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

4、在面板中的預(yù)覽效果如圖所示圖所示在“GUIDE Quick Start”對話窗中，點擊“Create New GUI”選項卡，選擇“Black GUI”選項，打開的就是“帶有空白GUI模板的輸出編輯器”窗口，如圖所示。 11.1.2 輸出編輯器輸出編輯器 1控件與組件的功能輸出編輯器中的控件大致可分為兩種：一種為動作控件，鼠標(biāo)點擊這些控件時會產(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、、功能及效果，即屬性?？丶傩园▽傩悦蛯傩灾担渥饔萌绫韺傩??？丶傩园▽傩悦蛯傩灾担渥饔萌绫?1-2所示。所示。 11.1.4 界面的存儲及運(yùn)行點擊輸出編輯器界面，工具欄中保存圖標(biāo)，或者選擇菜單“Fiel”“Save as”命令，彈出“Save as”對話框，填寫用戶定義的文件名.(如gui)點擊“保存”按鈕，這時輸出編輯器界面變成名稱為“gui.fig”的窗口，如圖所示， 保存的同時會在當(dāng)前路徑下自動產(chǎn)生兩個文件：一個是“gui. fig”文件，另一個是“gui.m”文件。其中，“gui.fig”文件包含對GUI和GUI組件的完整描述，它也是打開輸出編輯器界面“gui.fig”窗

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

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

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

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

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

11、果為1017，如圖所示。11.3 GUI菜單設(shè)計菜單設(shè)計 利用利用GUIDEGUIDE輸出編輯器工具欄中的菜單圖標(biāo)創(chuàng)建帶有輸出編輯器工具欄中的菜單圖標(biāo)創(chuàng)建帶有“菜單欄菜單欄”的的GUIGUI界面的方法如下：界面的方法如下：（1 1）選擇空模板）選擇空模板“Blank GUI”Blank GUI”，點擊，點擊“OK”O(jiān)K”，即可打開，即可打開GUIDEGUIDE輸出輸出編輯器，如圖所示。編輯器，如圖所示。 （2 2）點擊工具欄上的菜單編輯器圖標(biāo)，打開菜單編輯器）點擊工具欄上的菜單編輯器圖標(biāo)，打開菜單編輯器“Menu EditorMenu Editor”窗口，如圖所示，并在圖中我們給出了工窗口，如

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

13、選項的菜單名選項的菜單名“Untitled 1”Untitled 1”改為改為“文文件件”，“Tag”Tag”欄選項改為欄選項改為“m_file”m_file”，“Accelerator: Ctrl+”Accelerator: Ctrl+”欄選項改為欄選項改為“F”F”，其它選項默認(rèn)，設(shè)置如圖所示。，其它選項默認(rèn)，設(shè)置如圖所示。 （5）在新建的）在新建的“文件文件”菜單下添加子菜單項：菜單下添加子菜單項：“打開打開”、“保存保存”和和“退出退出”，且設(shè)置其屬性，且設(shè)置其屬性， （6 6）繼續(xù)添加其它菜單項。）繼續(xù)添加其它菜單項。點擊點擊“Menu Editor”界面中工具欄新建圖標(biāo)，依次添加界

14、面中工具欄新建圖標(biāo)，依次添加“編輯編輯”、“查看查看”、“工具工具”、“幫助幫助”菜單項，并設(shè)定各自菜單項，并設(shè)定各自“Tag”選項（譬如選項（譬如“幫助幫助”中的中的“Tag”選項設(shè)為選項設(shè)為“m_help”，其余類似），如圖所示。當(dāng)編輯完所有菜單項以后，單擊，其余類似），如圖所示。當(dāng)編輯完所有菜單項以后，單擊圖中的圖中的“OK”按鈕。按鈕。 （7）保存界面并運(yùn)行界面名稱變?yōu)椤癵ui1.fig”，如圖所示。 （8）改寫界面名稱（用中文表示）。在輸出編輯器界面中，單擊鼠標(biāo)右鍵，選擇“Property Inspector”，即可打開界面屬性窗口“Inspector”。對窗口的“Name”（標(biāo)題）

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

16、標(biāo)，可選擇none（默認(rèn)值，無圖標(biāo)）、error（錯誤提示圖標(biāo)）、help（幫助提示圖標(biāo)）、warn（警告提示圖標(biāo)）和custom（用戶自創(chuàng)圖標(biāo)）。2錯誤對話框（errordlg）格式 errordlg(ErrorString,DlgName)說明 ErrorString：顯示錯誤信息的字符串；DlgName：對話框標(biāo)題（字符串）。 3警告對話框（warndlg）格式格式 warndlg(WarnString,DlgName )warndlg(WarnString,DlgName )說明說明 WarnStringWarnString：顯示警告信息的字符串；：顯示警告信息的字符串；DlgName

17、DlgName：對話框標(biāo)：對話框標(biāo)題（字符串）題（字符串）4幫助對話框（helpdlg）格式格式 helpdlg(HelpString,DlgName)helpdlg(HelpString,DlgName)說明說明 HelpStringHelpString：顯示幫助信息的字符串；：顯示幫助信息的字符串；DlgNameDlgName：對話框標(biāo)：對話框標(biāo)題（字符串）。題（字符串）。5進(jìn)度條對話框（waitbar）格式格式 waitbar(X, title)waitbar(X, title)說明說明 X為進(jìn)度條的比例長度，其值必須在為進(jìn)度條的比例長度，其值必須在0都都1之間；之間；title：顯示：

18、顯示提示信息提示信息 6輸入對話框（inputdlg）格式格式 inputdlg(Prompt,Title,Numlines,DefAns,Resize)inputdlg(Prompt,Title,Numlines,DefAns,Resize)說明說明 PromptPrompt：顯示提示信息（單元數(shù)組）；：顯示提示信息（單元數(shù)組）；TitleTitle：對話框標(biāo)題（字符：對話框標(biāo)題（字符串）；串）；NumlinesNumlines：指定輸入數(shù)據(jù)的行數(shù)；：指定輸入數(shù)據(jù)的行數(shù)；DefAnsDefAns：是一單元數(shù)組，存儲每：是一單元數(shù)組，存儲每個輸入數(shù)據(jù)的默認(rèn)值，元素個數(shù)必須與個輸入數(shù)據(jù)的默認(rèn)值，

19、元素個數(shù)必須與Prompt Prompt 所定義的輸入窗口數(shù)相同，所定義的輸入窗口數(shù)相同，所有元素必須是字符串；所有元素必須是字符串；ResizeResize：設(shè)定對話框尺寸是否可調(diào)節(jié)（：設(shè)定對話框尺寸是否可調(diào)節(jié)（on/offon/off）。）。7列表對話框（listdlg）格式格式 sel,ok=listdlg (ListString,S)sel,ok=listdlg (ListString,S)說明說明 ListStringListString設(shè)置備選項，備選項設(shè)置備選項，備選項S S為字符串或者字符串?dāng)?shù)組。輸入為字符串或者字符串?dāng)?shù)組。輸入?yún)?shù)項還可以添加其它成對的屬性及屬性值。如：參數(shù)項

20、還可以添加其它成對的屬性及屬性值。如：NameName設(shè)置對話框標(biāo)題；設(shè)置對話框標(biāo)題；PromptStringPromptString設(shè)置提示字符；設(shè)置提示字符；SelectionModeSelectionMode設(shè)置是否多選，設(shè)置是否多選，singlesingle為單選，為單選，multiplemultiple為多選。為多選。文件選擇成功后，單擊文件選擇成功后，單擊“OKOK”按鈕，系統(tǒng)將選擇好的文件序號存入相應(yīng)向按鈕，系統(tǒng)將選擇好的文件序號存入相應(yīng)向量量selsel，參數(shù)，參數(shù)okok的值為的值為1 1。8問題對話框（questdlg）格式格式 questdlg(Question,Titl

21、e ) %questdlg(Question,Title ) %默認(rèn)值，回答按鈕有三個：默認(rèn)值，回答按鈕有三個：YesYes、NoNo、CancelCancelquestdlg(Question,Title,Btn1,Btn2,Btn3,Default) %questdlg(Question,Title,Btn1,Btn2,Btn3,Default) %自定義回答按鈕自定義回答按鈕說明說明 Question：顯示的問題信息（字符串）；：顯示的問題信息（字符串）；Title：對話框標(biāo)題（字符：對話框標(biāo)題（字符串）。串）。 9 打開文件對話框（uigetfile）格式格式 FileName,Pat

22、hName,FilterIndex = uigetfile(FilterSpec,Title)FileName,PathName,FilterIndex = uigetfile(FilterSpec,Title)FileName,PathName,FilterIndex = uigetfile(FilterSpec,Title,File)FileName,PathName,FilterIndex = uigetfile(FilterSpec,Title,File)說明說明 FilterSpec：文件類型設(shè)置；：文件類型設(shè)置；Title：對話框標(biāo)題；：對話框標(biāo)題；File：默認(rèn)指向的文件：默認(rèn)指向的文件名；名；FileName：返回的文件名；：返回的文件名；PathName：返回的文件的路徑名；：返回的文件的路徑名；FilterIndex：選擇的文件類型。：選擇的文件類型。 10文件保存對話框（uiputfile）格式格式 FileName,PathName,FilterIndex = uiputfile(FilterSpec,Title)FileName,PathName,FilterIndex = uiputfile(FilterSpec,Title)FileName,PathName,F