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

5．编写GUI回调函数（Callback）代码 打开“yunsuanqi.m”文件，找到相应的回调函数位置，编写 Callback代码。 （1）为“input1_editText_Callback”添加代码
（2）为“input2_editText_Callback”添加代码
Function input2_editText_Callbacwenku.baidu.com(hObject,eventdata,handles) %代码与（1）中的代码完全相同，即可获取第二个数
第7章 图形用户界面（GUI）设计
7.1 GUIDE界面环境
7.2 GUI的创建
7.3 GUI菜单设计 7.4 对话框设计 7.5 综合案例
图形用户界面（Graphical User Interface， GUI）是指采用图形方式显示的计算机操作用户界面， 它由窗口、控件、光标、按键、菜单和文字说明等对象 构成。用户通过一定的方法（如鼠标或键盘）选择、激 活这些图形对象，使计算机产生某种动作或变化，如实 现计算、绘图等。若想制作一个可供反复使用且操作简 单的专用工具，图形用户界面是非常好的选择之一。
7.1.5 回调函数
回调函数（CallBack）包含在由GUIDE形成的M文件中，GUIDE 会自动生成相应的函数体、函数名。名称一般是控件“Tag+Call” 类型名，参数有3个（hObject、eventdata、handles），其中， hObject为发生事件的源控件，eventdata为事件数据结构（保留参 数），handles为传入的对象句柄（结构体类型）。具体格式如下： function pushbutton1_Callback(hObject,eventdata,handles) % function edit1_ CreateFcn(hObject,eventdata,handles) % function text1_ DeleteFcn(hObject,eventdata,handles) %
1．GUIDE的启动
选择MATLAB主界面菜单“File”→“New”→“GUI”命令，或点击工具 栏GUIDE图标，或直接在MATLAB命令窗口输入guide，都可弹出对话框 “GUIDE Quick Start”界面，如下图所示。
2．GUIDE的界面组成
“GUIDE Quick Start” 对话框包括两个选项卡：“ Create New GUI” （创建新的图形用户界面）和“Open Existing GUI”（打开已存在的图形用 户界面）。其中“Create New GUI”提供四种基本类型的GUI模板： Blank GUI（Default）：空白模板（缺省）。 GUI with Uicontrols：带有控件对象的GUI模板。 GUI with Axes and Menu：带有坐标轴与菜单的GUI模板。 Modal Question Dialog：问答式对话框的GUI模板。 通过这些模板可快速创建GUI。选定一种模板以后，它的预览效果显示在 右边的面板中。譬如选中“GUI with Uicontrols”，显示在面板中的预览效 果如下图所示。
保存的同时会在当前路径下自动产生两个文件：一个是 “guiHello. fig”文件，另一个是“guiHello.m”文件。其中， “guiHello.fig”文件包含对GUI和GUI组件的完整描述，它也是 打开输出编辑器界面“guiHello.fig”窗口的文件； “guiHello.m”文件包含控制GUI的代码、组件的回调函数。 单击运行按钮，显示结果就是我们所设计的GUI功能界面， 如图所示。
Tag
取值为字符串，定义控件的标识值，任何程序都 通过这个标识值控制该控件
7.1.4 界面的存储及运行
单击输出编辑器窗口工具栏中的保存按钮，或者选择菜单 “File”→“Save as”命令，弹出“Save as”对话框，输入用户 定义的文件名，如输入guiHello。单击“保存”按钮，这时输出 编辑器界面变成名称为“guiHello.fig”的窗口，如图所示。
6．运行结果产生GUI功能界面 单击文件“yunsuanqir.m”工具栏的运行按钮，或单击名称为 “yunsuanqi.fig”窗口中工具栏的运行按钮，运行结果产生具有操作 功能的GU I界面，如图所示。
若在图中第一个编辑文本框中输入“450”，在第二个编辑文本 框 中 输 入 “ 567 ” ， 单 击 “ 加 法 ” 按 钮 ， 则 立 即 显 示 出 结 果 “1017”，如图所示。 至此完成了用 GUIDE 创建 GUI 的整个过程。
7.1.5 回调函数
实现GUI的基本机制是对控件的Callback（回调函数）属性编程， 当在设计界面上选中一个控件后，选择菜单栏中的“View”→“View Callbacks”命令，或单击鼠标右键，从弹出的快捷菜单选择“View Callbacks”，就会出现“Callback”、“CreateFcn”、 “DeleteFcn”、“ButtonDownFcn”和“KeyPressFcn”子菜单， 这些选项都是用来编写回调函数的，其作用如下所示 。 CallBack：为一般回调函数，因不同的控件而不同。例如，按钮 被按下时发生、下拉框改变值时发生、sliderbar 拖动时发生等。 大 多数MATLAB程序代码都在这里编写，可实现诸多功能。 CreateFcn：在控件对象创建时发生(一般为初始化样式，颜色、 初始值等)。 DeleteFcn：在控件对象被清除时发生。 ButtonDownFcn：鼠标单击事件的回调函数。 KeyPressFcn：按键事件的回调函数。
Static Text：静态文本框，仅用于显示说明文字
Pop-up Menu：弹出式列表，让用户从一列菜单项中选择一项 Axes：坐标轴，用于在GUI中添加图形或图像
7.1.3 控件功能与属性
2. 控件属性
每种控件都有一些可以设置的参数，用于表现控件的外形、功能及效果， 即属性。控件属性包括属性名和属性值，其名称和说明如表所示。
5．编写GUI回调函数（Callback）代码 打开“yunsuanqi.m”文件，找到相应的回调函数位置，编写 Callback代码。 （3）为“addition_pushbutton1_Callback”添加代码
（4）为其它3个按钮的回调函数添加代码
只需修改第3行代码，把“+”分别改成“-”、“*”、“/”即可。
3．编辑控件的属性 利用属性查看器（Property Inspector）设置各个控件的参数。 （3）修改“Push Button”按钮的属性 第一个按钮：将“String”设置为“加法”，“Fontsize”设置为 15 ， “Tag”设置为“addition_pushbutton1”； 第二个按钮：将“String”设置为“减法”，“Fontsize”设置为 15 ， “Tag”设置为“subtraction_pushbutton2” ； 第三个按钮：将“String”设置为“乘法”，“Fontsize”设置为 15 ， “Tag”设置为“multiplication_pushbutton3” ；
选择 4 个静态文本块“Static Text”，2 个编辑文本块 “Edit Text”，4个按钮“Pushbutton”，分别用鼠标拖到 “untitled.fig”窗口中，其摆放位置如图所示。
3．编辑控件的属性
利用属性查看器（Property Inspector）设置各个控件的参数。
（1）修改“Static Text”静态文本框的属性 第一个：“String”属性改为“输入数值”，“Fontsize”改为16， 其他属性不变，关闭属性查看器窗口，属性会自动保存； 第二个：“String”属性改为“选择算法”，“Fontsize”改为16； 第三个：“String”属性改为“显示结果”，“Fontsize”改为16； 第四个：“String”属性设置为“0”，“Tag”设置为 “answer_staticText”。 （2）修改“Edit Text”文本编辑框的属性 第一个“Edit Text”用来存储第一个数，将“String”设置为“0”， “Fontsize”设置为15，“Tag”设置为“input1_editText”； 第二个“Edit Text”用来存储第二个数，将“String”设置为“0”， “Fontsize”设置为15， “Tag”设置为“input2_editText”。
第四个按钮：将“String”设置为“除法”，“Fontsize”设置为 15 ， “Tag”设置为“division_pushbutton4” 。
上述属性修改完后，结果如图所示。
4．存储GUIDE输出编辑器界面
单击菜单栏中的保存按钮，在“Save as”对话框中输入文件名 “yunsuanqi”，单击“保存”按钮，则图的界面最上角的名称变为 “yunsuanqi.fig”。此时在当前目录下，MATLAB将自动生成 “yunsuanqi.m”和“yunsuanqi.fig”两个文件。
1．打开输出编辑器
单击MATLAB主界面工具栏GUIDE图标，选择空模板“Blank GUI（Default）”选项，单击“OK”，即可打开GUIDE的输出编辑器 设计界面“untitled.fig”。 2．界面布局
添加需要的控件到输出编辑器“untitled.fig”窗口中的合适位 置，对多个同样的控件摆放整齐、设置间距，可以单击工具栏中的排 列“Align Objects”按钮，进行各种方式处理，并可用鼠标选中右 下角的版面大小控制句柄来缩放版面。
function pushbutton1_ ButtonDownFcn(hObject,eventdata,handles)
%
function pushbutton1_ KeyPressFcn(hObject,eventdata,handles)
%
7.2 GUI的创建
创建GUI主要包括设计 GUI（界面布局）、控件属性设置、回调 函数编写和保存运行等步骤。下面以简单四则运算器界面为例，说明 用GUIDE创建GUI的全过程。
本章介绍图形用户界面的环境，以及GUI设计、用 户菜单设计等制作过程。
7.1 GUIDE界面环境
MATLAB中的图形用户界面开发环境 GUIDE（GUI Developer）提供了多种设计GUI的模板，并自动生成M文件框架， 用户可以在该框架内编写自己的函数代码，实现所需要的功能。
7.1.1 GUIDE的启动及界面组成
方法二：用“弹出式菜单”实现算法的选择。 在上述界面设计过程中，使用了 4 个按钮分别表示“加法”、 “减法”、“乘法”和“除法”，下面给出使用一个“弹出式菜单” 代替这4种运算的设计。
7.1.2 输出编辑器
在“GUIDE Quick Start”对话框中，点击“Create New GUI” 选项卡，选择“Blank GUI”选项，打开的就是带有空白GUI模板的 “输出编辑器”窗口，如图所示。
7.1.3 控件功能与属性
1．控件与组件的功能 输出编辑器中的控件大致可分为两种：一种为动作控件，鼠标 点击这些控件时会产生相应的响应；另一种为静态控件，是一种不产 生响应的控件，如文本框等。 Push Button：触控按钮，执行某种预定的功能或操作 Radio Button ：单选按钮，一组中只能选一个 Check Box ：复选框，一组中可选多个 Edit Text：文本编辑器，可使用键盘输入字符串，也可编辑
属性名称 BackgroundColor 设置控件背景颜色 说明
Enable
FontName FontSize FontWeight ForegroundColor Position String
设置控件的使用状态，“on”表示选中
设置字体 设置字体大小 设置字体粗细 前景色，控件文本颜色，默认为黑色 控件对象的尺寸和位置 取值为字符串矩阵或数组，定义标题或选项内容