matlab-GUI-操作講義-圖形用戶界面設(shè)計.ppt

1、七.圖形用戶界面,本章主要內(nèi)容,圖形用戶界面的設(shè)計原則和一般步驟 圖形用戶界面設(shè)計 圖形用戶界面設(shè)計工具應(yīng)用 M函數(shù)文件實現(xiàn)圖形用戶界面,7.1 圖形用戶界面的設(shè)計原則和一般步驟,圖形用戶界面就是通過窗口、選單、按鈕、文字說明等對象構(gòu)成一個美觀的界面，提供用戶利用鼠標(biāo)或鍵盤方便地實現(xiàn)操作。 MATLAB設(shè)計圖形用戶界面的方法有兩種：使用可視化的界面環(huán)境（圖形用戶界面設(shè)計工具）和通過編寫程序。,7.1.1 設(shè)計原則,1.簡單性 設(shè)計界面時，應(yīng)力求簡捷、直觀、清晰 地體現(xiàn)出界面的功能和特征。窗口數(shù)目盡 量少，力避不同窗口間來回切換；多采用 圖形，少用數(shù)值；不要出現(xiàn)可有可無的功 能。,7.1.1 設(shè)

2、計原則（續(xù)）,2.一致性 兩層含義：一指自己設(shè)計的界面風(fēng)格要 盡量一致；二指新設(shè)計的界面要與其他已有 的界面風(fēng)格要一致。一般習(xí)慣圖形區(qū)在界面 左側(cè)，控制區(qū)在右側(cè)。,7.1.1 設(shè)計原則（續(xù)）,3. 習(xí)常性 設(shè)計界面時，應(yīng)盡量使用人們所熟悉 的標(biāo)志和符號，便于用戶使用。 4. 其他考慮因素 除了以上靜態(tài)性能之外，還應(yīng)注意界 面的動態(tài)性能：界面對用戶操作的響應(yīng)要 迅速、連續(xù)；對持續(xù)時間較長的運算要給 出等待時間提示，并允許用戶中斷運算。,7.1.2 一般制作步驟,界面制作包括界面設(shè)計和程序?qū)崿F(xiàn)。 分析界面所要實現(xiàn)的主要功能，明確設(shè)計任務(wù)； 繪界面草圖，注意從使用者的角度來考慮界面布局； 按構(gòu)思的草

3、圖，上機制作靜態(tài)界面； 編寫界面動態(tài)功能程序。,7.2 圖形用戶界面設(shè)計,7.2.1 可視化的界面環(huán)境 MATLAB6.5版本提供的GUI設(shè)計工具較前面的版本有較大的改善，設(shè)計界面變化很大。打開GUI設(shè)計工具的方法有以下幾種： (1) 選擇菜單“File”“ New”“GUI”命令； (2) 在指令窗口輸入以下命令： guide 打開空白設(shè)計工作臺 guide FN 在工作臺中打開文件名為FN 的用戶界面,注意：在guide指令作用下，待打開的文件名不分字母的大小寫。,7.2 圖形用戶界面設(shè)計（續(xù)）,打開的GUI啟動界面提供新建界面（Create New GUI）和打開已有界面文件（Open

4、Existing GUI）的屬性頁。新建界面可以選擇空白界面、包含有控件的模板界面、包含有軸對象和菜單的模板界面、標(biāo)準(zhǔn)詢問窗口等選項。 選擇任意一項都會打開GUI設(shè)計工作臺，對界面靜態(tài)組成部分進行的具體的修改工作都是在工作臺實現(xiàn)的。,7.2 圖形用戶界面設(shè)計（續(xù)）,如在指令窗鍵入：guide，則可得到如下GUI設(shè)計工 具的啟動界面：,空白界面,有控件的模板界面,有軸對象和菜單的模板界面,標(biāo)準(zhǔn)詢問窗口,7.2 圖形用戶界面設(shè)計（續(xù)）,若激活打開已有界面文件（Open Existing GUI） 的屬性頁，則可通過打開文件瀏覽器（Browse）選 定需打開文件并打開，主窗口則顯示最近打開的界 面文

5、件的列表。,最近打開的界面文件列表,打開文件瀏覽器,7.2 圖形用戶界面設(shè)計（續(xù)）,如在新建界面中選擇“Blank GUI (Default)”，然后單擊“OK”按鈕，就會出 現(xiàn)如下的GUI設(shè)計工作臺:,7.2 圖形用戶界面設(shè)計（續(xù)）,GUI設(shè)計工作臺有4個功能區(qū)：菜單條、編 輯工具條、控件模板區(qū)、設(shè)計工作區(qū)。,菜單條,編輯工具條,控件模板區(qū),設(shè)計工作區(qū),7.2 圖形用戶界面設(shè)計（續(xù)）,在工具欄主要提供了六個工具：對象對齊 工具、菜單編輯器、文件編輯器、屬性編 輯器、界面激活工具和對象瀏覽器，單擊 這六個按鈕就會出現(xiàn)相應(yīng)的窗口。,對象對齊工具,菜單編輯器,文件編輯器,屬性編輯器,對象瀏覽器,運

6、行界面,7.2.2 創(chuàng)建用戶菜單,1.菜單編輯 在GUI設(shè)計工作臺的菜單條選擇“Tool” ”Menu Editor”或單擊工具欄“Menu Editor”按鈕，就會出現(xiàn)菜單編輯器窗口。,新建菜單,新建子菜單,菜單左、右移,菜單上、下移,刪除菜單,填寫菜單名，如果在前面加“Y軸0,2)。 （2）在點擊【Grid on】或【Grid off】鍵時，在軸上 畫出或刪除“分格線”；缺省時無分格線。 （3）在菜單【Options】下，有2個下拉菜單【Box on】和【Box off】；缺省時為Box off狀態(tài)。 （4）所設(shè)計的界面和其上圖形對象、控件對象都按比例縮放。,7.3 圖形用戶界面設(shè)計工具應(yīng)

7、用（續(xù)）,界面最終效果圖如下所示：,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,由于本例的設(shè)計界面清晰、要求明確，所以 無需進行功能分析和繪制草圖，而可直接進 入界面制作階段。,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,使用“guide”命令啟動GUI界面，選擇“Blank GUI”出現(xiàn)GUI設(shè)計工作臺，調(diào)整圖形大小，將界面窗口左邊的控件模板區(qū)中的控件拖放到設(shè)計工作區(qū)中。 放置以下控件：一個坐標(biāo)軸、兩個靜態(tài)文本框、一個可編輯文本框、兩個按鈕；然后打開對象對齊工具對齊各控件，界面布局如下圖。,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,2. 設(shè)置控件屬性 雙擊工作區(qū)

8、及控件可引出圖形窗和相應(yīng)控件的“屬性編輯框（Property Inspector)”。 在圖形窗的屬性編輯框中，設(shè)置如下屬性值： Name Myguil %圖形窗的名稱 Resize on %圖形窗可以縮放 Tag figuer1 %生成handles.figure1域存放圖形窗句柄,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,在軸屬性編輯框中，設(shè)置如下屬性值： Units normalized %采用相對度量單位，縮放時保持比例 Box off %坐標(biāo)軸不封閉 Tag axes1 %生成handles.axes1域存放軸句柄 XLim 0,15 %X軸范圍 YLim 0,2 %Y軸范圍,7.3

9、圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,在圖形區(qū)上方的靜態(tài)文本的屬性編輯框中，設(shè)置 如下屬性值： Fontsize 0.696 %字體大小 FontUnits normaliszed %采用相對度量單位，縮放時保持字體比例 String 歸一化二階系統(tǒng)的階躍響應(yīng)曲線 %顯示在界面上的字符 Tag title_text %生成handles.title_text域存放靜態(tài)文本句柄 HorizontalAlignment Center %文字中心對齊 Units normalized %采用相對度量單位，縮放時保持該區(qū)比例,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,在可編輯文本上方的靜態(tài)文本的屬性編輯框中，

10、設(shè)置如 下屬性值： Fontsize 0.351 %字體大小 FontUnits normaliszed %采用相對度量單位，縮放時保持字體比例 HorizontalAlignment Center %文字中心對齊 String 系統(tǒng)阻尼比 %顯示在界面上的字符 Tag edit_text %生成handles.edit_text域存放靜態(tài)文本句柄 Units normalized %采用相對度量單位，縮放時保持該區(qū)比例,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,在可編輯文本的屬性編輯框中，設(shè)置如下屬性值： Fontsize 0.626 %字體大小 FontUnits normaliszed %

11、采用相對度量單位，縮放時保持字體比例 HorizontalAlignment Center %文字中心對齊 String %在界面上顯示為空白 Tag zeta_edit %生成handles.zeta_edit域存放彈出式選單句柄 Units normalized %采用相對度量單位，縮放時保持該區(qū)比例,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,在上按鍵的屬性編輯框中，設(shè)置如下屬性值： Fontsize 0.485 %字體大小 FontUnits normaliszed %采用相對度量單位，縮放時保持字體比例 HorizontalAlignment Center %文字中心對齊 String

12、Grid on %在按鍵上顯示Grid on Tag GridOn_push %生成handles.GridOn_push域存放該鍵句柄 Units normalized %采用相對度量單位，縮放時保持該鍵比例,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,在下按鍵的屬性編輯框中，設(shè)置如下屬性值： Fontsize 0.485 %字體大小 FontUnits normaliszed %采用相對度量單位，縮放時保持字體比例 HorizontalAlignment Center %文字中心對齊 String Grid off %在按鍵上顯示Grid off Tag GridOff_push %生成han

13、dles.GridOff_push域存放該鍵句柄 Units normalized %采用相對度量單位，縮放時保持該鍵比例,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,3. 精細(xì)調(diào)整控件的大小及其相對位置 直接拖拉控件調(diào)整其大小；通過對象對齊工具將控件擺放整齊。 4. 創(chuàng)建菜單 點擊“菜單編輯器”圖標(biāo)，引出空白菜單編輯對話窗，再點擊該對話窗最左上方的“新菜單New Menu”圖標(biāo)，在左側(cè)空白窗口中，出現(xiàn)”Untitled1”圖標(biāo)；點擊此圖標(biāo)則在右側(cè)引出填寫欄，在“l(fā)able”中填寫Options;在“Tag”中填寫options,于是左側(cè)的”Untitled1”圖標(biāo)變成“Options”圖標(biāo)，表示

14、此菜單已生成。,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,先點亮左側(cè)的“Option”圖 標(biāo)，再點擊菜單編輯對話 窗上的“新菜單項New Menu Item”圖標(biāo)，就引出 等待定義的菜單項；在右 側(cè)的“Label”中填寫B(tài)ox on, 在“Tag”中填寫box_on。重 復(fù)該小步操作，建立另一 個菜單項Box off。,注意：菜單編輯對話窗上的“Callback”不要填寫，機器自動生成。,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,5. 界面的激活和回調(diào)函數(shù)的生成 點擊工作臺上的”運行界面“的工具圖標(biāo)，會出現(xiàn)一個詢問對話框，當(dāng)按提示對以上的設(shè)計進行存儲以后，就會引出2個界面：名為Myguil的（待激

15、活的）圖形用戶界面；展示名為Myguil的（待填寫回調(diào)指令的）M函數(shù)文件的文件編輯器界面。同時，在當(dāng)前目錄或給定目錄上，由MATLAB自動生成了2個文件，即Myguil.fig和Myguil.m。,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,在Myguil.m文件中，填寫回調(diào)指令： function varargout=zeta_edit_Callback(hObject, eventdata, handles,varargin) z=str2num(get(handles.zeta_edit,String) %從編輯框中獲取zeta數(shù)據(jù) t=0:0.1:15; %設(shè)置時間采樣數(shù)組 cla %cl

16、ear current axis for k=1:length(z) y(:,k)=step(1,1,2*z(k),1,t); %計算階躍輸出 line(t,y(:,k); %繪制曲線 end,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,Function varargout= GridOn_push_Callback(hObject, eventdata, handles,varargin) grid on %配合Grid on 按鍵操作的指令 function varargout= GridOff_push_Callback(hObject, eventdata, handles,varargi

17、n) grid off % 配合Grid off 按鍵操作的指令,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,function varargout= box_on_Callback(hObject, eventdata, handles,varargin) box on %配合菜單Box on的操作指令 set(handles.box_on,enable,off) %使菜單項Box on失能 set(handles.box_off,enable,on) %使菜單項Box off使能,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,function varargout= box_off_Callback(h

18、Object, eventdata, handles,varargin) box off %配合菜單Box off的操作指令 set(handles.box_off,enable,off) %使菜單項Box off 失能 set(handles.box_on,enable,on) %使菜單項Box on 使能,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,注意：在填寫回調(diào)函數(shù)時，只有帶%標(biāo)記 的那些行指令是用戶為滿足設(shè)計要求而填寫的，其 余指令都是機器自動生成的，用戶不必也不能更改 6. 圖形用戶界面的使用 經(jīng)過以上幾個步驟生成的圖形用戶界面已經(jīng)可以使用了，只要Myguil.m和Myguil.fig

19、在當(dāng)前目錄或在MATLAB搜索路徑上，那么在指令窗運行Myguil就能使用該界面。 生成的界面如下圖所示：,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,例7.2 設(shè)計一個GUI，實現(xiàn)計算器的功能 步驟一：界面功能分析 該計算器能完成數(shù)字的四則運算及部分常用的科學(xué)計算，如sin,cos,log等。 步驟二：繪界面草圖 可有多種風(fēng)格的界面。,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,草圖一：,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,草圖二：,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,草圖三：,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,步驟三：設(shè)計界面（ 選擇草圖一）

20、初步布局 打開GUI工作臺，通過用鼠標(biāo)拖拉“工作區(qū)”右下角的“小黑塊”使工作區(qū)的大小合適，然后根據(jù)草圖從控件選擇區(qū)選擇相應(yīng)的控件拖拉到工作區(qū)的相應(yīng)位置。 效果圖如下頁所示：,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,2. 修改控件屬性 1）雙擊設(shè)計工作區(qū)的空白部分，打開圖形窗的屬性框，設(shè)置屬性如下： MenuBar none %圖形窗不使用標(biāo)準(zhǔn)菜單 Name Experiment1 %圖形窗名稱 Resize off %圖形窗不能縮放 Tag mainWnd %生成handles.mainWnd域存放圖形窗句柄,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,2）

21、靜態(tài)文本編輯框的屬性設(shè)置。以”expression”文本框為例： FontSize 15 %字體大小 Fontunits point % 字體大小的度量單位 HorizontalAlignment Center %對齊方式 String Expression %待顯示的字符 Tag text1 %生成handles.text1存放該靜態(tài)文本框的句柄 Units point %文本框度量單位,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,3）可編輯文本框的屬性設(shè)置 Sting 0 %初始狀態(tài)下顯示數(shù)字0 Tag pExp %可編輯文本框的句柄 其它與靜態(tài)文本框相同,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)

22、）,注： Units或FontUnits可選擇：inches(英寸)，centimeters (厘米)， normalized(按比例縮放)，points(點陣)， pixels (像素)， characters(字符)。如果選擇normalized，那么當(dāng)resize設(shè)為on時，控件或字體大小隨著整個窗口的縮放而改變。 水平對齊方式 HorizontalAlignment可以是left, center, right。 控件句柄Tag有默認(rèn)值，建議修改為帶有具體含義的字符串，以增加程序可讀性和方便回調(diào)函數(shù)調(diào)用。,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,4）單功能按鈕屬性設(shè)置。以按鈕“1”為例：

23、 String 1 Tag p1 其它和靜態(tài)文本框相同。,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,3. 創(chuàng)建菜單 創(chuàng)建一個“操作”菜單，帶兩個下拉選單“計算”和“清零”。,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,步驟四：激活界面，填寫回調(diào)函數(shù) 保存靜態(tài)界面后，利用工具欄上的運行界面按鈕激活界面，同時，機器自動生成了exp1.fig和exp1.m兩個文件。 打開exp1.m文件，可看到自動生成的回調(diào)函數(shù)，該函數(shù)的命名利用對象句柄進行區(qū)分，沒有任何執(zhí)行語句。,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,回調(diào)函數(shù)：Tag_Callback(hObject,eventdata,handles) 通過加入自

24、己的處理語句，才可實現(xiàn)所需的功能。 其中，hObject是該控件的句柄；evendata是備用參數(shù)，目前沒有定義；handles是用戶數(shù)據(jù)，本身是一個構(gòu)架數(shù)組，存放了當(dāng)前窗口所有對象的句柄，包括圖形窗本身、所有控件和菜單的句柄，并且可以增加一些域用來傳遞用戶數(shù)據(jù)。 利用guidata(H,handles)可以更新H的用戶數(shù)據(jù)。 對本例來說，先需要定義幾個用戶變量，以便記錄參加 運算的數(shù)值，進行計算。,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,function exp1_OpeningFcn(hObject, eventdata, handles, varargin) handles.output

25、 = hObject; handles.s_Exp=; %以字符串的形式記錄計算表達式 handles.s_Num=; %以字符串的形式記錄編輯框中要顯示的數(shù)值 handles.i=1;% s_Exp的計數(shù)器 handles.j=1;% s_Num的計數(shù)器 handles.flag=0; %用來區(qū)分四則運算和函數(shù)運算的標(biāo)志 % Update handles structure guidata(hObject, handles);,7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,數(shù)字按鈕的回調(diào)函數(shù)，以數(shù)字1按鈕的回調(diào)函數(shù)為例 function p1_Callback(hObject, eventdata

26、, handles) handles.s_Exp(handles.i)=1; handles.s_Num(handles.j)=1; handles.i=handles.i+1; handles.j=handles.j+1; guidata(handles.mainWnd,handles); set(handles.pExp,string,handles.s_Num),7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,四則運算的回調(diào)函數(shù)，以“+”為例 function pAdd_Callback(hObject, eventdata, handles) if handles.flag handles.s

27、_Exp(handles.i)=); handles.flag=0; handles.i=handles.i+1; handles.j=handles.j+1; end handles.s_Exp(handles.i)=+; handles.s_Num(handles.j)=+; handles.i=handles.i+1; handles.j=handles.j+1; guidata(handles.mainWnd,handles); set(handles.pExp,string,handles.s_Num),7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,其它運算的回調(diào)函數(shù)，以“sin”為例 f

28、unction pSin_Callback(hObject, eventdata, handles) handles.s_Exp(handles.i:handles.i+3)=sin(; handles.flag=1; handles.s_Num=sin(; handles.i=handles.i+4; handles.j=handles.j+4; guidata(handles.mainWnd,handles); set(handles.pExp,string,handles.s_Num),7.3 圖形用戶界面設(shè)計工具應(yīng)用（續(xù)）,Reset按鈕的回調(diào)函數(shù)，和“清零”菜單的回調(diào)函數(shù)一樣。 function pCle_Callback(hObject, eventdata, handles) handles.s_Exp=; handles.s_Num=; handles.i=1; handles.j=1; handles.flag=0; guidata(handles.mainWnd,handles) se