matlab-GUI-操作讲义-图形用户界面设计.ppt

1、七.图形用户界面,本章主要内容,图形用户界面的设计原则和一般步骤 图形用户界面设计 图形用户界面设计工具应用 M函数文件实现图形用户界面,7.1 图形用户界面的设计原则和一般步骤,图形用户界面就是通过窗口、选单、按钮、文字说明等对象构成一个美观的界面，提供用户利用鼠标或键盘方便地实现操作。 MATLAB设计图形用户界面的方法有两种：使用可视化的界面环境（图形用户界面设计工具）和通过编写程序。,7.1.1 设计原则,1.简单性 设计界面时，应力求简捷、直观、清晰 地体现出界面的功能和特征。窗口数目尽 量少，力避不同窗口间来回切换；多采用 图形，少用数值；不要出现可有可无的功 能。,7.1.1 设

2、计原则（续）,2.一致性 两层含义：一指自己设计的界面风格要 尽量一致；二指新设计的界面要与其他已有 的界面风格要一致。一般习惯图形区在界面 左侧，控制区在右侧。,7.1.1 设计原则（续）,3. 习常性 设计界面时，应尽量使用人们所熟悉 的标志和符号，便于用户使用。 4. 其他考虑因素 除了以上静态性能之外，还应注意界 面的动态性能：界面对用户操作的响应要 迅速、连续；对持续时间较长的运算要给 出等待时间提示，并允许用户中断运算。,7.1.2 一般制作步骤,界面制作包括界面设计和程序实现。 分析界面所要实现的主要功能，明确设计任务； 绘界面草图，注意从使用者的角度来考虑界面布局； 按构思的草

3、图，上机制作静态界面； 编写界面动态功能程序。,7.2 图形用户界面设计,7.2.1 可视化的界面环境 MATLAB6.5版本提供的GUI设计工具较前面的版本有较大的改善，设计界面变化很大。打开GUI设计工具的方法有以下几种： (1) 选择菜单“File”“ New”“GUI”命令； (2) 在指令窗口输入以下命令： guide 打开空白设计工作台 guide FN 在工作台中打开文件名为FN 的用户界面,注意：在guide指令作用下，待打开的文件名不分字母的大小写。,7.2 图形用户界面设计（续）,打开的GUI启动界面提供新建界面（Create New GUI）和打开已有界面文件（Open

4、Existing GUI）的属性页。新建界面可以选择空白界面、包含有控件的模板界面、包含有轴对象和菜单的模板界面、标准询问窗口等选项。 选择任意一项都会打开GUI设计工作台，对界面静态组成部分进行的具体的修改工作都是在工作台实现的。,7.2 图形用户界面设计（续）,如在指令窗键入：guide，则可得到如下GUI设计工 具的启动界面：,空白界面,有控件的模板界面,有轴对象和菜单的模板界面,标准询问窗口,7.2 图形用户界面设计（续）,若激活打开已有界面文件（Open Existing GUI） 的属性页，则可通过打开文件浏览器（Browse）选 定需打开文件并打开，主窗口则显示最近打开的界 面文

5、件的列表。,最近打开的界面文件列表,打开文件浏览器,7.2 图形用户界面设计（续）,如在新建界面中选择“Blank GUI (Default)”，然后单击“OK”按钮，就会出 现如下的GUI设计工作台:,7.2 图形用户界面设计（续）,GUI设计工作台有4个功能区：菜单条、编 辑工具条、控件模板区、设计工作区。,菜单条,编辑工具条,控件模板区,设计工作区,7.2 图形用户界面设计（续）,在工具栏主要提供了六个工具：对象对齐 工具、菜单编辑器、文件编辑器、属性编 辑器、界面激活工具和对象浏览器，单击 这六个按钮就会出现相应的窗口。,对象对齐工具,菜单编辑器,文件编辑器,属性编辑器,对象浏览器,运

6、行界面,7.2.2 创建用户菜单,1.菜单编辑 在GUI设计工作台的菜单条选择“Tool” ”Menu Editor”或单击工具栏“Menu Editor”按钮，就会出现菜单编辑器窗口。,新建菜单,新建子菜单,菜单左、右移,菜单上、下移,删除菜单,填写菜单名，如果在前面加“Y轴0,2)。 （2）在点击【Grid on】或【Grid off】键时，在轴上 画出或删除“分格线”；缺省时无分格线。 （3）在菜单【Options】下，有2个下拉菜单【Box on】和【Box off】；缺省时为Box off状态。 （4）所设计的界面和其上图形对象、控件对象都按比例缩放。,7.3 图形用户界面设计工具应

7、用（续）,界面最终效果图如下所示：,7.3 图形用户界面设计工具应用（续）,由于本例的设计界面清晰、要求明确，所以 无需进行功能分析和绘制草图，而可直接进 入界面制作阶段。,7.3 图形用户界面设计工具应用（续）,使用“guide”命令启动GUI界面，选择“Blank GUI”出现GUI设计工作台，调整图形大小，将界面窗口左边的控件模板区中的控件拖放到设计工作区中。 放置以下控件：一个坐标轴、两个静态文本框、一个可编辑文本框、两个按钮；然后打开对象对齐工具对齐各控件，界面布局如下图。,7.3 图形用户界面设计工具应用（续）,7.3 图形用户界面设计工具应用（续）,2. 设置控件属性 双击工作区

8、及控件可引出图形窗和相应控件的“属性编辑框（Property Inspector)”。 在图形窗的属性编辑框中，设置如下属性值： Name Myguil %图形窗的名称 Resize on %图形窗可以缩放 Tag figuer1 %生成handles.figure1域存放图形窗句柄,7.3 图形用户界面设计工具应用（续）,在轴属性编辑框中，设置如下属性值： Units normalized %采用相对度量单位，缩放时保持比例 Box off %坐标轴不封闭 Tag axes1 %生成handles.axes1域存放轴句柄 XLim 0,15 %X轴范围 YLim 0,2 %Y轴范围,7.3

9、图形用户界面设计工具应用（续）,在图形区上方的静态文本的属性编辑框中，设置 如下属性值： Fontsize 0.696 %字体大小 FontUnits normaliszed %采用相对度量单位，缩放时保持字体比例 String 归一化二阶系统的阶跃响应曲线 %显示在界面上的字符 Tag title_text %生成handles.title_text域存放静态文本句柄 HorizontalAlignment Center %文字中心对齐 Units normalized %采用相对度量单位，缩放时保持该区比例,7.3 图形用户界面设计工具应用（续）,在可编辑文本上方的静态文本的属性编辑框中，

10、设置如 下属性值： Fontsize 0.351 %字体大小 FontUnits normaliszed %采用相对度量单位，缩放时保持字体比例 HorizontalAlignment Center %文字中心对齐 String 系统阻尼比 %显示在界面上的字符 Tag edit_text %生成handles.edit_text域存放静态文本句柄 Units normalized %采用相对度量单位，缩放时保持该区比例,7.3 图形用户界面设计工具应用（续）,在可编辑文本的属性编辑框中，设置如下属性值： Fontsize 0.626 %字体大小 FontUnits normaliszed %

11、采用相对度量单位，缩放时保持字体比例 HorizontalAlignment Center %文字中心对齐 String %在界面上显示为空白 Tag zeta_edit %生成handles.zeta_edit域存放弹出式选单句柄 Units normalized %采用相对度量单位，缩放时保持该区比例,7.3 图形用户界面设计工具应用（续）,在上按键的属性编辑框中，设置如下属性值： Fontsize 0.485 %字体大小 FontUnits normaliszed %采用相对度量单位，缩放时保持字体比例 HorizontalAlignment Center %文字中心对齐 String

12、Grid on %在按键上显示Grid on Tag GridOn_push %生成handles.GridOn_push域存放该键句柄 Units normalized %采用相对度量单位，缩放时保持该键比例,7.3 图形用户界面设计工具应用（续）,在下按键的属性编辑框中，设置如下属性值： Fontsize 0.485 %字体大小 FontUnits normaliszed %采用相对度量单位，缩放时保持字体比例 HorizontalAlignment Center %文字中心对齐 String Grid off %在按键上显示Grid off Tag GridOff_push %生成han

13、dles.GridOff_push域存放该键句柄 Units normalized %采用相对度量单位，缩放时保持该键比例,7.3 图形用户界面设计工具应用（续）,3. 精细调整控件的大小及其相对位置 直接拖拉控件调整其大小；通过对象对齐工具将控件摆放整齐。 4. 创建菜单 点击“菜单编辑器”图标，引出空白菜单编辑对话窗，再点击该对话窗最左上方的“新菜单New Menu”图标，在左侧空白窗口中，出现”Untitled1”图标；点击此图标则在右侧引出填写栏，在“lable”中填写Options;在“Tag”中填写options,于是左侧的”Untitled1”图标变成“Options”图标，表示

14、此菜单已生成。,7.3 图形用户界面设计工具应用（续）,先点亮左侧的“Option”图 标，再点击菜单编辑对话 窗上的“新菜单项New Menu Item”图标，就引出 等待定义的菜单项；在右 侧的“Label”中填写Box on, 在“Tag”中填写box_on。重 复该小步操作，建立另一 个菜单项Box off。,注意：菜单编辑对话窗上的“Callback”不要填写，机器自动生成。,7.3 图形用户界面设计工具应用（续）,5. 界面的激活和回调函数的生成 点击工作台上的”运行界面“的工具图标，会出现一个询问对话框，当按提示对以上的设计进行存储以后，就会引出2个界面：名为Myguil的（待激

15、活的）图形用户界面；展示名为Myguil的（待填写回调指令的）M函数文件的文件编辑器界面。同时，在当前目录或给定目录上，由MATLAB自动生成了2个文件，即Myguil.fig和Myguil.m。,7.3 图形用户界面设计工具应用（续）,在Myguil.m文件中，填写回调指令： function varargout=zeta_edit_Callback(hObject, eventdata, handles,varargin) z=str2num(get(handles.zeta_edit,String) %从编辑框中获取zeta数据 t=0:0.1:15; %设置时间采样数组 cla %cl

16、ear current axis for k=1:length(z) y(:,k)=step(1,1,2*z(k),1,t); %计算阶跃输出 line(t,y(:,k); %绘制曲线 end,7.3 图形用户界面设计工具应用（续）,Function varargout= GridOn_push_Callback(hObject, eventdata, handles,varargin) grid on %配合Grid on 按键操作的指令 function varargout= GridOff_push_Callback(hObject, eventdata, handles,varargi

17、n) grid off % 配合Grid off 按键操作的指令,7.3 图形用户界面设计工具应用（续）,function varargout= box_on_Callback(hObject, eventdata, handles,varargin) box on %配合菜单Box on的操作指令 set(handles.box_on,enable,off) %使菜单项Box on失能 set(handles.box_off,enable,on) %使菜单项Box off使能,7.3 图形用户界面设计工具应用（续）,function varargout= box_off_Callback(h

18、Object, eventdata, handles,varargin) box off %配合菜单Box off的操作指令 set(handles.box_off,enable,off) %使菜单项Box off 失能 set(handles.box_on,enable,on) %使菜单项Box on 使能,7.3 图形用户界面设计工具应用（续）,注意：在填写回调函数时，只有带%标记 的那些行指令是用户为满足设计要求而填写的，其 余指令都是机器自动生成的，用户不必也不能更改 6. 图形用户界面的使用 经过以上几个步骤生成的图形用户界面已经可以使用了，只要Myguil.m和Myguil.fig

19、在当前目录或在MATLAB搜索路径上，那么在指令窗运行Myguil就能使用该界面。 生成的界面如下图所示：,7.3 图形用户界面设计工具应用（续）,7.3 图形用户界面设计工具应用（续）,例7.2 设计一个GUI，实现计算器的功能 步骤一：界面功能分析 该计算器能完成数字的四则运算及部分常用的科学计算，如sin,cos,log等。 步骤二：绘界面草图 可有多种风格的界面。,7.3 图形用户界面设计工具应用（续）,草图一：,7.3 图形用户界面设计工具应用（续）,草图二：,7.3 图形用户界面设计工具应用（续）,草图三：,7.3 图形用户界面设计工具应用（续）,步骤三：设计界面（ 选择草图一）

20、初步布局 打开GUI工作台，通过用鼠标拖拉“工作区”右下角的“小黑块”使工作区的大小合适，然后根据草图从控件选择区选择相应的控件拖拉到工作区的相应位置。 效果图如下页所示：,7.3 图形用户界面设计工具应用（续）,7.3 图形用户界面设计工具应用（续）,2. 修改控件属性 1）双击设计工作区的空白部分，打开图形窗的属性框，设置属性如下： MenuBar none %图形窗不使用标准菜单 Name Experiment1 %图形窗名称 Resize off %图形窗不能缩放 Tag mainWnd %生成handles.mainWnd域存放图形窗句柄,7.3 图形用户界面设计工具应用（续）,2）

21、静态文本编辑框的属性设置。以”expression”文本框为例： FontSize 15 %字体大小 Fontunits point % 字体大小的度量单位 HorizontalAlignment Center %对齐方式 String Expression %待显示的字符 Tag text1 %生成handles.text1存放该静态文本框的句柄 Units point %文本框度量单位,7.3 图形用户界面设计工具应用（续）,3）可编辑文本框的属性设置 Sting 0 %初始状态下显示数字0 Tag pExp %可编辑文本框的句柄 其它与静态文本框相同,7.3 图形用户界面设计工具应用（续

22、）,注： Units或FontUnits可选择：inches(英寸)，centimeters (厘米)， normalized(按比例缩放)，points(点阵)， pixels (像素)， characters(字符)。如果选择normalized，那么当resize设为on时，控件或字体大小随着整个窗口的缩放而改变。 水平对齐方式 HorizontalAlignment可以是left, center, right。 控件句柄Tag有默认值，建议修改为带有具体含义的字符串，以增加程序可读性和方便回调函数调用。,7.3 图形用户界面设计工具应用（续）,4）单功能按钮属性设置。以按钮“1”为例：

23、 String 1 Tag p1 其它和静态文本框相同。,7.3 图形用户界面设计工具应用（续）,3. 创建菜单 创建一个“操作”菜单，带两个下拉选单“计算”和“清零”。,7.3 图形用户界面设计工具应用（续）,步骤四：激活界面，填写回调函数 保存静态界面后，利用工具栏上的运行界面按钮激活界面，同时，机器自动生成了exp1.fig和exp1.m两个文件。 打开exp1.m文件，可看到自动生成的回调函数，该函数的命名利用对象句柄进行区分，没有任何执行语句。,7.3 图形用户界面设计工具应用（续）,回调函数：Tag_Callback(hObject,eventdata,handles) 通过加入自

24、己的处理语句，才可实现所需的功能。 其中，hObject是该控件的句柄；evendata是备用参数，目前没有定义；handles是用户数据，本身是一个构架数组，存放了当前窗口所有对象的句柄，包括图形窗本身、所有控件和菜单的句柄，并且可以增加一些域用来传递用户数据。 利用guidata(H,handles)可以更新H的用户数据。 对本例来说，先需要定义几个用户变量，以便记录参加 运算的数值，进行计算。,7.3 图形用户界面设计工具应用（续）,function exp1_OpeningFcn(hObject, eventdata, handles, varargin) handles.output

25、 = hObject; handles.s_Exp=; %以字符串的形式记录计算表达式 handles.s_Num=; %以字符串的形式记录编辑框中要显示的数值 handles.i=1;% s_Exp的计数器 handles.j=1;% s_Num的计数器 handles.flag=0; %用来区分四则运算和函数运算的标志 % Update handles structure guidata(hObject, handles);,7.3 图形用户界面设计工具应用（续）,数字按钮的回调函数，以数字1按钮的回调函数为例 function p1_Callback(hObject, eventdata

26、, handles) handles.s_Exp(handles.i)=1; handles.s_Num(handles.j)=1; handles.i=handles.i+1; handles.j=handles.j+1; guidata(handles.mainWnd,handles); set(handles.pExp,string,handles.s_Num),7.3 图形用户界面设计工具应用（续）,四则运算的回调函数，以“+”为例 function pAdd_Callback(hObject, eventdata, handles) if handles.flag handles.s

27、_Exp(handles.i)=); handles.flag=0; handles.i=handles.i+1; handles.j=handles.j+1; end handles.s_Exp(handles.i)=+; handles.s_Num(handles.j)=+; handles.i=handles.i+1; handles.j=handles.j+1; guidata(handles.mainWnd,handles); set(handles.pExp,string,handles.s_Num),7.3 图形用户界面设计工具应用（续）,其它运算的回调函数，以“sin”为例 f

28、unction pSin_Callback(hObject, eventdata, handles) handles.s_Exp(handles.i:handles.i+3)=sin(; handles.flag=1; handles.s_Num=sin(; handles.i=handles.i+4; handles.j=handles.j+4; guidata(handles.mainWnd,handles); set(handles.pExp,string,handles.s_Num),7.3 图形用户界面设计工具应用（续）,Reset按钮的回调函数，和“清零”菜单的回调函数一样。 function pCle_Callback(hObject, eventdata, handles) handles.s_Exp=; handles.s_Num=; handles.i=1; handles.j=1; handles.flag=0; guidata(handles.mainWnd,handles) se