MATLAB之GUI界面创建

初衷

由于课程要求，学习了下创建MATLAB交互界面，最初学习的途径就是在CSDN上搜索；然而参考了几篇博客文章之后，操作时还是一头雾水（拼死挣扎不愿承认自己能力太差：）），后来在同学的帮助下，成功完成了GUI界面创建，所以今天写下这篇文章来记录学习成果。

除了代码与文字，我还会通过截图来详细说明操作流程，旨在帮助像我当初一样一头雾水的同学快速完成GUI界面创建。

正经操作

以下环境为MATLAB R2017a，我们以制作进行两数相加计算的计算器为例：

1. 在命令行窗口输入:guide ，这步是打开绘制界面的操作：

2. 点击 “新建GUI ” ，接着四个选项可供选择，分别为：空白模板、带控件对象的GUI模板、带坐标轴与菜单的GUI模板、带模式问题对话框的GUI模板，根据自己需求选择相符的选项。
   一般无特殊需求，选择第一个选项 （Blank GUI，空白模板） 即可，点击“ 确定 ”；

3. 出现GUI设计窗口，图中圈内区域为控件工具栏，常用控件有：按钮、静态文本框、动态文本框（好吧>.<,我承认我说这三个常用其实是因为我目前只用过这三项），点击所需控件按钮，在GUI图形对象设计区理想位置拖出对应控件；接下来详细说明设置
   按钮、静态文本框、动态文本框 三者的步骤；

3.1按钮：点击“按钮”选项，接着便会出现”十“字形光标，

在界面上拖出大小、位置合适的按钮键：

接着双击拖出来的按钮，会出现属性设置框，在属性设置框里可以修改这个按钮键盘的各项属性，如：字体大小、颜色、位置等。

除去这些细枝末节外，我们主要修改的是属性“string”,它对应的就是我们设置的按钮上面显示的名称，

在这里我们将其改为“运行”，

按下回车后即可在设计界面上看到我们的按钮键已经更换了名称：

3.2动态文本框
动态文本框，常用于作为输入输出框，同上述3.1中的操作，点击动态文本框按钮，在设计界面上拖动出框：

接着双击拖出来的按钮，在属性设置框，主要修改两个属性，除了上述3.1中的"string"属性外，（这里"string"属性可以修改为输入提示，或者直接删除即可，毕竟我们是要用来作为输入框的），
我们还需要修改"Tag"属性，（这一步tag的修改主要是为了后续改程序的时候更加明了，不改这个属性也是没问题的）

将"string"属性对应项文字删除，将"Tag"属性对应项修改为input_1,回车后可以看到设计界面上我们的输入框中文字已经没有了。

再重复两次上述操作，形成三个并列的文本框，并修改对应’Tag’属性分别为input_1、input_2、output （因为我们要制作加法计算器，需要两个输入框，一个输出框），形成如下界面：

3.3静态文本框
静态文本框，常用于添加界面上辅助性质内容： 一如上述3.1、3.2中步骤，**点击静态文本框按钮，在界面上拖动出框，

接着修改它的“string"属性(我们目的是制作加法计算器，故在三个动态文本框中间添加一个‘+’和一个’=’)

适当调整位置和大小，产生如下效果：

到这里，我们的界面设置已经结束了，接着就要把程序给融进界面。
4. 点击运行按钮 生成代码；

产生如下代码：

具体代码为：

// 
function varargout = untitled(varargin)

gui_Singleton = 1;

gui_State = struct('gui_Name',       mfilename, ...

                   'gui_Singleton',  gui_Singleton, ...

                   'gui_OpeningFcn',
@untitled_OpeningFcn, ...

                   'gui_OutputFcn',  @untitled_OutputFcn, ...

                   'gui_LayoutFcn',  [] , ...

                   'gui_Callback',   []);

if nargin && ischar(varargin{1})

   
gui_State.gui_Callback = str2func(varargin{1});

end

if nargout

   
[varargout{1:nargout}] = gui_mainfcn(gui_State, varargin{:});

else

   
gui_mainfcn(gui_State, varargin{:});

end

 

function untitled_OpeningFcn(hObject,
eventdata, handles, varargin)

handles.output = hObject;

guidata(hObject, handles);

 

function varargout =
untitled_OutputFcn(hObject, eventdata, handles) 

varargout{1} = handles.output;

 

function input_1_Callback(hObject,
eventdata, handles)

function input_1_CreateFcn(hObject,
eventdata, handles)

if ispc &&
isequal(get(hObject,'BackgroundColor'),
get(0,'defaultUicontrolBackgroundColor'))

   
set(hObject,'BackgroundColor','white');

end

 

 

 

function input_2_Callback(hObject,
eventdata, handles)

function input_2_CreateFcn(hObject,
eventdata, handles)

if ispc &&
isequal(get(hObject,'BackgroundColor'),
get(0,'defaultUicontrolBackgroundColor'))

   
set(hObject,'BackgroundColor','white');

end

 

 

function output_Callback(hObject,
eventdata, handles)

function output_CreateFcn(hObject,
eventdata, handles)

if ispc &&
isequal(get(hObject,'BackgroundColor'),
get(0,'defaultUicontrolBackgroundColor'))

   
set(hObject,'BackgroundColor','white');

end

 

function pushbutton1_Callback(hObject,
eventdata, handles)

这就是根据界面设置生成的代码，下面仅需要把我们的设置的各个框的Callback充实下即可；本次是以制作进行两数相加计算的计算器为例，首先我们先完成一个实现此功能的函数M文件，代码如下：

// 
function [c ] = add( a,b )
c=a+b;
end

综上，我们设置的界面里的input_1，input_2，output分别与a,b,c对应，而pushbutton1对应于获取参数并调用函数add运行.
故接着在pushbutton1的Callback下填充如下代码：

//
%%function pushbutton1_Callback(hObject, eventdata, handles)
a=  str2num(get(handles.input_1,'string'));
b =  str2num(get(handles.input_2,'string'));
c =mat2str( add( a,b ));
set(handles.output,'string',c);

即获取参数a,b，调用add函数运算，输出c，中间的str2num，mat2str是进行数据类型转换。

到这里，我们的gui界面设计已经完全完成了，点击运行，即可出现我们设计的界面，输入参数，点击运行即可。

这就是我要呈现的所有内容，我是一步一步操作下来的，按照我的步骤，肯定是可以实现GUI界面的，大家加油~
以及欢迎大家批评指正~