GUI图形用户界面设计窗口.docx

1、GUI图形用户界面设计窗口GUI图形用户界面设计窗口GUI 是指人与计算机（或程序）之间交互作用的工具和方法，是用户与计算机进行信息交流的方式。如键盘、鼠标、跟踪球、绘制板或麦克风等都可成为人与计算机交换信息的接口。 （Graphical User Interfaces, GUI）是指由窗口、图标、菜单和文本说明等图形对象构成的用户界面。用户以某种方式（如使用鼠标或按键）选择或激活这些对象，使计算机产生某种动作或变化，如实现计算、绘图等。 图形用户界面的功能：让用户定制用户与MATLAB的交互方式。不是唯一与MATLAB的交互方式。 MATLAB中的演示程序demo是使用图形界面GUI的最好例

2、子。 GUI 通过程序编写的方法产生对象，即利用uicontrol、uimenu、uicontextmenu, 等函数以编写M文件的方式来开发整个GUI。 通过MATALAB的GUI编辑界面GUIDE来建立GUI。这个界面类似, VB等开发环境，只要直接通过鼠标将对象拖拽的目的地，就可以快速地构建出整个GUI，并且M文件管理较好，可以快速找到需要修改的部分内容。GUIDE对于新手是一个非常好的选择。 （对“句柄图形”的理解是设计和实现GUI的先决条件，要建立一个具有弹性多功能的GUI就必须先把对象的句柄值与属性弄懂） 1 1）图形对象 MATLAB的图形对象包括计算机屏幕、图形窗口、坐标轴、用

3、户菜单、用户控件、曲线、曲面、文字、图像、光源、区域块和方框等。系统将每一个对象按树型结构组织起来，最上层Root为计算机屏幕，是所有对象的父对象。 父根计算机屏幕图图子UimenuUicontroluimenu座标轴型式:按钮键uimenu无线按钮键检查框兄弟滑标弹出式菜单框架文本编辑 当某个父对象改变属性时，就会影响到该结构下层的所有子对象，如改变窗口对象的位置，则线条与坐标轴对象也会跟着移动。 figure对象（图对象）是指屏幕中产生的窗口，Uicontrol是在figure下的用户控制对象；Uimenu是在figure下的用户接口选项。 2）图形对象句柄 MATLAB在创建每一个图形对

4、象时，都为该对象分配唯一的一个值，称其为图形对象句柄(Handle)。句柄是图形对象的唯一标识符，不同对象的句柄不可能重复和混淆。 计算机屏幕作为根对象由系统自动建立，其句柄值为0，而图形窗口对象的句柄值为一正整数，并显示在该窗口的标题栏，其他图形对象的句柄为浮点数。MATLAB提供了若干个函数用于获取已有图形对象的句柄。 2 1）属性名与属性值 MATLAB给每种对象的每一个属性规定了一个名字，称为属性名，而属性名的取值称为属性值。 2）属性的操作 , set set函数的调用格式为： set(1122) 其中句柄用于指明要操作的图形对象。如果在调用set函数时省略全部属性名和属性值，则将显

5、示出句柄所有的允许属性。 , get get函数的调用格式为： V=get() 其中V是返回的属性值。如果在调用get函数时省略属性名，则将返回句柄所有的属性值。 , reset(h) 重新设置由句柄值h所指定的图形对象所有的属性为它们的默认值。 reset(gca) %重新设置当前坐标轴的属性 3 1figure 建立图形窗口对象使用figure函数，其调用格式为： =figure(1122) MATLAB通过对属性的操作来改变图形窗口的形式。也可以使用figure函数按MATLAB缺省的属性值建立图形窗口： figure =figure 要关闭图形窗口，使用close函数，其调用格式为：

6、close(窗口句柄) 另外，close all 命令可以关闭所有的图形窗口，clf命令则是清除当前图形窗口的内容，但不关闭窗口。 2axes 建立坐标轴对象使用axes函数，其调用格式为： =axes(1122) 调用axes函数用指定的属性在当前图形窗口创建坐标轴，并将其句柄赋给左边的句柄变量。也可以使用axes 函数按MATLAB缺省的属性值在当前图形窗口创建坐标轴： axes = axes 用axes 函数建立坐标轴之后，还可以调用axes 函数将之设定为当前坐标轴，且坐标轴所在的图形窗口自动成为当前图形窗口： axes(坐标轴句柄) 4 （可参考help文件内说明） 1）figure

7、属性 2）axes 3line 4Image 5Text GUI 1get V=get(句柄，属性名) 其中V是返回的属性值。如果在调用get函数时省略属性名，则将返回句柄所有的属性值。 t=0:0.01:10;h=plot(t,sin(t); %h为曲线的句柄值 get(h) 运行结果： Color: 0 0 1 EraseMode: normal LineStyle: - LineWidth: 0.5000 Marker: none MarkerSize: 6 MarkerEdgeColor: auto MarkerFaceColor: none XData: 1x1001 double

8、YData: 1x1001 double ZData: 1x0 double BeingDeleted: off ButtonDownFcn: Children: 0x1 double Clipping: on CreateFcn: DeleteFcn: BusyAction: queue HandleVisibility: on HitTest: on Interruptible: on Selected: off SelectionHighlight: on Tag: Type: line UIContextMenu: UserData: Visible: on Parent: 151.0

9、012 DisplayName: XDataMode: manual XDataSource: YDataSource: ZDataSource: 2set set函数的调用格式为： set(句柄，属性名1，属性值1，属性名2，属性值2，) 其中句柄用于指明要操作的图形对象。如果在调用set函数时省略全部属性名和属性值，则将显示出句柄所有的允许属性。 t=0:0.01:10;h=plot(t,sin(t); %h为曲线的句柄值 set(h,color,0.5 0.5 0.5) %灰色 3 eval( )函数 eval()函数的功能就是将括号内的字符串视为语句并运行 如： eval(y1=sin

10、(2)和语句y1=sin(2)等价 多在循环中使用，可以对多个名字有规则的变量或文件进行操作，比如 for x=1:5 eval(y,num2str(x),=,num2str(x2),;) end GUIGUIDE 1GUI 打开GUI编辑器的3种方法： (1) 在MATLAB主窗口中，选择File菜单中的New菜单项，再选择其中的GUI命令，就会显示图形用户界面的设计样板。 (2) gudie (3) 点击下图红圈处。 GUI设计样板: 图3-1 “GUIDE Quick Start”对话框 MATLAB为GUI设计一共准备了4种样板： Blank GUI()GUI GUI with Uic

11、ontrols(带控件对象的GUI样板) GUI with Axes and Menu(带坐标轴与菜单的GUI样板) Modal Question Dialog(带模式问话对话框的GUI样板)。 后三个样板可以当作初次使用GUIDE的参考，它是GUIDE中提供的模版，可以参考建立GUI或程序编辑方式。 在GUI设计模板中选中一个模板，然后单击OK按钮，就会显示GUI设计窗口。选择不同的GUI设计模式时，在GUI设计窗口中显示的结果是不一样的。 2GUIDEGUI 首先提供一个简单的示例使同学们对GUI先有一个大概的印象。 例 一个简单的GUI入门向导。 （1）打开MATLAB，在命令行中输入

12、gudie ，就会显示图形用户界面的设计样板。 （2）选择“GUI with Axes and Menu”，点击“OK”得到如图3-2所示结果。 图3-2 一个简单的GUI示例 (3) 通过拖拉面板的右下角，可以调整面板的大小。单击工具栏最后面的绿色箭头按钮，在保存之后，即可得到运行结果，如图3-3所示。 图3-3 运行结果 （4）在下拉框中选择不同的内容，单击“update”，可以画出不同的图案。 这是一个建好的例子，界面的建立直接由鼠标选取并拖拽左方GUI对象中的Push Button、Popup Menu与Axes至特定位置建立的（如图3-2所示箭头的位置）。这是关于Popup Menu

13、菜单对象的使用的例子，有关此内容的详细陈述见第五节中Popup Menu菜单的使用。 下面介绍GUIDE设计窗口的操作。 3GUI GUI设计窗口如图3-4所示，由菜单栏、工具栏、控件工具栏以及图形对象设计区等部分组成。GUI设计窗口的菜单栏有File、Edit、View、Layout、Tools和Help 6个菜单项，使用其中的命令可以完成图形用户界面的设计操作。 Tab Order Property Inspector Editor (Tab顺M-File 对象属性查序编辑器 ) Menu Editor 看器 Editor 菜单栏 Run按钮 工具栏 Object Browser 对象栏

14、对象浏览器 Figure窗口 图3-4 GUI设计窗口 1）对象栏 要想了解编辑界面中左边对象图标的含义，可以通过菜单选取File/Preferences选项，然后选择“Show names in component palette”选项，点击“OK”，就可显示对象名称了，如图3-5所示。 图3-5 显示对象名称 在GUI设计窗口创建图形对象后，通过双击该对象，就会显示该对象的属性编辑器。例如，创建一个Push Button对象，并设计该对象的属性值。 2）工具栏 工具栏中的各编辑器如图3-4标识，下面分别介绍。 , 对象属性查看器 利用对象属性查看器，可以查看每个对象的属性值，也可以修改、设

15、置对象的属性值，从GUI设计窗口工具栏上选择Property Inspector命令按钮，或者选择View菜单下的Property Inspector子菜单，就可以打开对象属性查看器。 另外，在MATLAB命令窗口的命令行上输入inspect，也可以看到对象属性查看器。在选中某个对象后，可以通过对象属性查看器，查看该对象的属性值，也可以方便地修改对象属性的属性值。 , 菜单编辑器（Menu Editor） 利用菜单编辑器，可以创建、设置、修改下拉式菜单和快捷菜单。从GUI设计窗口的工具栏上选择Menu Editor命令按钮，或者选择Tools菜单下的Menu Editor子菜单，就可以打开菜单

16、编辑器。菜单编辑器左上角的第一个按钮用于创建一级菜单项。第二个按钮用于创建一级菜单的子菜单。菜单编辑器的左下角有两个按钮，选择第一个按钮，可以创建下拉式菜单。选择第二个按钮，可以创建Context Menu菜单。选择它后，菜单编辑器左上角的第三个按钮就会变成可用，单击它就可以创建Context Menu主菜单。在选中已经创建的Context Menu主菜单后，可以单击第二个按钮创建选中的Context Menu主菜单的子菜单。与下拉式菜单一样，选中创建的某个Context Menu菜单，菜单编辑器的右边就会显示该菜单的有关属性，可以在这里设置、修改菜单的属性。菜单编辑器左上角的第四个与第五个按

17、钮用于对选中的菜单进行左移与右移，第六与第七个按钮用于对选中的菜单进行上移与下移，最右边的按钮用于删除选中的菜单。 , 位置调整工具 利用位置调整工具，可以对GUI对象设计区内的多个对象的位置进行调整。从GUI设计窗口的工具栏上选择AlignObjects命令按钮，或者选择Tools菜单下的Align Objects菜单项，就可以打开对象位置调整器。 对象位置调整器中的第一栏是垂直方向的位置调整。对象位置调整器中的第二栏是水平方向的位置调整。在选中多个对象后，可以方便的通过对象位置调整器调整对象间的对齐方式和距离。 , 对象浏览器 利用对象浏览器，可以查看当前设计阶段的各个句柄图形对象。从GU

18、I设计窗口的工具栏上选择Object Browser命令按钮，或者选择View菜单下的Object Browser子菜单，就可以打开对象浏览器。例如，在对象设计区内创建了3个对象，它们分别是Edit Text、Push Button、ListBox对象，此时单击Object Browser按钮，可以看到对象浏览器。 在对象浏览器中，可以看到已经创建的3个对象以及图形窗口对象figure。用鼠标双击图中的任何一个对象，可以进入对象的属性查看器界面。 , Tab顺序编辑器 利用Tab顺序编辑器(Tab Order Editor)，可以设置用户按键盘上的Tab键时，对象被选中的先后顺序。选择Tool

19、s菜单下的Tab Order Editor菜单项，就可以打开Tab顺序编辑器。例如，若在GUI设计窗口中创建了3个对象，与它们相对应的Tab顺序编辑器。 , M文件编辑器 当用户通过GUIDE建立GUI后，同时产生两个文件FIG文件和M文件，点击M文件编辑器即可打开其M文件，还可以编写GUI下每个对象的Callback与一些初始设置，如图3-6所示。直接在该列表上依据对象的名称与Callback来选取欲查询的内容后，GUIDE即会立即移动到选取得Callback位置处。如选取pushbutton1_Callback，则GUIDE就会将光标移动到如图3-7所示的内容处，如此就可以编辑相应的内容了

20、。 显示所有Callback函数 图3-6 M文件编辑器界面 图3-7 Callback编辑区 4 练习要求建立一个如图3-8所示的GUI，点击 “plot”，便可画出波形。 图3-8 练习GUI 1）新建一个Blank GUI(默认)样板； 2）添加axes, static text, edit box, and a button四个对象； 3）运行run，保存文件 4）Callback plotbutton_Callback添加画波形的程序。 function PlotButton_Callback(hObject, eventdata, handles) x = -10 : 0.1 :

21、10; s = get(handles.edit1, String); y = eval(s); %eval just evaluates the given string handles.axes1; %Subsequent commands draw on axes1. plot(x, y); ： Edit Text 用Edit Text为输入接口， 若输入值为数值时可以使用str2num(get(h,string)，将输入到句柄值为h的Edit Text对象的数值取出。 若要将数值A显示到句柄值为h的Edit Text中，可用set(h,stringnum2str(A); 若输入值为Ma

22、tlab语句或表达式时，如sin(x)，可以使用eval(get(h,string). eval()函数的功能就是将括号内的字符串视为语句并运行 如： eval(y1=sin(2)和语句y1=sin(2)等价 多在循环中使用，可以对多个名字有规则的变量或文件进行操作，比如 for x=1:5 eval(y,num2str(x),=,num2str(x2),;) end GUIDE GUIDE菜单编译器主要用于GUI。点击菜单编译器图标打开如图4-1所示的“Menu Editor”窗口。通过菜单编译器可以创造出两种模式的菜单，即uimenu与uicontextmenu。 图4-1 “Menu E

23、ditor”窗口 Label输入在菜单中要显示的标题文字，如File。 Tag对象卷展栏，当用户借助findobj函数时，即可利用这个Tag的属性值去找相应的句柄值（Handle）。 AcceleratorCtrl+:可以指定快捷键，则当用户按下Ctrl+指定的快捷键时，就会执行该菜单的操作。 资料“Matlab7.x界面设计与编译技巧.pdf”第8章给出了一个完整的建立菜单的范例。请同学们按照此范例认真操作一遍，掌握菜单设计的基本操作。 （参考程序menu_lx.fig menu_lx.m） 要求建立图4-2、4-3所示的两个主菜单。 图4-2 图4-3 Context Menu Conte

24、xt Menu菜单与普通菜单不同，它可以附着在任何uicontrol对象上，而普通菜单只能附着在figure上。 要求建立图4-4所示的Context Menu菜单。 另外，Matlab中提供了许多内置的GUI对话框，除了简化开发类似项目流程外，还可以设计出具有在操作上更加富有弹性、更富人性化的界面。关于这部分内容参见资料“Matlab7.x界面设计与编译技巧.pdf”第11章。 GUIDEGUI Popup Menu Popup Menu主要用于建立，并结合switchcase陈述式，即可达到选取选项触发指定操作。（以GUI设计模版中的第三个样板为例） ：用鼠标选取并拖拽左方GUI对象中Po

25、pup Menu至特定位置，然后双击打开属性检查器，找到String属性项单击按钮，出现一对话框，在此对话框中输入下拉菜单内容，如图5-1所示。 图5-1 输入Popup Menu的string属性内容 ：编辑Callback，直接在Callback函数中输入即可。这里通过Value属性所返回的值了解当前选取的选项后，再由switchcase编辑选取该选项所要执行的相应的操作。 function pushbutton1_Callback(hObject, eventdata, handles) % hObject handle to pushbutton1 (see GCBO) % event

26、data reserved - to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA) axes(handles.axes1); cla; %以下为callback程序 %由Value属性来判断当前用户所选取的选项 popup_sel_index = get(handles.popupmenu1, Value) ; switch popup_sel_index case 1 %选项1 所执行的操作 plot(rand(5); case 2 %选项2 所执行的操作 plot(sin(1:0.01:25.99); case 3 %选项3 所执行的操作 bar(1:.5:10); case 4 %选项4 所执行的操作 plot(membrane); case 5 %选项5 所执行的操作 surf(peaks); end GUI 要求建立一个GUI演示界面将前面的设计任务连接起来。界面参考如图6-1、图6-2、图6-3所示。 图6-1 主界面 打开主界面进入演示内容选择界面，之后可以选择演示内容。 图6-2 演示内容选择界面 Matlab7.x界面设计与编译技巧.pdf