图形用户界面GUI设计学习教案

1、图形用户界面图形用户界面GUI设计设计(shj)第一页，共23页。2GUIDE界面界面(jimin)组成组成 “GUIDE Quick Start”界面包括两个选项：界面包括两个选项：“Create New GUI”（创建新的图形用户界面）和（创建新的图形用户界面）和“Open Existing GUI”（打开已存在的图形用户界面）。其中（打开已存在的图形用户界面）。其中“Create New GUI”提供四种基本类型的提供四种基本类型的GUI模模板板(mbn)： Black GUI（Default）：空白模板）：空白模板(mbn)（缺省）。（缺省）。 GUI with Uicontrols：

2、带有控件对象的：带有控件对象的GUI模板模板(mbn)。 GUI with Axes and Menu：带有坐标轴与菜单的：带有坐标轴与菜单的GUI模板模板(mbn)。 Modal Question Dialog：问答式对话框的：问答式对话框的GUI模板模板(mbn)。通过这些模板通过这些模板(mbn)可快速创建可快速创建GUI。选定一种模板。选定一种模板(mbn)以后，它的预览效果显示在右边的面以后，它的预览效果显示在右边的面板中。譬如选中板中。譬如选中“GUI with Uicontrols”，显示在面板中的预览效果如图所示，显示在面板中的预览效果如图所示第1页/共23页第二页，共23页。

3、在“GUIDE Quick Start”对话窗中，点击“Create New GUI”选项卡，选择“Black GUI”选项，打开的就是“带有空白GUI模板(mbn)的输出编辑器”窗口，如图所示。 11.1.2 输出输出(shch)编辑器编辑器 第2页/共23页第三页，共23页。1控件与组件的功能输出编辑器中的控件大致可分为两种：一种为动作控件，鼠标点击这些控件时会(sh hu)产生相应的响应；另一种为静态控件，是一种不产生响应的控件，如文本框等。控件的功能如表11-1所示。11.1.3 控件功能(gngnng)与属性 Edit Text Pop-up MenusActiveX Contro2

4、. 控件属性每种控件都有一些可以设置的参数，用于表现控件的外形(wi xn)、功能及效果，即属性。控件属性包括属性名和属性值，其作用如表11-2所示。 第3页/共23页第四页，共23页。11.1.4 界面(jimin)的存储及运行点击输出编辑器界面，工具栏中保存图标，或者(huzh)选择菜单“Fiel”“Save as”命令，弹出“Save as”对话框，填写用户定义的文件名.(如gui)点击“保存”按钮，这时输出编辑器界面变成名称为“gui.fig”的窗口，如图所示， 首页首页保存的同时会在当前路径下自动(zdng)产生两个文件：一个是“gui. fig”文件，另一个是“gui.m”文件。其

5、中，“gui.fig”文件包含对GUI和GUI组件的完整描述，它也是打开输出编辑器界面“gui.fig”窗口的文件；“gui.m”文件包含控制GUI的代码、组件的回调函数。 第4页/共23页第五页，共23页。点击(din j)运行图标，显示结果就是我们所要设计的GUI功能界面，如图所示。 首页首页第5页/共23页第六页，共23页。11.1.5 回调函数回调函数(hnsh) 实现GUI的基本(jbn)机制是对控件的Callback（回调函数）属性编程，当在设计界面上选中一个控件后，选择菜单栏中的“View”“View Callbacks”命令，或点击鼠标右键，从弹出的活动菜单选择“View Ca

6、llback”，就会出现“Callbacks”、“CreateFcn”、“DeleteFcn”、“ButtonDownFcn”和“KeyPressFcn”子选单项，这些选项都是用来编写回调函数的 首页首页 CallBack：为一般回调函数，因不同的控件而不同，譬如，按钮被按下时发生(fshng)、下拉框改变值时发生(fshng)、sliderbar 拖动时发生(fshng)等等。大多数MATLAB程序代码都在这里编写，它实现诸多功能。 CreateFcn：是在控件对象创建的时候发生(fshng)(一般为初始化样式，颜色，初始值等)。 DeleteFcn：是在空间对象被清除的时候发生(fshng

7、)。 ButtonDownFcn：为鼠标点击事件的回调函数。 KeyPressFcn：为按键事件的回调函数。第6页/共23页第七页，共23页。11.2 GUI的创建(chungjin)创建创建GUIGUI主要包括设计主要包括设计GUIGUI（界面（界面(jimin)(jimin)布局）、控件属性设置、回调函数编写布局）、控件属性设置、回调函数编写和保存运行等步骤。下面以简单四则运算器界面和保存运行等步骤。下面以简单四则运算器界面(jimin)(jimin)为例，说明用为例，说明用GUIDEGUIDE创建创建GUIGUI的全过程。的全过程。 首页首页1打开输出编辑器点击MATLAB主界面工具栏G

8、UIDE图标，选择(xunz)空模板“Blank GUI”，点击“OK”，即可打开GUIDE的输出编辑器设计界面“untitled.fig”。 2界面布局添加需要的控件摆放到输出编辑器添加需要的控件摆放到输出编辑器“untitled.figuntitled.fig”中合适的位置，对多个同样的控件，为摆放中合适的位置，对多个同样的控件，为摆放整齐、选择等间距，可以打开工具栏中的排列整齐、选择等间距，可以打开工具栏中的排列“Align ObjectsAlign Objects”图标，进行各种方式处理。图标，进行各种方式处理。并可用鼠标选中右下角的版面大小控制句柄来缩放版面。并可用鼠标选中右下角的版

9、面大小控制句柄来缩放版面。第7页/共23页第八页，共23页。选择4个静态文本块“Static Text”，2个编辑文本块“Edit Text”，4个按钮“Pushbutton按钮”，分别用鼠标拖到“untitled.fig”窗口中，其摆放(bi fn)位置如图所示。 首页首页第8页/共23页第九页，共23页。3编辑(binj)控件的属性利用属性查看器（Property Inspector），设置各个控件的参数。首页首页4存储GUIDE输出编辑器界面点击菜单栏中的保存(bocn)图标，在“Save as”对话框中填写文件名“yunsuanqi”，单击“保存(bocn)”按钮，则图的界面最上角的名

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

11、为1017，如图所示。第10页/共23页第十一页，共23页。11.3 GUI菜单菜单(ci dn)设计设计 利用利用GUIDEGUIDE输出编辑器工具栏中的菜单图标创建带有输出编辑器工具栏中的菜单图标创建带有“菜单栏菜单栏”的的GUIGUI界面的界面的方法方法(fngf)(fngf)如下：如下：首页首页（1 1）选择）选择(xunz)(xunz)空模板空模板“Blank GUI”“Blank GUI”，点击，点击“OK”“OK”，即可打开，即可打开GUIDEGUIDE输出编辑器，如图所示。输出编辑器，如图所示。 第11页/共23页第十二页，共23页。（2 2）点击工具栏上的菜单编辑器图标，打开

12、）点击工具栏上的菜单编辑器图标，打开(d ki)(d ki)菜单编辑器菜单编辑器“Menu “Menu Editor”Editor”窗口，如图所示，并在图中我们给出了工具栏图标的功能。窗口，如图所示，并在图中我们给出了工具栏图标的功能。首页首页第12页/共23页第十三页，共23页。(3(3）在界面）在界面“Menu Bar”“Menu Bar”选项卡中，点击选项卡中，点击(din j)“(din j)“ToTo add a add a menu,”menu,”处，或者工具栏中的图标，则窗口中出现菜单图标处，或者工具栏中的图标，则窗口中出现菜单图标“Untitled 1”“Untitled 1”

13、，再点击，再点击(din j)(din j)图标图标“Untitled 1”“Untitled 1”，则显，则显示带有菜单属性示带有菜单属性“Menu Properties”“Menu Properties”的界面，如图所示。的界面，如图所示。首页首页（4 4）将图中）将图中“Label”“Label”选项的菜单选项的菜单(ci dn)(ci dn)名名“Untitled 1”“Untitled 1”改为改为“文件文件”，“Tag”“Tag”栏选项改为栏选项改为“m_file”“m_file”，“Accelerator: Ctrl+”“Accelerator: Ctrl+”栏选项改为栏选项改为

14、“F”“F”，其它选项默认，设置如图所示。其它选项默认，设置如图所示。 第13页/共23页第十四页，共23页。（5 5）在新建的）在新建的“文件文件(wnjin)”(wnjin)”菜单下添加子菜单项：菜单下添加子菜单项：“打开打开”、“保存保存”和和“退出退出”，且设置其属性，且设置其属性， 首页首页（6 6）继续添加其它菜单项。）继续添加其它菜单项。点击点击“Menu Editor”“Menu Editor”界面界面(jimin)(jimin)中工具栏新建图标，依次添加中工具栏新建图标，依次添加“编辑编辑”、“查看查看”、“工工具具”、“帮助帮助”菜单项，并设定各自菜单项，并设定各自“Tag

15、”“Tag”选项（譬如选项（譬如“帮助帮助”中的中的“Tag”“Tag”选项设为选项设为“m_help”“m_help”，其余类似），如图所示。当编辑完所有菜单项以后，单击图中的，其余类似），如图所示。当编辑完所有菜单项以后，单击图中的“OK”“OK”按钮。按钮。 第14页/共23页第十五页，共23页。（7）保存界面(jimin)并运行界面(jimin)名称变为“gui1.fig”，如图所示。 首页首页 （8）改写界面名称（用中文表示）。在输出编辑器界面中，单击鼠标右键，选择(xunz)“Property Inspector”，即可打开界面属性窗口“Inspector”。对窗口的“Name”（

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

17、le,Icon)说明(shumng) Message：显示的信息（字符串）；Title：对话框标题（字符串）；Icon：对话框图标，可选择none（默认值，无图标）、error（错误提示图标）、help（帮助提示图标）、warn（警告提示图标）和custom（用户自创图标）。首页首页2错误对话框（errordlg）格式 errordlg(ErrorString,DlgName)说明(shumng) ErrorString：显示错误信息的字符串；DlgName：对话框标题（字符串）。 第17页/共23页第十八页，共23页。3警告对话框（warndlg）格式 warndlg(WarnString,

18、DlgName )说明(shumng) WarnString：显示警告信息的字符串；DlgName：对话框标题（字符串）首页首页4帮助对话框（helpdlg）格式(g shi) helpdlg(HelpString,DlgName)说明 HelpString：显示帮助信息的字符串；DlgName：对话框标题（字符串）。5进度条对话框（waitbar）格式 waitbar(X, title)说明 X为进度条的比例(bl)长度，其值必须在0都1之间；title：显示提示信息 第18页/共23页第十九页，共23页。6输入对话框（inputdlg）格式 inputdlg(Prompt,Title,Nu

19、mlines,DefAns,Resize)说明 Prompt：显示提示信息（单元数组）；Title：对话框标题（字符串）；Numlines：指定输入数据的行数；DefAns：是一单元数组，存储每个输入数据的默认值，元素个数必须与Prompt 所定义的输入窗口数相同，所有元素必须是字符串；Resize：设定(sh dn)对话框尺寸是否可调节（on/off）。首页首页7列表对话框（listdlg）格式 sel,ok=listdlg (ListString,S)说明 ListString设置备选项，备选项S为字符串或者字符串数组。输入参数项还可以添加其它成对的属性(shxng)及属性(shxng)值

20、。如：Name设置对话框标题；PromptString设置提示字符；SelectionMode设置是否多选，single为单选，multiple为多选。文件选择成功后，单击“OK”按钮，系统将选择好的文件序号存入相应向量sel，参数ok的值为1。8问题对话框（questdlg）格式 questdlg(Question,Title ) %默认值，回答按钮有三个：Yes、No、Cancelquestdlg(Question,Title,Btn1,Btn2,Btn3,Default) %自定义回答按钮说明(shumng) Question：显示的问题信息（字符串）；Title：对话框标题（字符串）。

21、 第19页/共23页第二十页，共23页。9 打开文件对话框（uigetfile）格式 FileName,PathName,FilterIndex = uigetfile(FilterSpec,Title)FileName,PathName,FilterIndex = uigetfile(FilterSpec,Title,File)说明 FilterSpec：文件类型设置；Title：对话框标题(biot)；File：默认指向的文件名；FileName：返回的文件名；PathName：返回的文件的路径名；FilterIndex：选择的文件类型。 首页首页10文件保存(bocn)对话框（uiputfile）格式 FileNa