第11章图形用户界面GUI设计

1、第11章 图形用户界面（GUI）设计 11.1 GUIDE界面环境界面环境 11.2 GUI的创建 11.3 GUI菜单设计菜单设计 11.4 对话框设计对话框设计 11.5 综合案例综合案例 11.1 GUIDE界面环境界面环境 11.1.1 GUIDE启动及界面组成1GUIDE启动启动选择MATLAB主界面菜单“File”“New”“GUI”命令，或点击工具栏GUIDE图标，或直接在MATLAB命令窗口输入guide，都可弹出对话窗“GUIDE Quick Start”界面，如图所示。 2GUIDE界面组成界面组成 “GUIDE Quick StartGUIDE Quick Start”界

2、面包括两个选项：界面包括两个选项：“Create New GUICreate New GUI”（创建新的（创建新的图形用户界面）和图形用户界面）和“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：带有坐标轴与菜单的：带有坐标轴与菜单的GUIGUI模板。模板。 Modal Question Dialog Modal Question Dialog：问答式对话框的：问答式对话框的GUIGUI模板。模板。通过这些模板可快速创建通过这些模板可快速创建GUI。选定一种模板以后，它的预览效果显示在右边。选定一种模板以后，它的预览效果显示在右边的面板中。譬如选中的面板中。譬如选中“GUI with Uicontrols”，显示在面板中的预览效果如，显示

4、在面板中的预览效果如图所示图所示在“GUIDE Quick Start”对话窗中，点击“Create New GUI”选项卡，选择“Black GUI”选项，打开的就是“带有空白GUI模板的输出编辑器”窗口，如图所示。 11.1.2 输出编辑器输出编辑器 1控件与组件的功能输出编辑器中的控件大致可分为两种：一种为动作控件，鼠标点击这些控件时会产生相应的响应；另一种为静态控件，是一种不产生响应的控件，如文本框等。控件的功能如表11-1所示。11.1.3 控件功能与属性2. 控件属性每种控件都有一些可以设置的参数，用于表现控件的外形、功能及效果，即每种控件都有一些可以设置的参数，用于表现控件的外形

5、、功能及效果，即属性。控件属性包括属性名和属性值，其作用如表属性。控件属性包括属性名和属性值，其作用如表11-2所示。所示。 11.1.4 界面的存储及运行点击输出编辑器界面，工具栏中保存图标，或者选择菜单“Fiel”“Save as”命令，弹出“Save as”对话框，填写用户定义的文件名.(如gui)点击“保存”按钮，这时输出编辑器界面变成名称为“gui.fig”的窗口，如图所示， 保存的同时会在当前路径下自动产生两个文件：一个是“gui. fig”文件，另一个是“gui.m”文件。其中，“gui.fig”文件包含对GUI和GUI组件的完整描述，它也是打开输出编辑器界面“gui.fig”窗

6、口的文件；“gui.m”文件包含控制GUI的代码、组件的回调函数。 点击运行图标，显示结果就是我们所要设计的GUI功能界面，如图所示。 11.1.5 回调函数回调函数 实现GUI的基本机制是对控件的Callback（回调函数）属性编程，当在设计界面上选中一个控件后，选择菜单栏中的“View”“View Callbacks”命令，或点击鼠标右键，从弹出的活动菜单选择“View Callback”，就会出现“Callbacks”、“CreateFcn”、“DeleteFcn”、“ButtonDownFcn”和“KeyPressFcn”子选单项，这些选项都是用来编写回调函数的 CallBack：为一

7、般回调函数，因不同的控件而不同，譬如，按钮被按下时发生、下拉框改变值时发生、sliderbar 拖动时发生等等。大多数MATLAB程序代码都在这里编写，它实现诸多功能。 CreateFcn：是在控件对象创建的时候发生(一般为初始化样式，颜色，初始值等)。 DeleteFcn：是在空间对象被清除的时候发生。 ButtonDownFcn：为鼠标点击事件的回调函数。 KeyPressFcn：为按键事件的回调函数。11.2 GUI的创建创建创建GUI主要包括设计主要包括设计GUI（界面布局）、控件属性设置、回调函数编写和保存运（界面布局）、控件属性设置、回调函数编写和保存运行等步骤。下面以简单四则运算

8、器界面为例，说明用行等步骤。下面以简单四则运算器界面为例，说明用GUIDE创建创建GUI的全过程。的全过程。 1打开输出编辑器点击MATLAB主界面工具栏GUIDE图标，选择空模板“Blank GUI”，点击“OK”，即可打开GUIDE的输出编辑器设计界面“untitled.fig”。 2界面布局添加需要的控件摆放到输出编辑器添加需要的控件摆放到输出编辑器“untitled.figuntitled.fig”中合适的位置，对多个同样的中合适的位置，对多个同样的控件，为摆放整齐、选择等间距，可以打开工具栏中的排列控件，为摆放整齐、选择等间距，可以打开工具栏中的排列“Align ObjectsAli

9、gn Objects”图图标，进行各种方式处理。并可用鼠标选中右下角的版面大小控制句柄来缩放版面。标，进行各种方式处理。并可用鼠标选中右下角的版面大小控制句柄来缩放版面。选择4个静态文本块“Static Text”，2个编辑文本块“Edit Text”，4个按钮“Pushbutton按钮”，分别用鼠标拖到“untitled.fig”窗口中，其摆放位置如图所示。 3编辑控件的属性利用属性查看器（Property Inspector），设置各个控件的参数。4存储GUIDE输出编辑器界面点击菜单栏中的保存图标，在“Save as”对话框中填写文件名“yunsuanqi”，单击“保存”按钮，则图的界面

10、最上角的名称变为“yunsuanqi.fig”。此时在当前目录下，MATLAB将自动生成“yunsuanqi.m”和“yunsuanqi.fig”两个文件。5编写GUI回调函数（Callback）代码6运行结果产生GUI功能界面点击文件点击文件“yunsuanqir.m”工具栏运行按钮，或点击名称为工具栏运行按钮，或点击名称为“yunsuanqi.fig”界面中工具栏运行按钮，运行结果产生的具有操作功界面中工具栏运行按钮，运行结果产生的具有操作功能的能的GU I界面，如图所示。界面，如图所示。 若在图中第一个编辑文本框中填写450，第二个编辑文本框中填写567，点击“加法”按钮，则立即显示出结

11、果为1017，如图所示。11.3 GUI菜单设计菜单设计 利用利用GUIDEGUIDE输出编辑器工具栏中的菜单图标创建带有输出编辑器工具栏中的菜单图标创建带有“菜单栏菜单栏”的的GUIGUI界面的方法如下：界面的方法如下：（1 1）选择空模板）选择空模板“Blank GUI”Blank GUI”，点击，点击“OK”OK”，即可打开，即可打开GUIDEGUIDE输出输出编辑器，如图所示。编辑器，如图所示。 （2 2）点击工具栏上的菜单编辑器图标，打开菜单编辑器）点击工具栏上的菜单编辑器图标，打开菜单编辑器“Menu EditorMenu Editor”窗口，如图所示，并在图中我们给出了工窗口，如

12、图所示，并在图中我们给出了工具栏图标的功能。具栏图标的功能。(3(3）在界面）在界面“Menu BarMenu Bar”选项卡中，点击选项卡中，点击“To add a menu,To add a menu,”处，或者工具栏中的图标，则窗口中出现菜单图标处，或者工具栏中的图标，则窗口中出现菜单图标“Untitled Untitled 1 1”，再点击图标，再点击图标“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”，其它选项默认，设置如图所示。，其它选项默认，设置如图所示。 （5）在新建的）在新建的“文件文件”菜单下添加子菜单项：菜单下添加子菜单项：“打开打开”、“保存保存”和和“退出退出”，且设置其属性，且设置其属性， （6 6）继续添加其它菜单项。）继续添加其它菜单项。点击点击“Menu Editor”界面中工具栏新建图标，依次添加界

14、面中工具栏新建图标，依次添加“编辑编辑”、“查看查看”、“工具工具”、“帮助帮助”菜单项，并设定各自菜单项，并设定各自“Tag”选项（譬如选项（譬如“帮助帮助”中的中的“Tag”选项设为选项设为“m_help”，其余类似），如图所示。当编辑完所有菜单项以后，单击，其余类似），如图所示。当编辑完所有菜单项以后，单击图中的图中的“OK”按钮。按钮。 （7）保存界面并运行界面名称变为“gui1.fig”，如图所示。 （8）改写界面名称（用中文表示）。在输出编辑器界面中，单击鼠标右键，选择“Property Inspector”，即可打开界面属性窗口“Inspector”。对窗口的“Name”（标题）

15、属性改为“图形界面1”，如图所示。（10）通过菜单编辑窗口上的按钮“View”，可以查看各菜单项的回调函数，也就是Callback 函数。也可以在M文件gui1.m 中找到回调函数，比如“打开”的“Tag” 属性是“m_file_open”，那么它对应的Callback 函数的名字就是“m_file_open_Callback”。在回调函数程序的下方编写代码，就可激活该菜单项的功能。11.4 对话框设计对话框设计 1信息对话框（msgbox）格式 msgbox(Message,Title,Icon)说明 Message：显示的信息（字符串）；Title：对话框标题（字符串）；Icon：对话框图

16、标，可选择none（默认值，无图标）、error（错误提示图标）、help（帮助提示图标）、warn（警告提示图标）和custom（用户自创图标）。2错误对话框（errordlg）格式 errordlg(ErrorString,DlgName)说明 ErrorString：显示错误信息的字符串；DlgName：对话框标题（字符串）。 3警告对话框（warndlg）格式格式 warndlg(WarnString,DlgName )warndlg(WarnString,DlgName )说明说明 WarnStringWarnString：显示警告信息的字符串；：显示警告信息的字符串；DlgName

17、DlgName：对话框标：对话框标题（字符串）题（字符串）4帮助对话框（helpdlg）格式格式 helpdlg(HelpString,DlgName)helpdlg(HelpString,DlgName)说明说明 HelpStringHelpString：显示帮助信息的字符串；：显示帮助信息的字符串；DlgNameDlgName：对话框标：对话框标题（字符串）。题（字符串）。5进度条对话框（waitbar）格式格式 waitbar(X, title)waitbar(X, title)说明说明 X为进度条的比例长度，其值必须在为进度条的比例长度，其值必须在0都都1之间；之间；title：显示：

18、显示提示信息提示信息 6输入对话框（inputdlg）格式格式 inputdlg(Prompt,Title,Numlines,DefAns,Resize)inputdlg(Prompt,Title,Numlines,DefAns,Resize)说明说明 PromptPrompt：显示提示信息（单元数组）；：显示提示信息（单元数组）；TitleTitle：对话框标题（字符：对话框标题（字符串）；串）；NumlinesNumlines：指定输入数据的行数；：指定输入数据的行数；DefAnsDefAns：是一单元数组，存储每：是一单元数组，存储每个输入数据的默认值，元素个数必须与个输入数据的默认值，

19、元素个数必须与Prompt Prompt 所定义的输入窗口数相同，所定义的输入窗口数相同，所有元素必须是字符串；所有元素必须是字符串；ResizeResize：设定对话框尺寸是否可调节（：设定对话框尺寸是否可调节（on/offon/off）。）。7列表对话框（listdlg）格式格式 sel,ok=listdlg (ListString,S)sel,ok=listdlg (ListString,S)说明说明 ListStringListString设置备选项，备选项设置备选项，备选项S S为字符串或者字符串数组。输入为字符串或者字符串数组。输入参数项还可以添加其它成对的属性及属性值。如：参数项

20、还可以添加其它成对的属性及属性值。如：NameName设置对话框标题；设置对话框标题；PromptStringPromptString设置提示字符；设置提示字符；SelectionModeSelectionMode设置是否多选，设置是否多选，singlesingle为单选，为单选，multiplemultiple为多选。为多选。文件选择成功后，单击文件选择成功后，单击“OKOK”按钮，系统将选择好的文件序号存入相应向按钮，系统将选择好的文件序号存入相应向量量selsel，参数，参数okok的值为的值为1 1。8问题对话框（questdlg）格式格式 questdlg(Question,Titl

21、e ) %questdlg(Question,Title ) %默认值，回答按钮有三个：默认值，回答按钮有三个：YesYes、NoNo、CancelCancelquestdlg(Question,Title,Btn1,Btn2,Btn3,Default) %questdlg(Question,Title,Btn1,Btn2,Btn3,Default) %自定义回答按钮自定义回答按钮说明说明 Question：显示的问题信息（字符串）；：显示的问题信息（字符串）；Title：对话框标题（字符：对话框标题（字符串）。串）。 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：文件类型设置；：文件类型设置；Title：对话框标题；：对话框标题；File：默认指向的文件：默认指向的文件名；名；FileName：返回的文件名；：返回的文件名；PathName：返回的文件的路径名；：返回的文件的路径名；FilterIndex：选择的文件类型。：选择的文件类型。 10文件保存对话框（uiputfile）格式格式 FileName,PathName,FilterIndex = uiputfile(FilterSpec,Title)FileName,PathName,FilterIndex = uiputfile(FilterSpec,Title)FileName,PathName,F