1、第七章 MATLAB 的图形用户界面(GUI) 程序设计Chapter 8: Design of MATLAB of GUI program图形用户界面 GUI(Graphical User Interfaces)是一种用户和计算机进行信息交流的工具和方法，由各种图形对象组成，在这种用户界面下，用户的命令和对程序的控制是通过鼠标等输入设备“选择”各种图形对象来实现的。软件开发者只需在由软件开发工具自动生成的程序代码中添加自己的运算或控制代码，就可以完成应用程序的设计。目前 90%以上的应用程序和软件都是在 GUI 下运行的。MATLAB 有两种 GUI 用户界面控件的创建方式，基于命令行的编程
2、方式制作和基于 MATLAB 提供的图形用户界面开发环境GUIDE 中的图形用户界面开发工具的 GUI 创建方式制作。这里主要介绍基于 GUIDE 的创建方式。MATLAB 的 GUI 的基本图形对象分为控件对象 uicontrol 和用户界面菜单对象 uimenu（包括固定菜单和现场菜单） ，简称控件和菜单。一. 控件对象及属性(Object and its attributes of controller)1. GUI 控件对象类型(The mode of controller object)控件对象是事件响应的图形界面对象。当某一事件发生时，应用程序会做出响应并执行某些预定的功能子程序（
3、Callback）. 常用的基本控件：（1） 按钮(Push Buttons) ：执行某种预定的单功能或操作；（2） 双位开关按钮(Toggle Button)：产生一个动作并指示一个二进制状态（开或关） ，当鼠标点击它时按钮将下陷，并执行 callback（回调函数）中指定的内容，再次点击，按钮复原，并再次执行 callback 中的内容； （3） 单选框(Radio Button)：单个的单选框用来在两种状态之间切换，多个单选框组成一个单选框组时，用户只能在一组状态中选择单一的状态，或称为单选项；（4） 复选框(Check Boxes)：单个的复选框用来在两种状态之间切换，多个复选框组成一
4、个复选框组时，可使用户在一组状态中作组合式的选择，或称为多选项；（5） 文本编辑器(Editable Texts)：用来使用键盘输入字符串的值，可以对编辑框中的内容进行编辑、删除和替换等操作； （6） 静态文本框(Static Texts) ：仅仅用于显示单行的说明文字；（7） 滚动条(Slider) ： 可输入指定范围的数量值；（8） 控件边框(Frames)：在图形窗口圈出一块区域；（9） 列表框(List Boxes)：在其中定义一系列可供选择的字符串；（10）弹出式菜单(Popup Menus)： 让用户从一列菜单项中选择 一项作为参数输入；（11）坐标轴(Axes)： 用于显示图形和
5、图象2. 控件对象的描述(Description of controller object)MATLAB 中的控件大致可分为两种，一种为动作控件，鼠标点击这些控件时会产生相应的响应。一种为静态控件，是一种不产生响应的控件，如文本框等。每种控件都有一些可以设置的参数，用于表现控件的外形、功能及效果，既属性。属性由两部分组成：属性名和属性值，它们必须是成对出现的。控制对象的属性包括公共属性、基本控制属性、修饰控制属性、辅助属性和 callback 管理属性。3. 控件对象的属性(Attributes of controller object)用户可以在创建控件对象时，设定其属性值，未指定时将使用系
6、统缺省值。两大类控件对象属性：第一类是所有控件对象都具有的公共属性，第二类是控件对象作为图形对象所具有的属性。A, 控件对象的公共属性Children 取值为空矩阵，因为控件对象没有自己的子对象Parent 取值为某个图形窗口对象的句柄，该句柄表明了控件对象所在的图形窗口Tag 取值为字符串，定义了控件的标识值，在任何程序中都可以通过这个标识值控制该控件对象Type 取值为 uicontrol,表明图形对象的类型，用户不能改写这个属性UserDate 取值为空矩阵，用于保存与该控件对象相关的重要数据和信息，用 set 和 get 函数可以访问该属性Visible 取值为 no 或 off，决定
7、空间是否在图形窗口可见。B,控件对象的基本控制属性BackgroundColor 取值为颜色的预定义字符或 RGB 数值Callback 取值为字符串,可以是某个 M 文件名或一小段MATLAB 语句，当用户激活某个控件对象时，应用程序就运行该属性定义的子程序。Enable 取值为 on（缺省值）,inactive 和 off，当取值为 on 时，无论何时激活控件对象 matlab 都执行 Callback 属性定义的子程序。Extend 取值为四元素矢量0，0，width, height,记录控件对象标题字符的位置和尺寸，该属性只能读不能写。ForegroundColor 取值为颜色的预定义
8、字符或 RGB 数值Max,Min 取值都为数值String 取值为字符串矩阵或数组，定义控件对象标题或选项内容Style 取值可以是 pushbutton, radiobutton, checkbox, edit, text, slider, frame, popupmenu 或 listbox，由相应的值定义控件的类型。Units 计量单位，取值可以是 pixels, normalized, inches, centimeters 或 pointsValue 取值可以是矢量，也可以是数值，其含义及解释依赖于控件对象的类型C,控件对象的修饰控制属性FontAngle 取值为 normal,
9、italic, oblique,定义字体的形态FontName 取值为控件标题等字体的字库名，必须与系统支持的字库名一致。FontSize 取值为数值，定义字号FontWeight 取值为 normal, light, demi 或 bold，定义字体的粗细。HorizontalAligment 取值为 left,center 或 right,定义对齐方式D, 控件对象的辅助属性ListboxTop 取值为数量值，定义列表框中最上方的字符串在string 属性中的序号。SliderStop 取值为两元素矢量minstep,maxstep, 用于 slider 控件Selected 取值为 on
10、 或 offSlectionHighlight 取值为 on 或 off，决定控件对象被选中时，是否显示被选中的对象。E, Callback 管理属性BusyAction 取值为 cancel 或 queue,决定采取的控制中断执行控件对象的 Callback 的调用方式。ButtonDownFun 取值为字符串，一般为某个 M 文件名或一小段MATLAB 程序CreateFun 取值为字符串，一般为某个 M 文件名或一小段MATLAB 程序DeletFun 取值为字符串，一般为某个 M 文件名或一小段MATLAB 程序HandleVisibility 取值为 on, callback 或 o
11、ffInterruptible 取值为 on 或 off,决定控件对象的 Callback 是否可以被随后的 callback 调用中断。二GUI 开发环境(GUI Development Environment, GUIDE)MATLAB 提供了一套可视化的创建图形窗口的工具，使用这个用户界面开发环境可方便的创建 GUI 应用程序, 它可以根据用户设计的 GUI 布局，自动生成 M 文件的框架，用户可使用这一框架编制自己的应用程序。MATLAB 可视化的创建图形用户接口（GUI）工具包括：*布局编辑器(Layout Edtor)-在图形窗口中加入及安排对象。*几何排列工具(Alignment
12、 Tool)-调整各对象相互之间的几何关系和位置*属性编辑器(Property Inspector)-查询并设置属性值*对象浏览器（Object Browser)-用于获得当前 MATLAB 图形用户界面程序中所有的全部对象信息，对象的类型，同时显示控件的名称和标识，在控件上双击鼠标可以打开该控件的属性编辑器。*菜单编辑器(Menu Editor)-建立窗口菜单条的菜单和任何构成布局的弹出菜单 在 MATLAB 中， GUI 的设计是以 M 文件的编程形式实现的，GUI 的布局代码存储在 M 文件和 MAT 文件中，而在 MATLAB6中有了很大的改变，MATLAB6 将 GUI 的布局代码存
13、储在 FIG 文件中，同时还产生一个 M 文件用于存储调用函数，在 M 文件中不再包含 GUI 的布局代码，在开发应用程序时代码量大大减少。GUI 工具的使用1、布局编辑器(Layout editor)的使用： 在命令窗口输入 GUIDE 命令或点击工具栏中的 guide 图标都可以打开空白的布局编辑器，在命令窗口输入 GUIDE filename 可打开一个已存在的名为 filename图形用户界面。布局编辑器可以启动用户界面的控制面板，上述工具都必须从布局编辑器中访问。使用用户界面开发环境的一般步骤为：（1）布局编辑器参数设置选 File 菜单下的 Preferences 菜单项打开参数设
14、置窗口，点击树状目录中的 GUIDE，既可以设置布局编辑器的参数。（2）将控件对象放置到布局区a. 用鼠标选择并放置控件到布局区内；b. 移动控件到适当的位置；c. 改变控件的大小；d. 选中多个对象的方法；（3）布局编辑器的弹出菜单在任一控件上按下鼠标右键，会弹出一个菜单，通过该菜单可以完成布局编辑器的大部分操作。 （4）激活图形窗口选 Tools 菜单中的 Activate Figure（Run ）项或点击工具条上的 ActivareFigure（Run）按钮, 在激活图形窗口的同时将存储 M 文件和 FIG 文件，如所建立的布局还没有进行存储，用户界面开发环境将打开一个 Save As
15、对话框，按输入的文件的名字，存储一对同名的 M 文件和带有.fig 扩展名的 FIG 文件。（5）运行 GUI 程序在命令窗口直接键入文件名或用 openfig, open 或 hgload 命令运行 GUI 程序。2 几何位置排列工具(Alignment tool)的使用：可以通过选择工具栏中的排列工具图标打开排列工具窗口，用于调节各控件对象的水平、垂直位置和相互之间相对关系。3 用属性编辑器设置控件属性(Set attributes of controller with Property Inspector)在属性编辑器中提供了所有可设置的属性列表并显示出当前的属性，用户可根据需要设置控件
16、属性。（1）打开属性编辑器(Opening Property Inspector)：三种方法：1. 用工具栏上的图标打开； 2. 从 View 菜单中选择 Property Inspector 菜单项；3. 在按鼠标右键弹出的 Property Inspector菜单中选择菜单项。（2）使用属性编辑器(Using Property Inspector)：属性编辑器中包含了控件的基本属性，都可以在编辑器中填写或更改属性值，一般情况下许多属性可采用默认值，只对与制作目的直接相关的属性进行编辑。4 菜单编辑器(Menu Editor)： 用于制作 GUI 窗口的菜单，包括菜单的设计和编辑,菜单编辑器
17、有八个快捷键：1） 创造新的菜单项: New menu2） 创造新的子菜单项: New menu item3） 创造新的鼠标右键菜单项: New context menu4） 变为上一级菜单: Move selected item backward5） 变为下一级菜单: Move selected item forward6） 菜单项上移: Move selected item up7） 菜单项下移: Move selected item down8） 删除菜单项: Delete selected item 可以利用它们任意添加或删除菜单,可以设置菜单项的属性,包括名称( Label)、标识(
18、 Tag)、选择是否显示分隔线( Separator above this item)、是否在菜单前加上选中标记(Item is checked)、设置调用函数(Callback)。菜单编辑器的下方有两个可选择的页面，分别用于设计主菜单和鼠标右键菜单，鼠标右键菜单为主程序窗口和控件上的弹出菜单，可设计多个鼠标右键菜单，每个控件可以通过属性查询器中UIContextMenu 选择一个鼠标右键菜单，UIContextMenu 的缺省选项为(None)5 对象浏览器(Object Browsers)：用于浏览当前程序所使用的部对象信息，可以在对象浏览器中选种一个或多个控件来打开该控件的属性编辑器。三
19、、GUI 程序设计(GUI Program design)GUI 设计包括图形界面的设计和功能设计两个方面。一般步骤：*分析界面所要实现的主要功能，明确设计任务*在稿纸上绘制界面草图，优化草图*按设计草图上机制作静态界面*编写界面动态功能的程序，例 1： 制作一个可进行图形显示、绘图启动和做 3D 旋转操作的GUI： 1、 布置控件：一个坐标系，一个显示标题的文本框，一个选 择三维旋转的复选框和一个启动绘图的按钮。2、 定义文本框的属性：String-简单设计示例，FontName-隶书，FontSize-223、 定义坐标系: Visibleoff, a. 定义按钮属性: string:加名
20、称，选择FontName,FontSize,ForeGroundColor 和按钮颜色BackgroundColor. Callback:surf(peaks(60).4、 定义复选框: String3D 旋转,Callbackrotate3d例 2：设计一个简单信号分析仪的程序，要求根据输入的两个频率和时间间隔，计算函数 x=sin(2f 1t)+sin(2f 2t) 的值，并对函数进行快速傅立叶变换，最后分别绘制时域和频域的曲线。1. 设计图形界面(GUI Design)设计步骤： （1） 在布局编辑器中布置控件，两个坐标轴、3 个文本编辑框、1 个按钮和 3 个静态文本框；（2） 使用几
21、何位置排列工具对控件的位置进行调整；（3） 设计控件的属性，大部分属性取默认值，只对字体属性和静态文本框按需求设置，按钮标题克改为“绘图” ； （4） 设置其他绘图属性，主窗口可加标题“信号分析仪” 。2. 设置控件的标识(Set the Tag of controller) 控件的标识(Tag)是对于各控件的识别,每个控件载创建时都会由开发环境自动产生一个标识,在程序设计中,为了编辑、记忆和维护的方便,一般为控件设置一个新的标识。本例设置第一个坐标轴的标识为：frequency_axes, 用于显示频域图形; 第二个坐标轴的标识为：time_axes, 用于显示时域图形。三个文本编辑框的标识
22、为 f1_input, f2_input, t_input,分别用于输入两个频率和自变量时间的间隔.3. 编写代码(Edit code)GUI 图形界面的功能,还是要通过一定的设计思路和计算方法,由特定的程序来实现。为了实现程序的功能，还需要在运行程序前编写一些代码，完成程序中变量的赋值、输入输出、计算及绘图等工作。本例的代码内容为:(1) 设置对象的初始值;分别设置三个文本编辑框的初始值为：f1_input=20f2_input=50t_input=0:0.001:0.5(2) 编写代码:%1) 从 GUI 获得用户输入的数据，本例中输入的三个数据%分别为频率 1、频率 2 和时间间隔。f1
23、=str2double(get(handles.f1_input,String);f2=str2double(get(handles.f2_input,String);t=eval(get(handles.t_input,String);%2) 计算数据，计算函数值，按指定点进行快速傅立叶变%换，并计算频域的幅值和频域分辨率。x=sin(2*pi*f1*t)+sin(2*pi*f2*t);y=fft(x,512);m=y.*conj(y)/512;f=1000*(0:256)/512;%3) 在第一个坐标轴中绘制频域曲线。axes(handles.frequency_axes)plot(f,m
24、(1:257)set(handles.frequency_axes,XminorTick,on)grid on%4) 在第二个坐标轴中绘制时域曲线。axes(handles.time_axes) %选择适当的坐标轴plot(t,x)set(handles.time_axes,XminorTick,on)grid on运行程序(Running program)：启动 run and save 键即可运行程序。可在 3 个文本编辑框中输入不同的数值，按动绘图按钮完成分析计算和结果显示。例 3 ：制作一个曲面光照效果的演示界面，如图所示，四个弹出式菜单分别用于选择曲面形式、色彩图、光照模式和反射模式
25、，三个滚动条用于确定光源的位置，一个按钮用于退出演示。制作要点：（1）建立一个静态文本，用于显示界面的标题：光照效果演示；（2）建立坐标轴对象，用于显示图形；（3）建立四个下拉菜单，分别用于选择绘图表面的形状、色图、光照模式和反射模式，每个下拉菜单的上方都有一个静态文本用于说明菜单的作用；（4）在一个 frame 上建立三个滑条用于确定光源的位置，并在 frame 上方加一说明；（5）建立一个按钮用于退出演示；（6）为各控件编写回调程序：各控件的回调函数需分别写入，在被编辑的控件上单击鼠标右键调出下拉菜单，通过 View Callback 选项，单击 Callback选项，在打开的存储对话框内
26、输入预定的名称建立 GUI 文件，点击存储后会直接打开自动生成的 M 文件框架，并且被编辑的控件需要输入回调函数的地方将处于高亮状态，在该处直接编写或将预先编好的程序拷贝在该处即完成了该控件回调函数的输入。本例各控件的 callback 函数的内容分别为：function varargout = pushbutton1_Callback(h, eventdata, handles, varargin)delete(handles.figure1)% -function varargout = popupmenu1_Callback(h, eventdata, handles, varargin)
