MATLAB-GUI圖形用戶(hù)界面設(shè)計(jì)

第二講 形用戶(hù)界面設(shè)計(jì) 設(shè)計(jì)原則和一般步驟 圖形用戶(hù)界面設(shè)計(jì)工具介紹 用戶(hù)控件的制作 用戶(hù)菜單的制作 回調(diào)函數(shù) 實(shí)驗(yàn)一：計(jì)算器程序 2016/10/15 3 1) 分析界面所要實(shí)現(xiàn)的主要功能，明確設(shè)計(jì)任務(wù)。 2) 繪界面草圖，注意從使用者的角度來(lái)考慮界面布局。 3) 利用 4) 編寫(xiě)動(dòng)態(tài)功能程序。 注意： 1) 先完成大致界面布局，再編寫(xiě)功能程序。 2) 界面風(fēng)格要一致，且符合使用習(xí)慣。例如，一般習(xí)慣圖形區(qū)在上面或左面，控制區(qū)在下面或右面等等。 2016/10/15 4 例如，以本次試驗(yàn)的內(nèi)容“計(jì)算器”為例。 1) 功能分析：完成數(shù)字的四則運(yùn)算，以及一部分常用的科學(xué)計(jì)算： 2) 界面草圖：可以有多種風(fēng)格的界面。給出幾種設(shè)計(jì)草圖。 草圖一 草圖二 草圖三 3) 利用 4) 編寫(xiě)相應(yīng)的程序完成計(jì)算器的各項(xiàng)功能， 2016/10/15 5 形用戶(hù)界面設(shè)計(jì)工具介紹 計(jì)界面變化很大。 打開(kāi) 打開(kāi)設(shè)計(jì)工作臺(tái)啟動(dòng)界面 在工作臺(tái)中打開(kāi)文件名為 菜單項(xiàng) %打開(kāi)設(shè)計(jì)工作臺(tái)啟動(dòng)界面 注意： 打開(kāi)的 供新建界面 ( 或打開(kāi)已有界面文件 ( 的屬性頁(yè)。新建界面可以選擇空白界面、包含有控件的模板界面、包含有軸對(duì)象和菜單的模板界面、標(biāo)準(zhǔn)詢(xún)問(wèn)窗口等選項(xiàng)。 選擇任意一項(xiàng)都會(huì)打開(kāi) 對(duì)界面靜態(tài)組成部分進(jìn)行的具體的修改都在工作臺(tái)實(shí)現(xiàn)。 2016/10/15 6 新建界面的選項(xiàng) 預(yù)覽窗口 是否在新建時(shí)保存文件 最近打開(kāi)的界面文件的列表 打開(kāi)文件瀏覽器 2016/10/15 7 設(shè)計(jì)工作區(qū) 主要由 4個(gè)功能區(qū)，六個(gè)實(shí)用工具組成 控件選擇區(qū) 菜單條 工具條 對(duì)齊工具 文件編輯 菜單編輯 對(duì)象屬性 對(duì)象列表 運(yùn)行界面 工作區(qū) 縮放句柄 2016/10/15 8 戶(hù)控件的制作 用戶(hù)控件列表： 對(duì)象選擇按鈕 ，用來(lái)選取工作區(qū)上分布的控件。 單功能按鍵 ，按下操作代表一定的功能實(shí)現(xiàn)。 雙位按鍵 ，代表“開(kāi)”“關(guān)”兩種狀態(tài)。 互斥選擇按鈕 ，多個(gè)選項(xiàng)互斥選擇時(shí)使用。 互容選擇按鈕 ，同時(shí)選中多個(gè)選項(xiàng)時(shí)使用。 編輯文本框 ，可以自由輸入字符，編輯字符串 靜態(tài)文本框 ，用于顯示注釋說(shuō)明用文字，不可編輯。 滑動(dòng)塊 ，利用游標(biāo)滑動(dòng)，可以獲取不同的值。 控件區(qū)域框 ，用于對(duì)控件區(qū)域進(jìn)行標(biāo)識(shí)。 列表框 ，提供多個(gè)可供選擇的選項(xiàng)，可以互容選擇。 彈出框 ，帶有多個(gè)選項(xiàng)，只能選擇其中一項(xiàng)。 軸對(duì)象 ，用來(lái)顯示圖形。 2016/10/15 9 以“計(jì)算器”界面草圖一為例。 1. 初步布局 ，根據(jù)草圖將控件選擇區(qū)的相應(yīng)控件拖拉到設(shè)計(jì)工作區(qū)的相應(yīng)位置。 2016/10/15 10 2. 修改控件屬性 每一個(gè)控件都不可能是完全符合界面設(shè)計(jì)要求的，需要對(duì)其屬性進(jìn)行設(shè)置，以獲得所需的界面顯示效果。 可以通過(guò)雙擊該控件，或利用 開(kāi)控件屬性對(duì)話(huà)框。屬性對(duì)話(huà)框具有良好的交互界面，以列表的形式給出該控件的每一項(xiàng)屬性。 例如右圖是“ +”按鈕的屬性列表。 2016/10/15 11 下面對(duì)各控件的主要屬性進(jìn)行一下說(shuō)明。 1) 雙擊設(shè)計(jì)工作區(qū)的空白部分，打開(kāi)整個(gè)圖形窗的屬性框。 %圖形窗是否使用標(biāo)準(zhǔn)菜單 圖形窗名稱(chēng) %圖形窗不能縮放 圖形窗的句柄 ) 靜態(tài)文本編輯框的屬性設(shè)置。 15 %字體大小 %字體大小的度量單位 對(duì)齊方式 待顯示的字符 %該靜態(tài)文本框的句柄 %文本框度量單位 寸 )， 厘米 )， 比例縮放 )， 陣 )， 像素 )， 符 )。如果選擇 么當(dāng)件或字體大小隨著整個(gè)窗口的縮放而改變。 水平對(duì)齊方式 控件句柄 議修改為帶有具體含義的字符串，以增加程序可讀性和方便回調(diào)函數(shù)調(diào)用。 2016/10/15 12 3) 可編輯文本框的屬性設(shè)置。 0 %初始狀態(tài)下顯示數(shù)字 0 %可編輯文本框的句柄 其它和靜態(tài)文本框相同 4) 單功能按鈕屬性設(shè)置。以按鈕“ 1” 為例 1 它和靜態(tài)文本框相同。 3. 精細(xì)調(diào)整 利用 對(duì)齊工具 ，排列控件的位置，使控件的大小、位置更加協(xié)調(diào)。 2016/10/15 13 4. 界面激活 保存靜態(tài)界面后，利用工具欄上的 運(yùn)行按鈕 激活該界面。激活后可以看到兩個(gè)同名文件： 文本編輯器中打開(kāi)， 是無(wú)法實(shí)現(xiàn)任何功能，需要編寫(xiě)回調(diào)函數(shù)。 2016/10/15 14 調(diào)函數(shù) 在 以看到自動(dòng)生成的回調(diào)函數(shù)，該函數(shù)的命名利用對(duì)象句柄進(jìn)行區(qū)分，沒(méi)有任何執(zhí)行語(yǔ)句。 回調(diào)函數(shù)： 通過(guò)加入自己的處理語(yǔ)句，可以實(shí)現(xiàn)所需的功能。 其中： 前沒(méi)有定義； 身是一個(gè)結(jié)構(gòu)數(shù)組，存放了當(dāng)前窗口的所有對(duì)象的句柄，包括圖形窗本身、所有控件和菜單的句柄。并且可以增加一些域用來(lái)傳遞用戶(hù)數(shù)據(jù)。 利用 H, 可以更新 H 的用戶(hù)數(shù)據(jù)。 2016/10/15 15 先設(shè) 5個(gè)參數(shù) ; %不能一開(kāi)始輸入運(yùn)算符號(hào) ; %運(yùn)算完，進(jìn)行新的運(yùn)算 ; %不能重復(fù)輸入運(yùn)算符號(hào) ; %不能重復(fù)輸入點(diǎn) ; %輸入 能輸入運(yùn)算符號(hào) 2016/10/15 16 只用編 0的程序來(lái)說(shuō)明，其他從 1到 9都是一樣的程序 % to % to be in a if( %如果沒(méi)有數(shù)字按入，一開(kāi)始運(yùn)算符號(hào)無(wú)法輸入 ; %把空的內(nèi)容顯示出來(lái) ; %更新句柄結(jié)構(gòu) ; %把前面輸入的內(nèi)容保存在 if( %計(jì)算結(jié)束后，就為空，繼續(xù)下一次輸入 ; ; if( %能在接數(shù)字，只能接運(yùn)算符號(hào) 0; %把 0與前面的內(nèi)容相連起來(lái) %把新內(nèi)容顯示出來(lái) ; %數(shù)字輸入完可以輸入運(yùn)算符號(hào)了 on in 2016/10/15 17 其他從 1到 9都是一樣的程序 2016/10/15 18 下面的程序是關(guān)于點(diǎn)的程序 if( %不能連續(xù)輸入點(diǎn) ; %輸入點(diǎn)后不能在輸入運(yùn)算符號(hào) if( %如果沒(méi)有數(shù)字按入，一開(kāi)始運(yùn)算符號(hào)無(wú)法輸入 ; ; 2016/10/15 19 ; if(; ; .; ; ; 2016/10/15 20 下面是關(guān)于加法的程序 if( %如果沒(méi)有數(shù)字按入，一開(kāi)始運(yùn)算符號(hào)無(wú)法輸入 0.; ; %把前面的內(nèi)容取出來(lái)保存在 ; %可以進(jìn)行運(yùn)算 2016/10/15 21 ; %可以輸入點(diǎn) ; %運(yùn)算符號(hào)后可以輸入 if( %前面有運(yùn)算符號(hào)，就不允許在輸入運(yùn)算符號(hào) +; ; %輸入加號(hào)后就把 2016/10/15 22 下面是關(guān)于減法的程序 if(; ; ; ; ; 2016/10/15 23 要注意 ”，因?yàn)橛胸?fù)數(shù) if( -; ; 2016/10/15 24 下面是關(guān)于 if(0.; ; 2016/10/15 25 , ); %把 寫(xiě)顯示出來(lái)括號(hào)里是前面輸入的內(nèi)容 %把內(nèi)容顯示出來(lái) ; % ; %后不能直接跟數(shù)字 2016/10/15 26 下面是關(guān)于計(jì)算的程序 if(0.; 2016/10/15 27 %把顯示的內(nèi)容進(jìn)行計(jì)算，把結(jié)果顯示出來(lái)，如果出現(xiàn)計(jì)算錯(cuò)誤，則不顯示 ; %對(duì)字符型表達(dá)式進(jìn)行計(jì)算 ; ; ; 2016/10/15 28 下面是關(guān)于 0.; ; ; ; ; ; 2016/10/15 29 . 用戶(hù)控件制作函數(shù)： H=) 來(lái)確定控件的一個(gè)屬性。 例如： H0=H1=0,. . . . by ; 軸對(duì)象直接利用 H1=) 2016/10/15 30 2. 用戶(hù)菜單制作函數(shù) H=) 其中， 以是窗口或上一級(jí)菜單置菜單的一個(gè)屬性。 現(xiàn)場(chǎng)菜單 ( 右鍵菜單 ) Hm=H= ) 其中， 利用 H= ) 指令可以查看菜單的屬性列表。 常用的菜單屬性： 菜單顯示的字符， &作用 回調(diào)函數(shù) 快捷鍵， 作用 on/菜單上方顯示分隔線(xiàn) on/菜單項(xiàng)的檢錄符 on/菜單是否可選 on/菜單是否可見(jiàn) 2016/10/15 31 例 2用戶(hù)菜單的制作 p=0); ; H0=0,; p); %制作 H1=0,&; 1,&i=