基础及其应用教程管爱红第9章图形用户界

1、基础及其应用教程管爱红第9章图形用户界图形用户界面 (Graphical User Interface，GUI)是指人与计算机或计算机软件之间的图形化的交互方式。一个设计良好的GUI，能够极大地方便用户操作，用户可以通过窗口、菜单、图标、按钮等方式操作计算机和运行软件。在GUI中，计算机画面上显示的窗口、菜单、按钮等图形表示不同目的和动作，用户通过键盘、鼠标等设备进行选择或参数输入。MATLAB进行各类科学研究的读者，如果需要向别人提供应用程序，或进行某种技术、方法的演示，或制作一个供反复使用且操作简单的专用工具，设计一个图形用户界面就成为一项必不可少的工作。MATLAB为表现其基本功能而设计

2、的演示程序demo 是使用图形界面的良好范例。在Command Window窗口中运行Demo 打开图形用户界面后，只要用鼠标进行选择和点击，就可以浏览其丰富多彩的内容。【学习目标】熟悉GUIDE开发环境；掌握GUI的设计方法，学会设计包含菜单与常用控件的较复杂的GUI 9.1使用GUIDE创建GUIMATLAB提供的图形用户界面开发环境是GUIDE（Graphical User Interface Development Environment），它提供了一组丰富的图形用户界面创建工具。我们可以利用GUIDE对图形用户界面进行布局和编程。本节对GUIDE的使用方法进行初步介绍。9.1.1 G

3、UIDE编辑界面简介 进入到GUIDE开发环境通常有如下三种方法：1.在MATLAB主窗口中，选择File菜单中的“New”菜单项，再选择其中的“GUI”；2.在Command Window中输入Guide，按【Enter】键；3.点击Matlab主界面工具栏上的Guide按钮。首先会弹出“Guide Quick Start”对话框，如图9.1所示，其中的两个选项分别为“Create New GUI”（创建新的GUI）和“Open Existing GUI”（打开已经存在的GUI）。 “Create New GUI”分别有以下GUIDE模板：Blank GUI(Default)（空GUI）；G

4、UI with Uicontrols（带Uicontrols的GUI）；GUI with Axes and Menu（带坐标轴和菜单的GUI）；Model Question Dialog（模板提问对话框）。点击相应的选项时可以在右侧看到相应的预览（Preview）。选择“Save on startup as”时可选择改变生成文件的默认存储路径。选择第一项：Blank GUI(Default)，并单击OK，可得如图2所示的布局编辑器（Layout Editor）界面，正在编辑的是一个空的GUI模板。编辑器的各主要组成部分已经标注在图中。选中组件面板（Component Palette）中的某一个

5、组件，按下鼠标左键，拖曳，就可以把它放置在布局工作区（Layout Area）中。 组件面板设计工作区菜单栏工具栏工作区大小缩放句柄布局编辑界面菜单栏（Menu Bar）下面是工具栏（Toolbar），其上是一些常用的快捷按钮，当鼠标停留在快捷按钮上方片刻，会弹出提示框提示按钮的名称。下面介绍部分快捷按钮。 Align Objects ：用来调整组件在GUI中的分布和排列，点击后界面如图9.3 所示；Menu Editor：菜单编辑器。用于给GUI添加并编辑菜单；Tab Order Editor：Tab顺序编辑器。用于设置在GUI处于运行状态时，按下键盘的【Tab】键依次选择组件的顺序；M-：

6、M文件编辑器。设计好的GUI运行后一般会对应生成两个文件，一个是图形（.fig）文件，另一个是程序（.m）文件。M文件编辑器可以打开程序文件进行编辑；Property Inspector：属性编辑器，用于设置在你设计当中各组件的各种属性，如名称、背景、颜色等；Object Browser：对象浏览器，用于浏览工作区中所有对象的层次结构；Run：运行GUI。菜单设计实例菜单一般置于GUI的最上方，应用程序的几乎全部功能都包含其中。按下 按钮，进入Menu Editor编辑器如图9.4所示，Menu Editor的快捷按钮从左至右依次为： New Menu（新菜单） New Menu Item（新

7、子菜单） New Context Menu（新右键菜单） Move Selected Item Backward Move Selected Item Forward Move Selected Item Up Move Selected Item Down（以上四项用来更改菜单项的前、后级别及上、下位置） Delete Selected Item（删除菜单）点击菜单编辑器工具条中的 （New Menu）来创建父菜单；若要创建子菜单项，先选中父菜单项，点击（New Menu Item）按钮。假设我们创建了如图9.5的菜单。单击鼠标左键选定“Untitled 2”时同时选定右侧的选项“Check

8、 mark this item”（ 勾选此选项），而选定“Untitled 3”时同时选定右侧的“Separator above this item”（在此选项上方添加分割线）。关闭“Menu Editor”并运行，得到如图9.6的结果。鼠标单击菜单项“Utitled 1”时出现如图9.7 的结果。注意“Untitled 2”之前的对号和“Untitled 3”上方的分割线。细心的读者可能会发现，在“Menu Editor”中还有一个选项“Context Menus”，意思是右键菜单，可以给GUI中的某个对象定义Context Menu。GUI处于运行状态时，当用户鼠标右键点击定义了文本菜单的

9、对象后，会弹出相应的菜单，进而可选择菜单中的选项执行对应操作。点击菜单编辑器工具条中的 （New Context Menu）来创建右键菜单。注意之前要选择菜单编辑器的“Context Menus”标签界面。子菜单项的创建方法同前。通过修改GUI窗口某一组件的“UiContextMenu”属性的值可以建立组件和右键菜单之间的联系。包含控件的GUI设计实例如图9.8所示，组件面板中包含的控件有：Select：用来指示在GUIDE中控件的选中状态。严格意义上说它不是一个独立的控件；Push Button：命令按钮，其作用是对用户的鼠标单击操作做出反应并触发相应的操作，其上的文本标识按钮的名称（下同）

10、； Toggle Button： 切换按钮，又称开关按钮，通过鼠标点击它有两种状态，压下和复原，对应触发两种不同的操作；Radio Button：单选按钮，一般都是成组出现的，具有互斥的性质，即同组单选按钮中只能有一个是被选中的。当单选按钮处于选择状态时，会在圆圈中显示一个黑色实心圆； Check Box：复选框，通常用来标示一种选择状态，可以有选中、不选中两种状态；当一个选择框处于选择状态时，在小方框内会出现一个“”；Static Text：静态文本，用于在GUI中显示特定的标识文本；Edit Text：文本编辑框，用户可在其中输入文本；Slider：滚动条，包括三个独立的部分，分别是滑槽、

11、滑块和滑槽两端的箭头；使用该控件，用户可以沿着滚动槽拖动滑块来选择一个值；一般用于滚动其它控件，比如列表框、文本框等；Panel：面板，用于将其它控件分组，面板内的控件将成为面板的子对象；可以给面板设定自己的名称和边界；Button Group：按钮组，类似于面板，但通常只用于容纳一组互斥的单选或切换按钮；Listbox：列表框，其内容一般是一组选项的列表，用户可以从列表中进行选择一项或多项；Pop-up Menu：弹出式菜单，当鼠标点击箭头时，会弹出一组互斥的选项清单，供用户选择其中的一项；Axes：坐标轴，可以在其中绘制二维或三维图形。向GUI窗口中添加控件有两种方法：1. 从组件面板选择

12、一个控件，按下鼠标左键不放，把它拖曳到设计工作区的合适位置，松开鼠标；2. 选中组件面板的一个控件，放开鼠标，这时光标变为十字形状，移动光标到合适位置，点击鼠标。控件放置好后，选中它，可以通过拖曳控件大小缩放句柄改变控件所占区域的大小。下面我们来创建一个简单的带控件的GUI。首先分别添加一个Toggle Button、一个Checkbox、一个Radio Button，并将它们同时选中，如图9.9 所示。然后选择“Align Objects” 把这这三个控件呈垂直居中对齐排列，如图9.10所示。接下来双击Toggle Button（或先选择Toggle Button，再点击按钮），这时会弹出属

13、性编辑器（Property Inspector）。将其中的BackgroundColor属性值改为黄色（如图9.12），并将String属性的值改为“toggle_first”。再来看设计工作区，我们发现Toggle Button控件的标识字符及背景颜色都发生了变化。如图9.13所示点击运行按钮，我们就可以看到运行后的GUI效果了（图9.14）。每一个控件都有自己的属性。常规属性有：1.控件风格和外观1）BackgroundColor：设置控件背景颜色，通过3元素的RGB向量或MATLAB一个预先定义的颜色名称设置。缺省为浅灰色。2）CData：在控件上显示的真彩色图像，使用矩阵表示。3）Fo

14、regroundColor：控件前景（文本）颜色，缺省为黑色。4）String属性：控件上的文本内容，以及列表框和弹出菜单的各个选项。5）Visible：控件是否可见。2.对象的常规信息1）Enable属性： 表示此控件的使能状态，设置为“on”，表示可选，为“off”时则表示不可选。 2）Style：控件对象类型，即常用的控件名称。3）Tag：控件标识，相当于给每一个控件起的个性化的名字，由用户定义。4）TooltipString：为控件设置的提示信息。当鼠标指针停留在某一控件上时，显示设置的提示信息。5）UserData：用户定义的与控件关联的数据，可通过命令“set”和“get”访问。6

15、）Position：控件对象的尺寸和位置，通常用一个四元向量left bottom width height表示。7）Units：计量单位。可设置为pixels、normalized、inches、centimeters、points、characters等，Guide环境下默认为normalized。Normalized为相对单位，规定父对象（如设计工作区窗体）左下角点坐标为（0, 0），右上角点坐标为（1.0, 1.0）;其它单位为绝对单位 (1 point = 1/72 inch) 。8）有关字体的属性，如 FontAngle（字体倾斜）、FontName（字体名称）、FontSize（

16、字体大小）和FontUnits（字体大小计量单位）等。3.控件回调函数（Callback Routine）回调函数是指对控件施加一个动作时被执行的函数（对应一段程序），例如鼠标点击按钮，或用鼠标移动滚动条的滑块等。经常用到的回调函数有：1）BusyAction：回调中断响应函数。当控件的另一个回调函数正在执行时，又对此控件有触发动作，对此动作的相应处理，它属于一种中断响应。有两种选项：即Cancel（取消中断事件）和queue（排队），后者为默认设置。2）ButtonDownFcn：当在控件周围5个像素范围内按下鼠标键时执行的回调函数。3）CallBack：与控件密切相关的标准回调函数，实现的

17、功能因控件的不同而有不同的定义。当对控件施加标准的动作时，执行该函数。4）CreateFcn：在创建对象过程中执行的回调函数。5）DeleteFcn：在删除对象过程中执行的回调函数。6）Interruptible属性：指定当前的回调函数在执行时是否允许中断，去执行其它的函数。对图9.14中的GUI。虽然我们可以点击toggle_first按键，也可以选中Checkbox和Radio Button，但到目前，它们还没有意义，因为对它们的触发并没有激起任何响应，这是因为对应的回调函数还没有实际的执行语句。因此，要想设计出可用的GUI，我们还要进一步学习GUI的编程知识。4.控件当前状态信息1）Li

18、stboxTop：当鼠标指向列表框中最顶层的列表项时，显示的提示信息。2）Max：控件的最大值。3）Min：控件的最小值。4）Value：控件的当前值。这些属性都可以通过属性编辑器来设置。9.1.4 M文件和FIG文件通过以上的操作我们知道了如何去创建一个简单的菜单。第一次运行GUI时会提示文件的存储位置，而当我们按存储路径打开文件夹时，我们发现的不是一个文件，而是两个：后缀名为“.m”的文件（下文简称为M文件）和后缀名为“.fig”的文件（下文简称为FIG文件）。M文件：该文件包括GUI设计、控制函数以及定义为子函数的用户控件回调函数，主要用于控制GUI展开时的各种特征。这个M文件包含GUI

19、初始化和控件回调函数两个组成部分，用户控件的回调函数根据用户与GUI的具体交互行为分别调用。FIG文件：该文件包括GUI图形窗口及其所以子对象的完全描述，包括所以对象的属性值。FIG文件包含所有的图形窗口对象，在用户打开GUI时，MATLAB能够通过读取FIG文件重新构造图形窗口及其所有子对象。读者特别需要注意的一点是：GUI运行后得到的M文件和FIG文件，是同一个文件名。初学者不可以随意改变文件名，更不可把两个文件的文件名改得不一致；否则，将出现程序运行错误的情况。9.2 GUI编程GUI包含许多组件，通过这些组件，用户可以和计算机之间进行交互。GUI的实现任务之一就是决定这些组件如何响应用

20、户的操作；完成这种控制的机制就是要进行GUI编程。实际上，在GUIDE环境下创建的GUI，运行后已经建立了一个框架，这个框架包含在生成的M文件中；另一方面，这个框架还不完整，GUI编程的目的就在于完善这个框架，把对应的M文件补充完整，以实现用户通过GUI和计算机之间的交互。M文件中的回调函数是根据组件的属性值自动命名。GUIDE还将Callback属性值设置为一个字符串，使用户激活该组件时对应的回调函数能够被调用。当用户在GUI界面中添加一个组件时，GUIDE为该组件的Tag（标签）属性指定一个默认的值，用户可以自行修改；回调函数名依据Tag属性值自动生成，当用户保存或运行GUI时，GUIDE

21、在应用程序M文件中自动添加相应的回调函数。例如在上一个例子中，在GUI编辑界面中双击“toggle_first”，我们可以看到其“Tag”属性的值为“togglebutton6”，如图9.15所示。打开生成的M文件，点击“Show function”按钮，看到该M文件中有如图9.16所示的回调函数。选择并单击“toggle_first”对应的回调函数：togglebutton6_Callback，其相应的代码如下：% - Executes on button press in togglebutton6.function togglebutton6_Callback(hObject, even

22、tdata, handles)% hObject handle to togglebutton6 (see GCBO)% eventdata reserved - to be defined in a future version of MATLAB% handles structure with handles and user data (see GUIDATA)% Hint: get(hObject,Value) returns toggle state of togglebutton6其中“%”之后的都是注释的部分。下面我们来编写简单的代码，以对GUI编程能有一个初步的了解。首先，在t

23、ogglebutton6_Callback这个函数下添加如下两行代码：set(handles.checkbox3, Visible, off);set(handles.radiobutton3, String, Rbutton_first);其中checkbox3、radiobutton3是其它两个控件的Tag属性值，Visible和String分别是它们的属性。set命令用来修改现有对象属性值。保存M文件，我们预期GUI的运行结果是点击togglebutton6之后checkbox3变为不可见，而radiobutton3的String属性值变为“Rbutton_first”。我们来运行GUI

24、，结果如图9.17所示。点击toggle_first，结果如图9.18。与我们预料的相同。本例中的控件都可以看作是图形对象。图形对象是用以显示图形和GUI组件的基本元素。表9.1列出了各种图形对象。对象描述Root对计算机屏幕最高级的对象Figure用来显示图形和用户界面的窗口Axes在窗口中显示图形的轴Uicontrol用户界面控制。执行一个对用户交互作用的函数。Uimenu用户定义窗口菜单Uicontextmenu右键单击对象时弹出的菜单Image二维像素基础图Light影响斑点和表面对象着色的光源Line用于诸如plot, plot3, semilogx等函数的线Patch带边缘的填充多

25、边形 Rectangle二维形状，从矩形到椭圆Surface由x-y平面以上的数据值所作图创建的矩阵数据的三维表示Text字符串每个对象都有一个关联函数。这些函数与所创建的对象有相同名称。例如，text函数用于创建文本对象，figure函数创建figure窗口对象，等等。对对象的操作有一些常用的命令，如表9.2所示。函数目的copyobj复制图形对象delete删除对象findobj查找具有指定属性值的对象句柄gca返回当前轴的句柄gcf返回当前窗口的句柄gco返回当前对象的句柄get询问对象属性值set设置对象属性值9.3 实例解析 9.3.1 实例1：peaks函数的轮廓图绘制本例讲解如何

26、实现弹出菜单，以及如何单击命令按钮控件以在坐标系中画出图形。步骤1：用GUIDE创建一个空的GUI，添加一个axes控件和两个Push Button 控件，如图9.19所示。步骤2：把第一个Push Button控件的Sring属性改为“Plot_first”，Tag属性改为“plot_first”。注意更改后应点击其他选项后再关闭属性窗口，否则改变不会生效。同时把第二个Push Button控件的String属性该为“shading_interp”，Tag属性改为“shading_interp_first”。注意用鼠标拉长第二个控件的长度，以使String属性的值能够完全显示。然后使这两个控

27、件对齐，如图20所示。步骤3：保存文件，将文件命名为“plot_first”。点击确定，这时会看到M-file的编辑框。查看其包括的函数，我们会发现其中有“plot_first_Callback”和“shading_interp_first_Callback”两个，它们分别对应两个控件，是两个控件的回调函数。步骤4：再次回到GUIDE，使用“Menu Editor”来编辑菜单。首先添加一个一级菜单，如图9.21所示。再添加一个二级菜单，如图9.22。打开M_file编辑框，这时我们发现又多了两个函数“help_Callback”和“about_Callback”，分别是这两个Menu的回调函数

28、。我们可以先运行看看，如图9.23。点击Help会弹出二级菜单。到目前位置初步的工作已经做好了，现在我们想这个GUI实现如下功能：点击Plot_first时左侧的坐标轴描绘出一个个peaks函数的轮廓图，点击shading_interp时在该图象中添加伪彩色图。但是shading_interp开始时是不可用的（“Enable”属性值为“off”），只有单击Plot_first后才会变为可用。步骤5：接下来我们来编辑M_file。首先，在plot_first_OpeningFcn函数的最后一行添加如下代码：set(handles.shading_interp_first, Enable, off

29、);这样，当运行GUI时shading_interp_first控件是不可用的。然后，在plot_first_Callback和shading_interp_first_Callback下同时添加如下的代码：axes(handles.axes1);这一句把两个控件与坐标轴联系起来。接下来我们在两个回调函数中填入相关的绘图代码。 在plot_first_Callback下添加如下代码：x,y,z = peaks;contour(x,y,z,20,k)set(handles.shading_interp_first, Enable, on);前两句用来绘图，最后一句用来激活shading_inte

30、rp_first控件。 在shading_interp_first_Callback下添加如下代码：x,y,z = peaks;contour(x,y,z,20,k)hold onpcolor(x,y,z)shading interphold off以上代码重新绘制了peaks图形，并在图像中添加了伪彩色图。 接下来，就只剩一个弹出菜单了。在M_file的about_Callback函数下添加如下代码：helpdlg(Name:XiongRenhao,StuNo:20064140510,My Infor);helpdlg的第一个参数是显示的内容，第二个参数是弹出菜单的标题。值得注意的是，这两个

31、参数都应使用英文，因为这样才能避免控件不支持中文所带来的问题。步骤6：保存你的M_file，现在可以运行你的GUI了，如图9.24。注意此时的shading_interp按钮。单击Plot_first，观察绘出的图形，图9.25。此时坐标轴绘出了指定图形，且shading_interp按钮变为可用。单击shading_interp，如图9.26。你可以重复以上两步。接下来单击Help菜单，单击About，你会看到界面的正中出现了如图9.27的窗口。9.3.2 实例2：用控件控制图形的属性本节我们设计一个稍微复杂的GUI，其基本功能包括：根据菜单选择绘制相应曲线和曲面，二维曲线形式为sin（ft

32、）和cos（ft），三维曲面包括圆球和圆柱；动态显示当前图形的名称；用控件控制图形属性，包括图形的自变量的定义域等。创建步骤简要说明如下：步骤1：打开GUI Builder，建立空的GUI，并添加相应的控件。保存为myGUI.fig结果如图9.28所示。表9.3是对各控件属性的简要说明。NameTagStringIntroductionAxes axes1Popup Menupopupmenu1(对应Grid)Grid On/Grid Off打开、关闭网格popupmenu2(对应Current Curve)sin(x)cos(x)syherecylinder指示当前所描绘图形popupmen

33、u3(对应Style)linecircle平滑曲线、圈点集popupmenu4(对应Extend)-2*pi to 2*pi0 or 2*pi0 to 4* pi自变量x的范围Static Texttext5Style样式text2Current Curve当前曲线text3Plot Editor绘图编辑器text4Grid网格text6Extend区间Push Buttonpushbutton1Update更新视图步骤2：表9.4是各组件名称以及其Tag属性的值。点击 编辑菜单按钮，建立如图9.29所示的菜单。步骤3：编辑m-file。点击 “M-”按钮 ，打开M文件编辑器，点击“Show function”按钮 选择相应的函数。 步骤4：将m-file保存为myGUI.m，并运行GUI，结果如图9.30所示。以下是从使用者的角度，对GUI实现功能的一些描述：1.File菜单实现打开fig文件，打印当前GUI、关闭当前GUI的功能。2.2D Plot和3D Plot可以实现绘制具有默认属性的正弦、余弦曲线和球体、柱面，并可以通过Plot Editor改变一些属性。当要改变曲线属性时，要先在Plot Editor中选定属性，然