![4aa6a92e8a8e336330310746e944e415.gif](https://i-blog.csdnimg.cn/blog_migrate/feeb40c5b92777cf92117af006aa8160.gif)
经过两年的学习,相信大家对 MATLAB 都有些基本的了解了。虽说绝大多数情况下它都是作为一种 高级计算器 出场的,在诸如暑期实验室的项目中也会需要用它来进行数据的处理与分析。
在这过程中,能最直观地展示成果地方式当然就是 可视化 (Visualization) 。其中实现人机交互的 UI 界面是最为重要的:简洁精练的界面不仅能有效地展示日思夜想肝出来地成果,更能帮助听众理解这玩意到底是个啥,起到促进交流,事半功倍地作用。
MATLAB 中实现可视化地途径有许多,其中最简便的方法是使用 guide 命令进行创建。guide 命令的教程在网络上铺天盖地,但它但在按钮众多的情况下动作响应的创建与修改并不直观(众多 hObject 无法区分)。本文主要介绍异于 guide 命令搭建图形窗口的纯代码方法。下图是本文的大纲,具体的代码实现请参照文末代码分享吧。
![dc1133307439a22b8f2c558d53ef0cf9.png](https://i-blog.csdnimg.cn/blog_migrate/0f67c3d03245a4f421a7ba06a4b263d1.png)
基本框架
GUI 界面的最顶层便是一个图窗,它需要在一开始便进行定义。很简单,却也很重要。
![ecd7ba4244ae8175db181aacb913846e.png](https://i-blog.csdnimg.cn/blog_migrate/c65400c0fb72ee5dd9a81ac1e5ea167e.png)
只需一句话
在之后创建的所有控键都会属于这一图窗,属于子集与父集的关系。各个控键又会有属于自己的各种参数与回调函数,由此构建出一种树状结构,条理十分清晰。
![68e8e2095939275773318c4b669574e4.png](https://i-blog.csdnimg.cn/blog_migrate/6e0b925e1c1bdeb2c9277f638864e346.png)
基本框架
当然也许还会有超链接到其他图窗的高端操作,但这目前也没啥用处,也就没去找资源与教程,就不多学了。
常用控件
uicontrol 中的控件种类挺多,但常用的大致是四种:Text, Edit, PushButton 与 Slider.
其中 Text 是纯粹的输出控键,能够进行文字的显示,但无法进行选中与复制;Edit 能接受输入,也能输出可选中复制的文本;PushButton 一般是作为行为触发器;Slider 可以提供连贯的数字选择。
Text
![79f5a11be009eec11b2d1997e07e06f4.png](https://i-blog.csdnimg.cn/blog_migrate/7c64c71a5ac10373038c0bb77c4768ab.png)
常用的 Text 初始化代码
这段代码用于创建句柄为 Text1 的文本框,归属于 FollowBegger 父项中。后面跟着的就是各种属性的设置了。
Style 决定这一 ui控件 的类型,Text 就属于文本框。String 决定文本框的文本显示。FontSize 是文本大小设置,其他还有 角度、粗细、倾斜度、颜色等可进行调整。Position 是该文本框的位置,默认是以左下角为基准点的像素偏移量。
Edit
![54751f2861c035dc71f0343fc32f6ebf.png](https://i-blog.csdnimg.cn/blog_migrate/ecd2e40fe069e4c15cb454b0bf0093a9.png)
常用的 Edit 初始化代码
Edit 是可输入的文本框,也可用于输出,甚至添加 Callback 响应。
Unit 是跟 Position 配套使用的一个参数,决定位置的形容方式。默认为 pixels ,即像素单位,也可以修改为英尺、厘米等。normalized 代表百分比单位,因此可以看到后面 position 的参数都变成小数了。 Horizontalalignment 确定了文字排版方式,默认是居中,也可以调整成左或右对齐。
PushButton
![3f75962c2765c5ee886178a82b1e305a.png](https://i-blog.csdnimg.cn/blog_migrate/57f7e47d0b0b6c44c2a100084eebd76c.png)
常用的 PushButton 初始化代码
作为最重要的触发器,PushButton 的精华就在 Callback 之上。在上图的例子中,按下按钮之后就会执行当前目录中名叫 'accept' 的函数。除了 CallBack —— 左键单击响应之外,还有诸如 CreatFcn, KeyPressFcn 等不同响应模式,这将在进阶篇进行讲解。
Slider
![d11fededcc69cb7ade7da79d367b293a.png](https://i-blog.csdnimg.cn/blog_migrate/202f7de08ef3a9a327eb194a560e57d5.png)
常用的 Slider 初始化代码
Slider 一般会跟一个 Edit 联用,作为一个连续的数字输入装置。
这边的 Min 与 Max 分别规定了 Slider 的最左侧与最右侧代表的数值,Sliderstep 的两个参数分别决定了单击进度条与单击小箭头的步长,均以百分比表示。
![ed2216b1b50dd943f8f066f48b91162a.gif](https://i-blog.csdnimg.cn/blog_migrate/51fe475da63cdc3af33ba0d54df4d396.gif)
单击进度条
![6f6b138e6d1d575614e1d07cdfe0dd24.gif](https://i-blog.csdnimg.cn/blog_migrate/928e1fc6dc218b873be746b767151115.gif)
单击小箭头
Callback
划重点了啊,这是 ui 界面最重要的功能,输入与输出的桥梁。毫不夸张地说:没有 Callback 的 ui 界面就只是一张图片而已。
为了简化流程,这边使用的是另开 function 文件的方法,在主文件中只需要写一行
'Callback','FunctionName'
即可。
![b9a68175af5d4d75728ae4cdfbaf2f59.png](https://i-blog.csdnimg.cn/blog_migrate/3bfee8d1d03ff2ec9020ec1b2a12747e.png)
这是一张示意图
在上图中可以看到,目前打开的是叫做 GUI_FollowBegger 的主文件,当前目录中存在 accept 这个响应的 Callback 函数。这样可以达到主文件最简化的效果。
![315683d4511343a62250817e6f38ab3b.png](https://i-blog.csdnimg.cn/blog_migrate/0bacaeab37ac03a57b1a5de88baa0c0d.png)
这又是一张示意图
下图打开的是名为 accept 的 Callback 函数。我们可以看到第三行有使用 evalin 函数,它和assignin一起被用作 工作区与函数内部的变量交流。
![0fd0be98ccde139e777811e243adbb03.gif](https://i-blog.csdnimg.cn/blog_migrate/25cf16e178a8d8a7a657c8f8045e7dea.gif)
工作区与函数内部的变量交流
例如:
![5613a6cad0d7a253e601b253d82b9ab1.png](https://i-blog.csdnimg.cn/blog_migrate/8ce7c117f9b20ac31898a8f0cc6df57b.png)
这行代码会从工作区中读取名为 Push
Button2 的按钮并将其另存到函数中,命名为 PushButton1 。
对应的:
![9f5d455c1c4c8065dfc7b7c9040ea395.png](https://i-blog.csdnimg.cn/blog_migrate/6561fbbd711d0a6759cef112577ef0cf.png)
这行代码能将函数中名为 PushButton1 的按钮另存到工作区中并命名为 PushButton2 。
由此便实现了函数与工作区间的变量交流,达到主文件与响应函数分离的效果。
![0fd0be98ccde139e777811e243adbb03.gif](https://i-blog.csdnimg.cn/blog_migrate/25cf16e178a8d8a7a657c8f8045e7dea.gif)
结
本文主要涉及 MATLAB 中构建 ui 界面的代码方法,包括了四种基本的控键与一些简单的属性修改。
其他控件、复杂属性、各种响应相关的知识将在进阶篇中进行呈现。
关注公众号,回复
gui#1
即可获取文章开头 gif 的 .m 文件供参考
下期预告
![e053c67b089eb7e205ca711185b714d4.png](https://i-blog.csdnimg.cn/blog_migrate/87bb1e8aac207b140734b6d3185e2ee4.png)
GUI 图形界面设计 - 进阶篇
![ef9346c584d16e95cd322611f08cccd4.gif](https://i-blog.csdnimg.cn/blog_migrate/1a34cbcdb59a6b9021baf2f0ebb4dde9.gif)
GUI 小玩意 - 账号登录
若有什么想对我说的,欢迎邮件哦
![c93e117fb3e07668a4f2031a3e22a864.png](https://i-blog.csdnimg.cn/blog_migrate/8944b4ad170ccfb0ce08661382022170.png)
![8a9e422e342252aaaa9d655848122bdb.png](https://i-blog.csdnimg.cn/blog_migrate/17cfb8136db16409535332394de1ce56.jpeg)
扫码关注我
盯住点在看的手
![28748df88888a79f51fad397ef96f56f.gif](https://i-blog.csdnimg.cn/blog_migrate/bdf1d099adfc5982bbd5fa58a810f263.gif)