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

1、第7章 GUI图形用户界面设计本讲目标本讲目标了解GUI设计的基本流程掌握GUI控件的设计方法掌握GUI中主要的函数结构主要内容主要内容GUI图形用户界面设计图形用户界面设计GUI设计方法设计方法用户控件的制作用户控件的制作用户菜单的制作用户菜单的制作M文件的函数构成文件的函数构成7.1 GUI设计工具介绍启动启动GUI的方式的方式在命令窗口的提示符下，输入命令：Guide打开GUIDE启动界面guide file打开文件名为file的GUIDE用户界面点击菜单项File:NewGUI，打开GUIDE启动界面点击MATLAB上 按钮，打开GUIDE启动界面7.1.1 GUI的启动方法的启动方法

2、GUIDE Quick Start对话框GUIDE设计工作台（主要由4个功能区，6个实用工具组成）设计工作区控件选择区菜单条工具条工作区缩放句柄 在通常状况下，GUI设计工作台中的组件面板并不显示出组件的名称。如果需要显示组件名称，需要进行以下的操作：从File菜单中选择Preferences选项，勾选Show names in component palette选项即可Preferences选项注意：通过在注意：通过在File菜单下选择菜单下选择Preferences，打开设置对话框，用户可以进行相，打开设置对话框，用户可以进行相应的设置，自定义应的设置，自定义GUIDE设计环境设计环境GU

3、IDE创建的创建的GUI的的M文件，由一系列子函数构成，包含主函数、文件，由一系列子函数构成，包含主函数、Opening函数、函数、Output函数和回调函数函数和回调函数第一行为主函数声明，必须指定主函数名，且与文件名相同；varargin为输入参数，varargout为输出参数Opening函数是在GUI开始运行但还不可见的时候执行，主要进行初始化操作，为GUI第一个执行的函数Output函数是必要时可输出数据到命令行，是第二个执行的函数，以上两个函数只会执行一次Callbacks函数是当用户每次触发GUI对象时，一般都会执行一个相应的回调函数7.1.2 GUI文件的构成文件的构成GUID

4、E作为作为GUI设计与开发的集成环境，是由一套设计与开发的集成环境，是由一套MATLAB工具集构成工具集构成版图编辑器（Layout editor）：从控件区选择控件对象并放置到布局区，布局区被激活后就成为GUI应用程序的图形窗口属性编辑器（Property Inspector）：通过简单的可视化操作，可以实现对空间属性的设置菜单编辑器（Menu Editor）：用来实现菜单的设计和编辑位置调整工具（Alignment tool）：用于调节各控件对象之间的几何关系和位置对象浏览器（Object Browsers）：用于浏览当前GUI应用程序中所有的对象信息Tab顺序编辑器（Tab Order

5、Editor）：用于调整所有控件对象的Tab键的切换顺序M文件编辑器（M-File Editor）：用于编辑GUI应用程序中的函数文件7.1.3 GUI的构成的构成7.2 GUI设计方法基于基于GUIDE环境的环境的GUI设计原则设计原则先完成大致界面布局，再编写功能程序界面风格保持一致，引导用户的使用习惯基于基于GUIDE环境的环境的GUI实现步骤实现步骤明确分析界面所要实现的主要功能，明确设计任务绘制界面草图，注意从使用者角度来考虑界面布局利用GUI设计工具制作静态界面利用M文件编写动态功能程序7.3 用户控件的制作控件对象的描述控件对象的描述控件对象的属性控件对象的属性控件对象的公共属性

6、控件对象的基本控制属性控件对象的修饰控制属性控件对象的辅助属性Callback管理属性对话框设计对话框设计公共对话框专用对话框MATLAB提供的标准控件列表提供的标准控件列表对象选择按钮(Select)：用来选取工作区上部署的控件按钮(Push Button)：执行某种预定的功能或操作滚动条(Slider)：可输入指定范围的数量值单选框(Radio Button)：单个的单选框用来在两种状态之间切换，多个单选框组成一个单选框组时，用户只能在一组状态中选择单一的状态，或称为单选项复选框(Check Box)：单个的复选框用来在两种状态之间切换，多个复选框组成一个复选框组时，可使用户在一组状态中作

7、组合式的选择，或称为多选项文本编辑器(Edit Text)：用来使用键盘输入字符串的值，可以对编辑框中的内容进行编辑、删除和替换等操作静态文本框(Static Text)：仅仅用于显示单行的说明文字弹出式菜单(Pop-up Menu)：允许用户从一列菜单项中选择一项作为参数输入列表框(Listbox)：在其中定义一系列可供选择的字符串开关按钮(Toggle Button)：产生一个动作并指示一个二进制状态（开或关），当鼠点击它时按钮将下陷，并执行callback（回调函数）中指定的内容，再次点击，按钮复原，并再次执行callback中的内容坐标轴(Axes)：用于显示图形和图象面板(Panel

8、)：用作其它控件的容器按钮组(Button Group)：用作按钮控件的容器ActiveX控件(ActiveX Control)：可以使用的第三方控件7.3.1 控件对象的描述控件对象的描述Children：取值为空矩阵，因为控件对象没有自己的子对象Parent：取值为某个图形对象的句柄，该句柄表明了控件对象所在的图形窗口Tag：取值为字符串，定义了控件的标识符，在任何程序中都可以通过这个标识符控制该控件对象。虽然Tag有默认值，建议修改为带有具体含义的字符串，以增加程序可读性和方便回调函数使用Type：取值为uicontrol，表明图形对象的类型UserData：取值为空矩阵，用于保存与该控

9、件对象相关的重要数据和信息；Visible：取值为on或off（1）控件）控件对象的公共属性对象的公共属性7.3.2 控件对象的属性控件对象的属性BackgroundColor：取值为颜色的预定义字符或RGB数值Callback：取值为字符串，可以是某个M文件名或一小段MATLAB语句，当用户激活某个控件对象时，应用程序就运行该属性定义的子程序Enable：取值为on（默认值），inactive和offExtend：取值为四元素矢量0, 0, width, height，记录控件对象标题字符的位置和尺寸ForegroundColor：取值为颜色的预定义字符或RGB数值Max，Min：取值都为数

10、值String：取值为字符串矩阵或数组，定义控件对象标题或选项内容Style：取值可以是pushbutton，radiobutton，checkbox，edit，text，slider，frame，popupmenu或listboxUnits：取值可以是pixels（像素），normalized（按比例缩放），inches（英寸），centimeters（厘米），points（点阵）或characters（字符）。如果选择normalized，那么当resize设为on时，控件或字体大小随着整个窗口的缩放而改变Value取值可以是矢量，也可以是数值，其含义及解释依赖于控件对象的类型（2）控件对

11、象的基本控制属性）控件对象的基本控制属性FontAngle：取值为normal，italic或obliqueFontName：取值为控件标题等字体的字库名FontSize：取值为数值FontUnits：取值可以是pixels（像素），normalized（按比例缩放），inches（英寸），centimeters（厘米），points（点阵）或characters（字符）。如果选择normalized，那么当resize设为on时，控件或字体大小随着整个窗口的缩放而改变HorizontalAligment：取值为left，center或right，定义对齐方式（3）控件对象的修饰控制属性）控件

12、对象的修饰控制属性（4）控件对象的辅助属性）控件对象的辅助属性函数名函数名函数说明函数说明ListboxTop取值为数量值SliderStop取值为两元素矢量minstep,maxstep，用于slider控件Selected取值为on或offSlectionHoghlight取值为on或off（5）Callback管理属性管理属性函数名函数名函数说明函数说明BusyAction取值为cancel或queueButtDownFun取值为字符串，一般为某个M文件名或一小段MATLAB程序Creatfun取值为字符串，一般为某个M文件名或一小段MATLAB程序DeletFun取值为字符串，一般为某

13、个M文件名或一小段MATLAB程序HandleVisibility取值为on，callback或offInterruptible取值为on或off公共对话框公共对话框文件打开对话框文件打开对话框文件保存对话框：用于保存文件文件保存对话框：用于保存文件颜色设置对话框：用于图形对象颜色的交互设置颜色设置对话框：用于图形对象颜色的交互设置字体设置对话框：用于字体属性的交互式设置字体设置对话框：用于字体属性的交互式设置打印设置对话框：用于打印页面的交互式设置打印设置对话框：用于打印页面的交互式设置打印预览对话框：用于对打印页面进行预览打印预览对话框：用于对打印页面进行预览打印对话框：用于打印参数设置打

14、印对话框：用于打印参数设置专用对话框专用对话框错误信息对话框：用于提示错误信息错误信息对话框：用于提示错误信息帮助对话框：用于帮助提示信息帮助对话框：用于帮助提示信息输入对话框输入对话框列表选择对话框列表选择对话框信息提示对话框信息提示对话框问题提示对话框问题提示对话框进程条进程条警告信息对话框警告信息对话框7.3.3 对话框设计对话框设计例例峰函数peaks三维曲面图初步布局：根据草图将控件选择区的相应控件拖拉到设计工作区的相应位置 以“计算器”界面草图为例属性设置：每一个控件都不可能是完全符合界面设计要求的，需要对其属性进行设置，以获得所需的界面显示效果具体操作：具体操作：通过双击该控件，

15、或利用GUI设计工具的下拉菜单View: Property Inspector打开控件属性对话框。属性对话框具有良好的交互界面，以列表的形式给出该控件的每一项属性。 例如右图是“+”按钮的属性列表。精细调整：利用对齐工具，排列控件的位置，使控件的大小、位置更加协调界面激活：保存静态界面后，利用工具栏上的运行按钮激活该界面。激活后可以看到两个同名文件：caculator.m和caculator.fig24下面对各控件的主要属性进行一下说明：1) 双击设计工作区的空白部分，打开整个图形窗的属性框。MenuBar: none%图形窗是否使用标准菜单Name: caculator%图形窗名称Resiz

16、e: off%图形窗不能缩放Tag: mainWnd%图形窗的句柄 handles.mainWnd2)静态文本编辑框的属性设置。FontSize: 15%字体大小FontUnits: points%字体大小的度量单位HorizontalAlignment: Center %对齐方式String: Expression%待显示的字符Tag: text1%该静态文本框的句柄handles.text1Units: points%文本框度量单位 Units或FontUnits可选择：inches(英寸)，centimeters (厘米)， normalized(按比例缩放)，points(点阵)， p

17、ixels (像素)， characters(字符)。如果选择normalized，那么当resize设为on时，控件或字体大小随着整个窗口的缩放而改变。 水平对齐方式 HorizontalAlignment可以是left, center, right。 控件句柄Tag有默认值，建议修改为带有具体含义的字符串，以增加程序可读性和方便回调函数调用。253)可编辑文本框的属性设置。String: 0%初始状态下显示数字0Tag: pExp%可编辑文本框的句柄其它和静态文本框相同4)单功能按钮属性设置。以按钮“1” 为例String: 1Tag: p1其它和静态文本框相同例例峰函数peaks三维曲面

18、图 使用GUIDE设计和实现一个“Hello World”程序，目标是当按下按钮时，由文本框显示信息“Hello World”根据GUI的设计原则，首先进行“Hello World”程序界面设计（1）利用版图编辑器在布局区中添加一个按钮控件（Push Button）和一个静态文本框控件（Static Text）峰函数peaks三维曲面图（2）双击控件调出属性编辑器，对其进行属性的设置针对按钮控件，设置String属性为“hello”，表示控件的显示信息；设置Tag属性为“helloBt”，表示控件的唯一标识符针对静态文本框控件，设置String属性为空，表示初始状态下不显示任何信息；设置Tag

19、属性为“helloStr”；并且为了显示清晰，设置其FontSize属性为“28”，表示字体的大小注意：注意：Tag属性设置必须唯一，因为属性设置必须唯一，因为Tag属性是系统资源的唯一标识符属性是系统资源的唯一标识符其次，根据功能要求，给按钮添加动作，即给它编写一个回调函数（Callback）（1）鼠标右键单击按钮控件，弹出菜单，选择菜单项View CallbacksCallback，打开helloworld.m文件并定位在该控件的回调函数（2）为了实现静态文本框的信息输出，需要在回调函数中添加代码。将句柄集handles中的helloStr（即静态文本框控件）的String属性设置为Hel

20、lo World，即完成了设计要求在函数helloBt_Callback中添加代码如下function helloBt_Callback(hObject, eventdata, handles)% hObject handle to helloBt (see GCBO)% eventdata reserved - to be defined in a future version of MATLAB% handles structure with handles and user data (see GUIDATA)set(handles.helloStr,String,Hello World

21、 !);注意：helloBt_Callback是一种回调函数，而回调函数指的是在对象的某一个事件发生时，MATLAB内部机制允许自动调用的函数。对于helloBt_Callback函数的参数，hObject表示当前窗口的句柄，eventdata表示事件代码，handles是该窗口中的所有句柄的集合。窗口和控件都可以有相应的回调函数，学会回调函数有助于MATLAB GUI程序的复杂功能设计 通过单击工具栏运行按钮执行程序，再单击界面上的hello按钮，运行结果如图所示添加代码后的程序运行界面7.4 用户菜单的制作菜单的设计原则菜单的设计原则先完成菜单的结构，再编写功能程序先设计一级菜单，然后再设

22、计下一级菜单项用户菜单制作函数用户菜单制作函数H=uimenu( H_parent, pName,pVariable,)其中，H_parent为菜单父句柄，可以是窗口或上一级菜单pName和pVariable成对出现，设置菜单的一个属性。现场菜单( 右键菜单 )Hm=uicontextmenu;H=uimenu( Hm, pName, pVariable, )Set( H_parent, uicontextmenu, Hm )其中，H_parent是与这个现场菜单相关联的对象的句柄。利用 H=uimenu 和 set(H) 指令可以查看菜单的属性列表。常用的菜单属性： label: 菜单显示的

23、字符，&X形式代表简捷键，Alt+X作用 callback: 回调函数 accelerator: 快捷键，Ctrl+X作用 separator: on/off 该菜单上方显示分隔线 checked: on/off 该菜单项的检录符 enable: on/off 该菜单是否可选 visible: on/off 该菜单是否可见例例峰函数peaks三维曲面图 结合“Hello World”程序，进一步增加菜单功能通过点击菜单项ToolsMenu Editor，启动菜单编辑器，生成两级菜单。一级菜单项为Hello和More，Tag属性分别为Hello_M1和Hello_M2；菜单项为Hello

24、下设二级菜单项Hello World To You和Hello World To Me，Tag属性分别为Hello_Y和Hello_M；菜单项为More下设二级菜单项Hello World To All，Tag属性为Hello_A菜单项设置 通过单击工具栏运行按钮执行程序增加菜单的程序运行界面为了增加菜单项的功能，可以添加类似于按钮的执行动作，即给菜单项编写回调函数（Callback）。即，单击菜单项Hello World To You，则在窗体内显示Hello World To You；单击菜单项Hello World To Me，则在窗体内显示Hello World To Me；单击菜单项

25、Hello World To All，则在窗体内显示Hello World To All 针对菜单编辑器中一个菜单项，单击Callback编辑框的右侧按钮View，则进入M文件编辑环境自动打开helloworld.m文件，并指向当前菜单项对应的回调函数菜单项的回调函数在函数hello_Y_Callback中添加代码如下function Hello_Y_Callback(hObject, eventdata, handles)% hObject handle to Hello_Y (see GCBO)% eventdata reserved - to be defined in a future

26、 version of MATLAB% handles structure with handles and user data (see GUIDATA)set(handles.helloStr,String,Hello World To You !);注意：1)当不小心将helloworld.fig关掉后，再次编辑则需要重新打开。具体可以通过MATLAB菜单项FileNewGUIOpen Existing GUI来打开；2）由于MATLAB编辑语言采用的是一种JIT即时编译技术，即使helloworld.m已经执行了，在没有关闭执行程序的同时修改M文件，没有关闭的执行程序会按照更新后代码进

27、行执行7.5 M文件的函数构成GUIDE创建创建GUI应用程序的应用程序的M文件是由一系列子函数构成的，包含主函文件是由一系列子函数构成的，包含主函数、数、Opening函数、函数、Output函数和回调函数，主要结构说明如下函数和回调函数，主要结构说明如下第一行为主函数声明，必须指定主函数名，且与文件名相同；varargin为输入参数，varargout为输出参数Opening函数是在GUI开始运行但还不可见的时候执行，主要进行初始化操作，为GUI第一个执行的函数Output函数在必要时可输出数据到命令行，是第二个执行的函数。与Opening函数一样，它只会执行一次Callbacks函数是当

28、用户每次触发GUI对象时执行的回调函数。回调函数的具体形式为Tag_Callback(hObject, eventdata, handles)，通过加入添加的处理语句，可以实现所需的功能7.5.1 函数说明函数说明当创建GUI时，输入参数varargin为空；当用户触发GUI对象时，varargin为一个1*4的单元数组：第1个单元为所要执行回调函数的函数名。例如，用户单击了Tag值为pushbutton1的pushbutton对象，此时varargin1=pushbutton1_Callback，即为要执行的回调函数pushbutton1_Callback的函数名。第24个单元为该回调函数的

29、输入参数：hObject、eventdata和handles。hObject为当前回调函数对应的GUI对象的句柄，eventdata为未定义的保留参数，handles为当前GUI所有数据的结构体，包含所有GUI对象的句柄和用户定义的数据定义一个变量pc，可使用如下方法： handles.pc=10 %变量pc可以在任何一个控件的Callback函数中调用除主函数外的所有函数都有两个输入参数：（1）hObject 在Opening函数和Output函数中，表示当前figure对象的句柄；在Callback函数中，表示该callback函数所属对象的句柄（2）handles GUI数据。包含所有对

30、象信息和用户数据的结构体，相当于一个GUI对象和用户数据的“容器”。所以，在程序中经常使用以下语句更新数据：guidata(hObject, handles)7.5.2 参数说明参数说明在M文本编辑器中打开caculator.m文件，可以看到自动生成的回调函数，该函数的命名利用对象句柄进行区分，没有任何执行语句。回调函数：Tag_Callback(hObject, eventdata, handles)，通过加入自己的处理语句，可以实现所需的功能。其中：hObject是该控件的句柄；eventdata是备用参数，目前没有定义；handles是用户数据，本身是一个结构数组，存放了当前窗口的所有对

31、象的句柄，包括图形窗本身、所有控件和菜单的句柄。并且可增加一些域传递用户数据。利用guidata( H, handles )可以更新 H 的用户数据7.5.3 GUIDE数据传递机制数据传递机制例例峰函数peaks三维曲面图 结合“Hello World”程序，进一步增加数据的设置与传递首先，在函数helloworld_OpeningFcn里增加语句，设置变量名称function helloworld_OpeningFcn(hObject, eventdata, handles, varargin)% This function has no output args, see OutputFc

32、n.% hObject handle to figure% eventdata reserved - to be defined in a future version of MATLAB% handles structure with handles and user data (see GUIDATA)% varargin command line arguments to helloworld (see VARARGIN)% Choose default command line output for helloworldhandles.output = hObject;% Update

33、 handles structurehandles.tran=from China %增加语句，设置变量guidata(hObject, handles);7.5.4 函数使用的实例函数使用的实例为了实现回调函数之间传递数据，可以增加菜单项，添加设置静态文本信息的动作，即给它编写回调函数（Callback）。菜单项More下设二级菜单项Newinfo，Tag属性设置为info_1。实现的目标是当单击菜单项Newinfo，则在窗体内显示变量handles.tran的内容实现数据传递的菜单项设置峰函数peaks三维曲面图为了给菜单项info_1添加语句，需要将句柄集handles的helloStr