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

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