图形用户界面GUI设计.pptx

《图形用户界面GUI设计.pptx》由会员分享，可在线阅读，更多相关《图形用户界面GUI设计.pptx（23页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、2GUIDE界面组成界面组成“GUIDE GUIDE Quick Quick StartStart”界面包括两个选项：“Create Create New New GUIGUI”（创建新的图形用户界面）和“Open Open Existing Existing GUIGUI”（打开已存在的图形用户界面）。其中“Create New GUICreate New GUI”提供四种基本类型的GUIGUI模板：Black GUIBlack GUI（DefaultDefault）：空白模板（缺省）。GUI with UicontrolsGUI with Uicontrols：带有控件对象的GUIGUI模

2、板。GUI with Axes and MenuGUI with Axes and Menu：带有坐标轴与菜单的GUIGUI模板。Modal Question DialogModal Question Dialog：问答式对话框的GUIGUI模板。通过这些模板可快速创建GUI。选定一种模板以后，它的预览效果显示在右边的面板中。譬如选中“GUI with Uicontrols”，显示在面板中的预览效果如图所示第1页/共23页在“GUIDE Quick Start”对话窗中，点击“Create New GUI”选项卡，选择“Black GUI”选项，打开的就是“带有空白GUI模板的输出编辑器”窗口

3、，如图所示。11.1.2 输出编辑器输出编辑器 第2页/共23页1控件与组件的功能输出编辑器中的控件大致可分为两种：一种为动作控件，鼠标点击这些控件时会产生相应的响应；另一种为静态控件，是一种不产生响应的控件，如文本框等。控件的功能如表11-1所示。11.1.3 控件功能与属性 Push Buttons Toggle Button Radio Button Check Boxes Edit Text Slider List Boxes Pop-up Menus Table Axes Panel Button GroupActiveX Contro2.控件属性每种控件都有一些可以设置的参数，用于

4、表现控件的外形、功能及效果，即属性。控件属性包括属性名和属性值，其作用如表11-2所示。第3页/共23页11.1.4 界面的存储及运行点击输出编辑器界面，工具栏中保存图标，或者选择菜单“Fiel”“Save as”命令，弹出“Save as”对话框，填写用户定义的文件名.(如gui)点击“保存”按钮，这时输出编辑器界面变成名称为“gui.fig”的窗口，如图所示，首页保存的同时会在当前路径下自动产生两个文件：一个是“gui.fig”文件，另一个是“gui.m”文件。其中，“gui.fig”文件包含对GUI和GUI组件的完整描述，它也是打开输出编辑器界面“gui.fig”窗口的文件；“gui.m

5、”文件包含控制GUI的代码、组件的回调函数。第4页/共23页点击运行图标，显示结果就是我们所要设计的GUI功能界面，如图所示。首页第5页/共23页11.1.5 回调函数回调函数 实现GUI的基本机制是对控件的Callback（回调函数）属性编程，当在设计界面上选中一个控件后，选择菜单栏中的“View”“View Callbacks”命令，或点击鼠标右键，从弹出的活动菜单选择“View Callback”，就会出现“Callbacks”、“CreateFcn”、“DeleteFcn”、“ButtonDownFcn”和“KeyPressFcn”子选单项，这些选项都是用来编写回调函数的 首页 Cal

6、lBack：为一般回调函数，因不同的控件而不同，譬如，按钮被按下时发生、下拉框改变值时发生、sliderbar 拖动时发生等等。大多数MATLAB程序代码都在这里编写，它实现诸多功能。CreateFcn：是在控件对象创建的时候发生(一般为初始化样式，颜色，初始值等)。DeleteFcn：是在空间对象被清除的时候发生。ButtonDownFcn：为鼠标点击事件的回调函数。KeyPressFcn：为按键事件的回调函数。第6页/共23页11.2 GUI的创建创建GUI主要包括设计GUI（界面布局）、控件属性设置、回调函数编写和保存运行等步骤。下面以简单四则运算器界面为例，说明用GUIDE创建GUI的

7、全过程。首页1打开输出编辑器点击MATLAB主界面工具栏GUIDE图标，选择空模板“Blank GUI”，点击“OK”，即可打开GUIDE的输出编辑器设计界面“untitled.fig”。2界面布局添加需要的控件摆放到输出编辑器“untitled.figuntitled.fig”中合适的位置，对多个同样的控件，为摆放整齐、选择等间距，可以打开工具栏中的排列“Align Align ObjectsObjects”图标，进行各种方式处理。并可用鼠标选中右下角的版面大小控制句柄来缩放版面。第7页/共23页选择4个静态文本块“Static Text”，2个编辑文本块“Edit Text”，4个按钮“P

8、ushbutton按钮”，分别用鼠标拖到“untitled.fig”窗口中，其摆放位置如图所示。首页第8页/共23页3编辑控件的属性利用属性查看器（Property Inspector），设置各个控件的参数。首页4存储GUIDE输出编辑器界面点 击 菜 单 栏 中 的 保 存 图 标，在“Save as”对 话 框 中 填 写 文 件 名“yunsuanqi”，单击“保存”按钮，则图的界面最上角的名称变为“yunsuanqi.fig”。此 时 在 当 前 目 录 下，MATLAB将 自 动 生 成“yunsuanqi.m”和“yunsuanqi.fig”两个文件。5编写GUI回调函数（Call

9、back）代码第9页/共23页6运行结果产生GUI功能界面点 击 文 件“yunsuanqir.m”工 具 栏 运 行 按 钮，或 点 击 名 称 为“yunsuanqi.fig”界面中工具栏运行按钮，运行结果产生的具有操作功能的GU I界面，如图所示。首页若在图中第一个编辑文本框中填写450，第二个编辑文本框中填写567，点击“加法”按钮，则立即显示出结果为1017，如图所示。第10页/共23页11.3 GUI菜单设计菜单设计 利用GUIDEGUIDE输出编辑器工具栏中的菜单图标创建带有“菜单栏”的GUIGUI界面的方法如下：首页（1 1）选择空模板“Blank Blank GUIGUI”，

10、点击“OKOK”，即可打开GUIDEGUIDE输出编辑器，如图所示。第11页/共23页（2 2）点击工具栏上的菜单编辑器图标，打开菜单编辑器“Menu Menu EditorEditor”窗口，如图所示，并在图中我们给出了工具栏图标的功能。首页第12页/共23页(3(3）在 界 面“Menu Menu BarBar”选 项 卡 中，点 击“To To add add a a menu,menu,”处，或者工具栏中的图标，则窗口中出现菜单图标“Untitled Untitled 1 1”，再点击图标“Untitled Untitled 1 1”，则显示带有菜单属性“Menu Properties

11、Menu Properties”的界面，如图所示。首页（4 4）将图中“LabelLabel”选项的菜单名“Untitled Untitled 1 1”改为“文件”，“TagTag”栏选项改为“m_filem_file”，“Accelerator:Accelerator:Ctrl+Ctrl+”栏选项改为“F F”，其它选项默认，设置如图所示。第13页/共23页（5）在新建的“文件”菜单下添加子菜单项：“打开”、“保存”和“退出”，且设置其属性，首页（6 6）继续添加其它菜单项。点击“Menu Editor”界面中工具栏新建图标，依次添加“编辑”、“查看”、“工具”、“帮助”菜单项，并设定各自“

12、Tag”选项（譬如“帮助”中的“Tag”选项设为“m_help”，其余类似），如图所示。当编辑完所有菜单项以后，单击图中的“OK”按钮。第14页/共23页（7）保存界面并运行界面名称变为“gui1.fig”，如图所示。首页（8）改写界面名称（用中文表示）。在输出编辑器界面中，单击鼠标右键，选择“Property Inspector”，即可打开界面属性窗口“Inspector”。对窗口的“Name”（标题）属性改为“图形界面1”，如图所示。第15页/共23页首页（10）通过菜单编辑窗口上的按钮“View”，可以查看各菜单项的回调函数，也就是Callback 函数。也可以在M文件gui1.m 中找

13、到回调函数，比如“打开”的“Tag”属性是“m_file_open”，那么它对应的Callback 函数的名字就是“m_file_open_Callback”。在回调函数程序的下方编写代码，就可激活该菜单项的功能。第16页/共23页11.4 对话框设计对话框设计 1信息对话框（msgbox）格式 msgbox(Message,Title,Icon)说明 Message：显示的信息（字符串）；Title：对话框标题（字符串）；Icon：对话框图标，可选择none（默认值，无图标）、error（错误提示图标）、help（帮助提示图标）、warn（警告提示图标）和custom（用户自创图标）。首页2

14、错误对话框（errordlg）格式 errordlg(ErrorString,DlgName)说明 ErrorString：显示错误信息的字符串；DlgName：对话框标题（字符串）。第17页/共23页3警告对话框（warndlg）格式 warndlg(WarnString,DlgName)warndlg(WarnString,DlgName)说明 WarnStringWarnString：显示警告信息的字符串；DlgNameDlgName：对话框标题（字符串）首页4帮助对话框（helpdlg）格式 helpdlg(HelpString,DlgName)helpdlg(HelpString,D

15、lgName)说明 HelpStringHelpString：显示帮助信息的字符串；DlgNameDlgName：对话框标题（字符串）。5进度条对话框（waitbar）格式 waitbar(X,title)waitbar(X,title)说明 X为进度条的比例长度，其值必须在0都1之间；title：显示提示信息 第18页/共23页6输入对话框（inputdlg）格式 inputdlg(Prompt,Title,Numlines,DefAns,Resize)inputdlg(Prompt,Title,Numlines,DefAns,Resize)说明 PromptPrompt：显示提示信息（单元

16、数组）；TitleTitle：对话框标题（字符串）；NumlinesNumlines：指定输入数据的行数；DefAnsDefAns：是一单元数组，存储每个输入数据的默认值，元素个数必须与Prompt Prompt 所定义的输入窗口数相同，所有元素必须是字符串；ResizeResize：设定对话框尺寸是否可调节（on/offon/off）。首页7列表对话框（listdlg）格式 sel,ok=listdlg(ListString,S)sel,ok=listdlg(ListString,S)说明 ListStringListString设置备选项，备选项S S为字符串或者字符串数组。输入参数项还可

17、以添加其它成对的属性及属性值。如：NameName设置对话框标题；PromptStringPromptString设置提示字符；SelectionModeSelectionMode设置是否多选，singlesingle为单选，multiplemultiple为多选。文件选择成功后，单击“OKOK”按钮，系统将选择好的文件序号存入相应向量selsel，参数okok的值为1 1。8问题对话框（questdlg）格式 questdlg(Question,Title questdlg(Question,Title)%默认值，回答按钮有三个：YesYes、NoNo、CancelCancelquestdl

18、g(Question,Title,Btn1,Btn2,Btn3,Default)%questdlg(Question,Title,Btn1,Btn2,Btn3,Default)%自定义回答按钮说明 Question：显示的问题信息（字符串）；Title：对话框标题（字符串）。第19页/共23页9 打开文件对话框（uigetfile）格式 FileName,PathName,FilterIndex=uigetfile(FilterSpec,Title)FileName,PathName,FilterIndex=uigetfile(FilterSpec,Title)FileName,PathNam

19、e,FilterIndex=uigetfile(FilterSpec,Title,File)FileName,PathName,FilterIndex=uigetfile(FilterSpec,Title,File)说明 FilterSpec：文件类型设置；Title：对话框标题；File：默认指向的文件名；FileName：返回的文件名；PathName：返回的文件的路径名；FilterIndex：选择的文件类型。首页10文件保存对话框（uiputfile）格式 FileName,PathName,FilterIndex=uiputfile(FilterSpec,Title)FileName

20、,PathName,FilterIndex=uiputfile(FilterSpec,Title)FileName,PathName,FilterIndex=uiputfile(FilterSpec,Title,File)FileName,PathName,FilterIndex=uiputfile(FilterSpec,Title,File)说明 FilterSpec：文件类型设置；Title：对话框标题；File：默认指向的文件名；FileName：返 回 的 文 件 名；PathName：返 回 的 文 件 的 路 径 名；FilterIndex：选择的文件类型。第20页/共23页11.

21、5 综合案例综合案例 11.5.1 绘图界面设计设计一个GUIGUI界面，包括“选择”、“绘图”、“关闭”三个按钮和一个坐标轴“axes1axes1”。要求：点击“选择”按钮，弹出一个包括各种绘图方法的“列表对话框”，并从中选取一种方式，点击“绘图”按钮，则在坐标轴上显示图形；点击“关闭”按钮，出现提示“问题对话框”来关闭。首页第21页/共23页首页11.5.2 万年历界面设计万年历界面设计设计一个万年历GUIGUI界面，其界面布局如图所示。包括“输入年份”、“输入月份”、“显示星期”、“显示月历”等控件。要求在界面上任意输入某个具体年份和月份，点击按钮即可显示本月的日历及对应的星期（0 0表示没有数字日期）。第22页/共23页感谢您的观看。第23页/共23页