图形用户界面（GUI）开发教程

写在前面

图形用户界面（Graphic user interface，GUI），实际上就是人与计算机交互的界面显示格式。广义来说，现在正在看这篇文章使用的浏览器，也是一个GUI。阅读者可以通过这个浏览器获取信息，可以点击“最小化”、“窗口”和“关闭”按钮实现自己想要的功能，可以阅读浏览器中的文字。

我们常说的做个“软件”，其实大概率是做一个实现与后端算法交互的界面。因为绝大多数用户看不懂后端代码，但又想使用这个算法实现自己想要的功能，所以做一个简明、整洁、易用、美观的GUI，对于提升后端算法的适用性是十分有必要的。

总不可能开发一个项目，把算法写好之后，直接给用户，说：“喏，这就是你想要的功能，你简简单单改几个参数就可以实现你想要的功能啦！”显然是不可行的。用户看见代码的时候只会感到头脑眩晕，开始抗拒，并且怀疑我们的代码能力到底行不行？

举个例子。

程序员小雷写了一套卡尔曼滤波算法，交付给用户的时候，是这样的：

mode = 'IF'; 
% mode = 'UD';
% mode = 'FD';
% mode = 'FT1';
% mode = 'FT2';

和用户说，“想要用信息滤波就取消mode = 'IF'的注释就可以啦！”

“想要用UD滤波就取消mode = 'UD'的注释就可以啦！”

……

“但别忘记把其他不想用的滤波算法给注释掉噢，不然会出bug的！”

用户听完小雷的介绍之后说不定就已经头脑发昏，也不知道什么算法要注释哪行代码了。

或者更加极端一点，小雷写代码也不规范，变量名乱写，比如这样：

aaa = '1';
% aaa = '2';
% aaa = '3';
% aaa = '4';
% aaa = '5';

天知道哪行对应哪个滤波算法啊！！

但如果写一个GUI呢，比方像下面这样简单的选择框：

是不是清楚好多？

用户也不用自己翻开后端算法的代码看来看去了，那样看半天说不定也看不出来门道。现在用户想要用什么滤波模式，自己选择想要的滤波模式，然后点击确定就可以啦。

不过这样的界面还没有满足用户的需要。

假如用户想自己改算法参数呢？想改改仿真时长啊初始状态啊噪声矩阵啊……上面的选择框显然没有提供合适的地方让用户可以改算法参数。

所以小雷又重新设计了一下界面，把它改成了下面这样：

现在给用户的选项可丰富啦。可以选择滤波模式，可以选择是否保存图片、数据，可以修改仿真参数，还可以显示不同滤波算法的核心原理公式，给用户直观的感性认识。广义来说这样就可以当作一个软件来用啦。

用户感到很满意。

所以，这样的界面怎么开发呢？

下面根据自己的实战经验，给出开发GUI的完整流程，或许会少掉一些控件不作介绍，因为觉得在自己开发过程中没有使用这些控件。但我觉得控件的使用方法大同小异，核心逻辑掌握之后，换另外一个控件只需要自己在网上搜索一下经验学习一下，很快就能掌握。

先说明，这里说的GUI全部指的是MATLAB 2018版本上的GUI，MATLAB后续版本中推出了APP功能，将原来的GUI替代了。但本人常用的软件还是MATLAB 2018，所以写的都是MATLAB 2018上GUI开发的教程。至于其他真的像个“软件”一样的教程，请见《PyQt5+Anaconda+PyCharm安装、配置和使用》(https://blog.youkuaiyun.com/Ruins_LEE/article/details/116279032)。使用QT可以做一个像“软件”的软件出来了。

下面是整篇教程的顺序：

• MATLAB GUI启动方式；

• 按钮：

  • 查看属性；
  • 回调函数；

• 下拉菜单；

• 单选框和复选框；

• 静态文本和可编辑文本；

• 轴；

• 组；

• 进度条；

• GUI源代码。

MATLAB GUI启动方式

打开MATLAB，在命令行输入

guide;

得到下图所示界面。

这里我们选“新建 GUI”，点击第1项“Blank GUI (Default)”，选好要保存的位置后，点击“确定”。

之后会出现一个新的界面，如图所示。

按照图片中的分区一一介绍功能。

1. 分区“1”中常用的按钮是最后一个绿色三角形，用于设计好GUI后运行，查看效果。其他的按键不常用，不用花费精力在上面。
2. 分区“2”是控件区，给出了MATLAB GUI中可以使用的控件。我们在设计GUI时，常用的控件主要有（按照从上往下、从左往右的顺序）：
   • 按钮；
   • 单选按钮；
   • 复选框；
   • 可编辑文本；
   • 静态文本；
   • 下拉菜单；
   • 轴；
   • 组；
     后面的内容里会一一介绍。
3. 分区“3”说明了该GUI的标签（tag），在句柄（handles）操作中会用到。
4. 分区“4”说明了当前鼠标的在GUI中的位置和选中控件的位置与尺寸。
   • 当前点: [369,451]意为鼠标在距离GUI（用figure1更加准确，但出于文章易读性考虑，使用GUI更易理解。后面提到的GUI均为figure1之义。）最左侧369像素、最下侧451像素的位置；
   • 位置: [760, 584, 567, 630]意为选中控件在距离父对象¹最左侧369像素、最下侧451像素的位置；尺寸大小为宽度567像素、长度630像素。

按钮（Push Button）

查看属性

在功能区中选中“按钮”的标签，将其拖进GUI中。