Matlab - GUI图形用户界面.ppt

五五 GUI图图形形用用户户界界面面 vv设计原则和一般步骤设计原则和一般步骤 vv图形用户界面设计工具介绍图形用户界面设计工具介绍vv用户控件的制作用户控件的制作 vv用户菜单的制作用户菜单的制作vv回调函数回调函数vvM函数文件实现图形用户界面函数文件实现图形用户界面vv实验一：计算器程序实验一：计算器程序1五 GUI图形用户界面5.15.1 设计原则和一般步骤设计原则和一般步骤设计原则和一般步骤设计原则和一般步骤1)分析界面所要实现的主要功能，明确设计任务。分析界面所要实现的主要功能，明确设计任务。2)绘界面草图，注意从使用者的角度来考虑界面布局。绘界面草图，注意从使用者的角度来考虑界面布局。3)利用利用GUI设计工具制作静态界面。设计工具制作静态界面。4)编写动态功能程序。编写动态功能程序。注意：注意：1)先完成大致界面布局，再编写功能程序。先完成大致界面布局，再编写功能程序。2)界面风格要一致，且符合使用习惯。例如，一般习惯图形界面风格要一致，且符合使用习惯。例如，一般习惯图形区在上面或左面，控制区在下面或右面等等。区在上面或左面，控制区在下面或右面等等。2五 GUI图形用户界面例如，以本次试验的内容例如，以本次试验的内容“计算器计算器”为例。为例。1)功能分析：完成数字的四则运算，以及一部分常用的科学功能分析：完成数字的四则运算，以及一部分常用的科学计算：计算：sin,cos,log等等。等等。2)界面草图：可以有多种风格的界面。给出几种设计草图。界面草图：可以有多种风格的界面。给出几种设计草图。草图一草图一草图二草图二草图三草图三3)利用利用GUI设计工具实现草图的布局，设计工具实现草图的布局，experiment1.fig。4)编写相应的程序完成计算器的各项功能，编写相应的程序完成计算器的各项功能，experiment1.m。3五 GUI图形用户界面5.5.2 2 图形用户界面设计工具介绍图形用户界面设计工具介绍图形用户界面设计工具介绍图形用户界面设计工具介绍MATLAB6.5版本的版本的GUI设计工具较前面的版本有很大的设计工具较前面的版本有很大的改善，设计界面变化很大。改善，设计界面变化很大。打开打开GUI设计工作台的命令：设计工作台的命令：guide%打开设计工作台启动界面打开设计工作台启动界面guide file%在工作台中打开文件名为在工作台中打开文件名为file的用户界面的用户界面菜单项菜单项 File:New-GUI%打开设计工作台启动界面打开设计工作台启动界面注意：注意：guide命令中文件名不区分大小写。命令中文件名不区分大小写。打开的打开的GUI启动界面启动界面提供新建界面提供新建界面(Create New GUI)或或打开已有界面文件打开已有界面文件(Open Existing GUI)的的属性页属性页。新建界面新建界面可以选择空白界面、包含有控件的模板界面、包含有轴对象可以选择空白界面、包含有控件的模板界面、包含有轴对象和菜单的模板界面、标准询问窗口等选项。和菜单的模板界面、标准询问窗口等选项。选择任意一项都会打开选择任意一项都会打开GUI设计工作台设计工作台，对界面静态组，对界面静态组成部分进行的具体的修改都在工作台实现。成部分进行的具体的修改都在工作台实现。4五 GUI图形用户界面GUI设计工具的启动界面设计工具的启动界面新建界面的选项预览窗口是否在新建时保存文件最近打开的界面文件的列表打开文件浏览器5五 GUI图形用户界面GUI设计工作台设计工作台设计工作区主要由4个功能区，六个实用工具组成控件选择区菜单条工具条对齐工具文件编辑菜单编辑对象属性对象列表运行界面工作区缩放句柄6五 GUI图形用户界面5.35.3 用户控件的制作用户控件的制作用户控件的制作用户控件的制作用户控件列表：用户控件列表：五 GUI图形用户界面对象选择按钮对象选择按钮，用来选取工作区上分布的控件。，用来选取工作区上分布的控件。单功能按键单功能按键，按下操作代表一定的功能实现。，按下操作代表一定的功能实现。双位按键双位按键，代表，代表“开开”“关关”两种状态。两种状态。互斥选择按钮互斥选择按钮，多个选项互斥选择时使用。，多个选项互斥选择时使用。互容选择按钮互容选择按钮，同时选中多个选项时使用。，同时选中多个选项时使用。编辑文本框编辑文本框，可以自由输入字符，编辑字符串，可以自由输入字符，编辑字符串静态文本框静态文本框，用于显示注释说明用文字，不可编辑。，用于显示注释说明用文字，不可编辑。滑动块滑动块，利用游标滑动，可以获取不同的值。，利用游标滑动，可以获取不同的值。控件区域框控件区域框，用于对控件区域进行标识。，用于对控件区域进行标识。列表框列表框，提供多个可供选择的选项，可以互容选择。，提供多个可供选择的选项，可以互容选择。弹出框弹出框，带有多个选项，只能选择其中一项。，带有多个选项，只能选择其中一项。轴对象轴对象，用来显示图形。，用来显示图形。7五 GUI图形用户界面以以“计算器计算器”界面草图一为例。界面草图一为例。1.初步布局初步布局，根据草图将控件选择区的相应控件拖拉到设计，根据草图将控件选择区的相应控件拖拉到设计工作区的相应位置。工作区的相应位置。experiment1.fig8五 GUI图形用户界面2.修改控件属性修改控件属性每一个控件都不可能是完全符合界面设计要求的，需要每一个控件都不可能是完全符合界面设计要求的，需要对其属性进行设置，以获得所需的界面显示效果。对其属性进行设置，以获得所需的界面显示效果。可以通过双击该控可以通过双击该控件，或利用件，或利用GUI设计工设计工具的下拉菜单具的下拉菜单View:Property Inspector打打开控件属性对话框。属开控件属性对话框。属性对话框具有良好的交性对话框具有良好的交互界面，以列表的形式互界面，以列表的形式给出该控件的每一项属给出该控件的每一项属性。性。例如右图是例如右图是“+”按钮的属性列表。按钮的属性列表。9五 GUI图形用户界面下面对各控件的主要属性进行一下说明。下面对各控件的主要属性进行一下说明。1)双击设计工作区的空白部分，打开整个图形窗的属性框。双击设计工作区的空白部分，打开整个图形窗的属性框。MunuBar:none%图形窗是否使用标准菜单图形窗是否使用标准菜单Name:Experiment1%图形窗名称图形窗名称Resize:off%图形窗不能缩放图形窗不能缩放Tag:mainWnd%图形窗的句柄图形窗的句柄 handles.mainWnd2)静态文本编辑框的属性设置。以静态文本编辑框的属性设置。以“Expression”文本框为文本框为例例FontSize:15%字体大小字体大小FontUnits:points%字体大小的度量单位字体大小的度量单位HorizontalAlignment:Center%对齐方式对齐方式String:Expression%待显示的字符待显示的字符Tag:text1%该静态文本框的句柄该静态文本框的句柄handles.text1Units:points%文本框度量单位文本框度量单位 Units或或FontUnits可选择：可选择：inches(英寸英寸)，centimeters(厘米厘米)，normalized(按比例缩放按比例缩放)，points(点阵点阵)，pixels(像素像素)，characters(字符字符)。如果选择如果选择normalized，那么当那么当resize设为设为on时，控件或字体大小随着整个窗口的缩放而改时，控件或字体大小随着整个窗口的缩放而改变。变。水平对齐方式水平对齐方式 HorizontalAlignment可以是可以是left,center,right。控件句柄控件句柄Tag有默认值，建议修改为带有具体含义的字有默认值，建议修改为带有具体含义的字符串，以增加程序可读性和方便回调函数调用。符串，以增加程序可读性和方便回调函数调用。10五 GUI图形用户界面3)可编辑文本框的属性设置。可编辑文本框的属性设置。String:0%初始状态下显示数字初始状态下显示数字0Tag:pExp%可编辑文本框的句柄可编辑文本框的句柄其它和静态文本框相同其它和静态文本框相同4)单功能按钮属性设置。以按钮单功能按钮属性设置。以按钮“1”为例为例String:1Tag:p1其它和静态文本框相同。其它和静态文本框相同。3.精细调整精细调整利用利用对齐工具对齐工具，排列控件的位置，使控件的大小、位置更，排列控件的位置，使控件的大小、位置更加协调。加协调。11五 GUI图形用户界面4.界面激活界面激活保存静态界面后，利用工具栏上的保存静态界面后，利用工具栏上的运行按钮运行按钮激活该界面。激活该界面。激活后可以看到两个同名文件：激活后可以看到两个同名文件：experiment1.m和和experiment1.fig。experiment1.m文件在文件在M文本编辑器中打开，文本编辑器中打开，experiment1.fig文件显示为操作界面，但是无法实现任何功文件显示为操作界面，但是无法实现任何功能，需要编写回调函数。能，需要编写回调函数。12五 GUI图形用户界面5.5.4 4 用户菜单的制作用户菜单的制作用户菜单的制作用户菜单的制作图形用户界面有一个标准图形窗菜单，包括五个菜单项：图形用户界面有一个标准图形窗菜单，包括五个菜单项：File,Edit,Tools,Windows,Help。默认情况下，利用默认情况下，利用GUI工具工具设计的图形界面是不显现菜单项的。可以通过修改图形界面设计的图形界面是不显现菜单项的。可以通过修改图形界面的的“MenuBar”属性值选择显示标准图形窗菜单属性值选择显示标准图形窗菜单“figure”或或不显示菜单不显示菜单“none”。在在GUI图形界面设计工具中打开刚才的图形界面设计工具中打开刚才的experiment1.fig界界面（或利用面（或利用guide experiment1命令），单击工具条上的命令），单击工具条上的菜单菜单编辑器编辑器打开空白菜单编辑界面。利用编辑界面上的打开空白菜单编辑界面。利用编辑界面上的New Menu和和New Menu Item，以及可以对菜单项进行上下左右调整的以及可以对菜单项进行上下左右调整的四个工具创建合适的菜单。四个工具创建合适的菜单。注意：菜单属性中的注意：菜单属性中的“Label”是显示的菜单名称，是显示的菜单名称，“Tag”是该菜单项的句柄，是该菜单项的句柄，“callback”是该菜单的回调函是该菜单的回调函数，不需修改，采用默认值。数，不需修改，采用默认值。五 GUI图形用户界面13五 GUI图形用户界面14五 GUI图形用户界面5.5.5 5 回调函数回调函数回调函数回调函数在在M文本编辑器中打开文本编辑器中打开experiment1.m文件，可以看到自文件，可以看到自动生成的回调函数，该函数的命名利用对象句柄进行区分，动生成的回调函数，该函数的命名利用对象句柄进行区分，没有任何执行语句。没有任何执行语句。回调函数：回调函数：Tag_Callback(hObject,eventdata,handles)，通过加入自己的处理语句，可以实现所需的功能。通过加入自己的处理语句，可以实现所需的功能。其中：其中：hObject是该控件的句柄；是该控件的句柄；eventdata是备用参数，是备用参数，目前没有定义；目前没有定义；handles是用户数据，本身是一个结构数组，是用户数据，本身是一个结构数组，存放了当前窗口的所有对象的句柄，包括图形窗本身、所有存放了当前窗口的所有对象的句柄，包括图形窗本身、所有控件和菜单的句柄。并且可以增加一些域用来传递用户数据。控件和菜单的句柄。并且可以增加一些域用来传递用户数据。利用利用guidata(H,handles)可以更新可以更新 H 的用户数据。的用户数据。五 GUI图形用户界面15五 GUI图形用户界面对本例来说，首先需要定义几个用户变量，以便记录参加对本例来说，首先需要定义几个用户变量，以便记录参加运算的数值，进行计算。运算的数值，进行计算。function Experiment1_OpeningFcn(hObject,eventdata,handles,varargin)handles.output=hObject;handles.s_Exp=;%以字符串的形式记录计算表达式以字符串的形式记录计算表达式handles.s_Num=;%以字符串的形式记录编辑框中要显示的数值以字符串的形式记录编辑框中要显示的数值handles.i=1;%s_Exp的计数器的计数器handles.j=1;%s_Num的计数器的计数器handles.flag=0;%用来区分四则运算和其他运算的标志用来区分四则运算和其他运算的标志%Update handles structureguidata(hObject,handles);handles=mainWnd:132.0002 Operation:149.0002 pDot:148.0002 pLog10:147.0002 pLog:146.0002 pCos:145.0002 pSin:144.0002 pDel:143.0002 pAdd:142.0002 pDiv:141.0002 pMul:140.0002 p0:139.0002 p9:138.0002 p8:137.0002 p7:136.0002 p6:135.0002 p5:134.0002 p4:26.0006 p3:25.0006 p2:24.0006 p1:23.0006 text3:22.0006 text2:21.0006 frame4:20.0006 text1:19.0006 pClear:18.0006 pDone:17.0006 pExp:16.0006 frame3:15.0007 frame2:133.0002 p_Clear:151.0002 p_Done:150.0002 output:132.0002 s_Exp:50 s_Num:5 i:2 j:2 flag:016五 GUI图形用户界面数字按钮的回调函数，以数字数字按钮的回调函数，以数字1按钮的回调函数为例：按钮的回调函数为例：function p1_Callback(hObject,eventdata,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)17五 GUI图形用户界面四则运算的回调函数，以四则运算的回调函数，以“+”为例为例function pAdd_Callback(hObject,eventdata,handles)if handles.flag handles.s_Exp(handles.i)=);handles.flag=0;handles.i=handles.i+1;endhandles.s_Exp(handles.i)=+;handles.j=1;handles.s_Num=;handles.i=handles.i+1;guidata(handles.mainWnd,handles);set(handles.pExp,string,handles.s_Num)18五 GUI图形用户界面其它运算的回调函数，以其它运算的回调函数，以“sin”为例为例function pSin_Callback(hObject,eventdata,handles)handles.s_Exp(handles.i:handles.i+3)=sin(;handles.flag=1;handles.j=1;handles.s_Num=;handles.i=handles.i+4;guidata(handles.mainWnd,handles);set(handles.pExp,string,handles.s_Num)19五 GUI图形用户界面Calculate按钮的回调函数，和按钮的回调函数，和“计算计算”菜单的回调函数一样。菜单的回调函数一样。function pDone_Callback(hObject,eventdata,handles)try if handles.flag handles.s_Exp(handles.i)=);handles.flag=0;handles.i=handles.i+1;end eval(s=,handles.s_Exp,;);set(handles.pExp,string,num2str(s)catch errordlg(The input dont fit the calculation)end20五 GUI图形用户界面Reset按钮的回调函数，和按钮的回调函数，和“清零清零”菜单的回调函数一样。菜单的回调函数一样。function pClear_Callback(hObject,eventdata,handles)handles.s_Exp=;handles.s_Num=;handles.i=1;handles.j=1;handles.flag=0;guidata(handles.mainWnd,handles)set(handles.pExp,string,)21五 GUI图形用户界面5.65.6 MM函数文件实现图形用户界面函数文件实现图形用户界面函数文件实现图形用户界面函数文件实现图形用户界面 exm05_1.m1.用户控件制作函数：用户控件制作函数：H=uicontrol(H_parent,style,Sv,pName,pVariable,)H为该控件的句柄，为该控件的句柄，H_parent为控件父句柄，为控件父句柄，Sv为控件类型为控件类型pName和和pVariable为一对值，用来确定控件的一个属性。为一对值，用来确定控件的一个属性。例如：例如：H0=experiment1;H1=uicontrol(H0,style,text,.horizontalalignment,left,.position,0.65,0.05,0.8,0.05,.units,normalized,.string,Design by minnow);轴对象直接利用轴对象直接利用axes命令生成：命令生成：H1=axes(position,0.1,0.1,0.5,0.5)五 GUI图形用户界面 pushbutton togglebutton radiobutton checkbox edit text slider frame listbox popupmenuPosition四个参数的含义：四个参数的含义：x_begin,y_begin,x_lenth,y_lenth22五 GUI图形用户界面2.用户菜单制作函数用户菜单制作函数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:菜单显示的字符，菜单显示的字符，&X形式代表简捷键，形式代表简捷键，Alt+X作用作用 callback:回调函数回调函数 accelerator:快捷键，快捷键，Ctrl+X作用作用 separator:on/off 该菜单上方显示分隔线该菜单上方显示分隔线 checked:on/off 该菜单项的检录符该菜单项的检录符 enable:on/off 该菜单是否可选该菜单是否可选 visible:on/off 该菜单是否可见该菜单是否可见23五 GUI图形用户界面例例5-1 用户菜单的制作用户菜单的制作p=peaks(30);colors=summer,hot,copper;H0=figure;set(H0,defaultuicontrolunits,normalized)set(H0,menubar,none);H_axes=axes(position,0.1,0.1,0.6,0.7);surf(p);%制作制作color菜单菜单H1=uimenu(H0,label,&Colors);H1_s=uimenu(H1,label,&Summer,callback,i=1;colormap(colorsi););H1_h=uimenu(H1,label,&Hot,callback,i=2;colormap(colorsi););H1_s=uimenu(H1,label,&Copper,callback,i=3;colormap(colorsi););24五 GUI图形用户界面小结小结小结小结1.掌握图形用户界面设计工具，实现静态界面的设计。掌握图形用户界面设计工具，实现静态界面的设计。2.掌握掌握GUI工具生成的工具生成的M文件的结构，以便编写回调函数。文件的结构，以便编写回调函数。3.利用利用M函数文件实现图形界面的方法。函数文件实现图形界面的方法。uicontrol,uimenu,uicontextmenuuserdata4.综合综合GUI工具和工具和M函数文件完成更加灵活的界面设计。函数文件完成更加灵活的界面设计。注意：利用对象的注意：利用对象的tag属性属性可以方便的获取对象句柄，保证回可以方便的获取对象句柄，保证回调程序正确运行，建议对象的调程序正确运行，建议对象的tag属性采用具有特定含义的属性采用具有特定含义的字符来表示。字符来表示。25