matlab app designer 教程 · 2019-01-21 · 第1 章 matlab app desinger 教程 1.1...

MATLAB 中⽂论坛技术专栏系列

MATLAB App Designer 教程

MATLAB 中⽂论坛出品

http://www.ilovematlab.cn/matlab_jishuwenzhang_technical_articles

目录

第 1 章 MATLAB App Desinger 教程 . . . . . . . . . . . . . . . . . . . . . . 11.1 如何使⽤ AppDesigner 进⾏的简单的 GUI 设计 . . . . . . . . . . . . . . . . 1

1.1.1 使⽤ App Desinger 的条件是什么 . . . . . . . . . . . . . . . . . . . . . . . 11.1.2 App Designer 有什么主要的特点 . . . . . . . . . . . . . . . . . . . . . . . . 21.1.3 如何使⽤ AppDesinger 进⾏简单的 GUI 布局 . . . . . . . . . . . . . . . . . . 21.1.4 如何修改 App Designer 控件的名字 . . . . . . . . . . . . . . . . . . . . . . 41.1.5 如何给 App 类添加属性 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51.1.6 如何设置 GUI 控件的初值 . . . . . . . . . . . . . . . . . . . . . . . . . . . 61.1.7 如何给控件添加 callback . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

1.2 详解 App Designer ⽣成的代码 . . . . . . . . . . . . . . . . . . . . . . . . . . 91.2.1 App 属性声明的语法为什么和以前的不⼀样 . . . . . . . . . . . . . . . . . . . 91.2.2 App 的构造函数中做了哪些事情 . . . . . . . . . . . . . . . . . . . . . . . . 101.2.3 App 的析构函数在何时被调⽤ . . . . . . . . . . . . . . . . . . . . . . . . . 111.2.4 如何得到 AppDesigner ⽣成的代码 . . . . . . . . . . . . . . . . . . . . . . . 12

1.3 如何使⽤ Gauge,Knob,Lamp, 和 Toggle Switch . . . . . . . . . . . . . . . . . 141.3.1 Gauge,Knob,Lamp 和 Toggle Switch 在 GUI 中有什么⽤处 . . . . . . . . . . . 141.3.2 如何利⽤ Gauge,Knob,Lamp 和 Toggle Switch 设计⼀个简单的 APP . . . . . . 151.3.3 如何⽤ Knob 控制 Gauge, ⽤ Toggle Switch 控制 Lamp . . . . . . . . . . . . 17

1.4 App Designer 和硬件结合实例 . . . . . . . . . . . . . . . . . . . . . . . . . . 191.4.1 如何使⽤ MATLAB Arduino Support Package . . . . . . . . . . . . . . . . . 191.4.2 如何利⽤ App Designer 给 Arduino 设计 Dashboard(控制台) . . . . . . . . . . 201.4.3 如何给 Arduino 连线 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221.4.4 如何编写 Dashboard 的 callback . . . . . . . . . . . . . . . . . . . . . . . . 24

1.5 MATLAB App Designer 和 MVC . . . . . . . . . . . . . . . . . . . . . . . . 271.5.1 简单回顾什么是 MVC 模式 . . . . . . . . . . . . . . . . . . . . . . . . . . 271.5.2 先设计取款机的 Model 类 . . . . . . . . . . . . . . . . . . . . . . . . . . . 281.5.3 ⽤ App Designer 布局 View . . . . . . . . . . . . . . . . . . . . . . . . . . 301.5.4 给 View 添加 Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331.5.5 启动 MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331.5.6 App Designer + MVC 流程回顾 . . . . . . . . . . . . . . . . . . . . . . . . 33

1.6 从 App Designer 的局限性谈 MATLAB 的图形系统 . . . . . . . . . . . . . . 35

作者简介 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

1

2 MATLAB App Designer 教程

更多 MATLAB 中文论坛技术文章 . . . . . . . . . . . . . . . . . . . . . . . . . . 41

第 1 章 MATLAB App Desinger 教程

1.1 如何使用 AppDesigner 进行的简单的 GUI 设计1.1.1 使用 App Desinger 的条件是什么

Mathworks 在 R2016a 中正式推出了 GUIDE 的替代产品:AppDesigner，这是在 MAT-LAB 图形系统转向使⽤⾯向对象系统之后 (2014b)，⼀个重要的后续产品，它旨在顺应 Web的潮流, 帮助⽤户利⽤新的图形系统⽅便的设计更加美观的 GUI。要使⽤ App Designer，需

要最新的 MATLAB R2016a, 或者已经安装了 R2014b 到 R2015b 之间的任⼀版本，可以从

Mathwork 的 File Exchange 处下载 App Designer 的安装包进⾏安装：

http://www.mathworks.com/matlabcentral/fileexchange/48142-app-designer

唤起 App Designer，只需要在命令⾏中输⼊ appdesigner 就可以了

>> appdesigner

1

2 MATLAB 中⽂论坛技术专栏

1.1.2 App Designer 有什么主要的特点笔者看来 App Designer 有如下这么⼏个特点：

• 最明显的特点：⾃动⽣成的代码使⽤了⾯向对象的语法。

• 最⼤的优点是：增加了和⼯业应⽤相关的控件：⽐如仪表盘，旋钮，开关，指⽰灯

• 采⽤现代且友好的界⾯，⽤户更容易⾃⼰学习和探索

1.1.3 如何使用 AppDesinger 进行简单的 GUI 布局在《MATLAB ⾯向对象编程：从⼊门到设计模式》第 7.1 节中，有⼀个账户存款提款

界⾯的例⼦，界⾯如下：

在 7.1 节中，我们采⽤了 GUIDE 来设计这个界⾯，在接下来的 7.2，7.3 节中，进⼀步

循序渐进的介绍了如何⽤程序的⽅式，和⾯向对象的⽅式来重新设计这个存款提款界⾯。本


MATLAB App Designer 教程 3

篇教程还是利⽤同样的例⼦，同样的顺序，先利⽤ App Designer 来设计这个界⾯，然后再

介绍如何通过编程的⽅式实现。

⾸先我们在 MATLAB 中打开 App Designer

>> appdesigner

模仿书中的例⼦，从 appdesigner 中拖拽两个 Edit Field(Numeric) 和 Button 构成基本界⾯

如下所⽰：

图 1.1

App Designer 在布置画布控件上设计的⾮常友好，如果⽤⿏标挪动这些控件，画布会上

出现辅助线帮助对齐控件

最终调整过后的 GUI 看上去和⽤ GUIDE 设计类似


值得注意的是，如果点选多个控件，App Designer 还可以帮助你⾃动排布它们在横向

和纵向的分布等等, 这个功能是笔者认为 App Designer 最友好的地⽅之⼀！

1.1.4 如何修改 App Designer 控件的名字点击 CodeView, 可以看到 App Designer 为这个界⾯⾃动⽣成的类的代码，整段代码中

有些部分是灰⾊的，这表⽰它们不可以在编辑器中 * 直接 * 被修改，⽽要通过 App Designer提供的互动⽅式去修改，本节中我们先尊重 App Designer 的这样的⼯作流程，之后我们将

会介绍直接修改类定义的⽅法。

在 Code View 中，我们看到，两个 Button 分别是类的两个属性，名字叫做 Button, 和Button2。这样命名属性对程序逻辑的理解没有帮助，最好把它们的名字修改得有实际的意

义：



可以点击右栏 Component Browser 中的 app.Button 和 app.Button2 来键⼊新的属性

的名字，* 注意 * 左边代码中的属性名称也将做 * ⾃动的 * 修改，(尽管这些属性的代码是

灰⾊的)，如图所⽰：

该类中另两个重要的属性是可编辑的⽂本/数字框，它们的名字分别是 NumericEdit-Field, 和 NumericEditField2, 同样, 这些的名字不利于程序的阅读。我们把它们名字改成

ViewBalance,ViewRMB, 如图所⽰：

图 1.2

1.1.5 如何给 App 类添加属性沿⽤第 7 章的 MVC 的设计思想，我们期望⾄少能把 GUI 的视图和模型分开 (尽管⽬前

看来好像多此⼀举), 在这个应⽤中，Model 中应该包括账户 Balance 的值，于是我们给类添

加⼀个叫做 Balance 的属性，这可以通过点击 Editor->Property->Insert Private Property来达到：


图 1.3

我们看到上图中，App Designer ⾃动在类定义中插⼊⼀段 property 的代码, 该 Property的属性是 Private, 即⽆法从外部访问和修改 Balance.

1.1.6 如何设置 GUI 控件的初值通常在 GUI 呈现给⽤户时，栏⽬中应该有些初值，这⾥我们希望 ViewBalance 和

ViewRMB 栏中也能够显⽰初始值，那么只需修改 startupFcn 就可以了，该⽅法类似 MVC模型⾥⾯各个类的 Constructor 的综合，代码如下:

% Code that executes after component creationfunction startupFcn(app)

app.Balance = 500;app.ViewRMB.Value = 0 ;app.ViewBalance.Value = app.Balance;

end

即初始余额 500 元，初始要操作 (提款或者存款) 的数⽬是 0，如图：

图 1.4



1.1.7 如何给控件添加 callback最后，需要给两个 button添加回调函数，点击 Component Browser->app.WithDrawButton-

>Callbacks->Add ButtonPushedFcn callback, 如图所⽰:

图 1.5

App Designer 会⾃动帮你在类的定义中插⼊⼀个⽅法，该⽅法的只有⼀个参数就是对

象本⾝，名字叫做 app, 其实和我们常⽤的 obj 是⼀回事。

WithDrawButton 的回调函数如下：

function WithDrawButton_ButtonPushed(app)value = app.ViewRMB.Value ;app.Balance = app.Balance - value;app.ViewBalance.Value = app.Balance;

end

DepositButton 的 callback 类似

% DepositButton button pushed functionfunction DepositButton_ButtonPushed(app)

value = app.ViewRMB.Value ;app.Balance = app.Balance + value;app.ViewBalance.Value = app.Balance;

end

注意，这⾥我们特意把 View 中的 Balance 的显⽰和 Model 中的实际的 Balance 值分开，

这个思想来⾃于书中第 7 章的 MVC 模型，App Designer 针对不需要理解和掌握设计原理

MATLAB ⽤户群，⽽如果想要设计⼤型可靠的⼯程项⽬，设计思想是必不可少的。

最后点击⼯具栏中的 RUN 按钮，测试⼀下这个简单的程序，初值 500，存款 50, 账户

余额变成 550, 提款 200, 账户余额变成 350.


图 1.6

图 1.7



1.2 详解 App Designer 生成的代码本节解读 App Designer ⾃动⽣成的⾯向对象代码中的内容。

1.2.1 App 属性声明的语法为什么和以前的不一样沿⽤教程 1 中的例⼦，由 App Designer ⽣成 MyBalanceApp 类的属性如下，它们都是

⽤户在 DesignView 中拖拽到画布上的控件，并且我们教程 1 中修改了部分属性的名称：

图 1.8

还需要注意到，这⾥属性声明的语法，和<<MATLAB面向对象编程-从入门到设计模式>>(出版于 2015 年 1 ⽉) 中介绍的属性声明有些不同，书中介绍的语法格式是：

propertiespropName

end

⽽这⾥的语法格式在 propName 后⾯多了⼀部分：

propertiespropName propTyp

end

这是因为，在最新的 R2016a 中，MATLAB 的⾯向对象系统专门引⼊新的可选 (Optional)属性声明。这就是说，* 如果有需要 * ，类的设计者可指定属性的种类。⽐如我们把 myprop的属性指定成 double.classdef MyClass

propertiesmyprop double

endend

那么在赋值给对象属性赋值的时候，也必须指定其值的类型是 double scalar，如果尝试要给

它赋其它种类的值，MATLAB 将报错：


>> o = MyClass;>> o.myprop = {1,2}While setting the 'myprop' property of 'MyClass':The following error occurred converting from cell to double:Conversion to double from cell is not possible.

⽽在这个功能发布之前，类的设计者需要通过 set 函数来实现对类的属性的限制，详见

书第 2.8 节

1.2.2 App 的构造函数中做了哪些事情在 App Designer ⽣成的 MyBalanceApp 类中，构造函数包括以下⼯作

图 1.9

该⽅法在 Code View 中是灰⾊的，表⽰不⽀持直接修改。

第一步调用 createComponents 方法

createComponents 是定义在 MyBalanceApp 类中的⼀个 private ⽅法，只能从类的内

部进⾏调⽤。它相当于 MVC 模式中,View 类的初始化⼯作，内容包括: + ⽣成 figure 对象

当做画布，figure 尺⼨⼤⼩来⾃于 Design View 中的设计 + ⽣成 Design View 中⽤户指定

的各个控件，初始化它们的⼤⼩，部分初值和在 figure 中的位置

methods (Access = private)function createComponents(app)

app.UIFigure = uifigure;app.UIFigure.Position = [100 100 212 152];app.UIFigure.Name = 'UI Figure';setAutoResize(app, app.UIFigure, true)

... 以下省略 ...




第二步调用 registerApp 方法

registerApp ⽅法继承⾃ MyBalanceApp 的基类 matlab.apps.AppBase% Register the app with App DesignerregisterApp(app, app.UIFigure)

该⽅法把 app 对象中的 UIFigure 属性，作为 reference 传给基类去注册⾃⼰, ⼯作包括:• 给 UIFigure 添加⼀个动态属性，该动态属性反过来指向 app 本⾝，这样 UIFigure

也拥有指向 app 的 handle• 把 MyBalanceApp 的析构函数设置成关闭 GUI 窗⼜的回调函数，这样关闭 GUI 窗

⼜的时候，会触发 MATLAB 关闭 UIFigure• 注册⼀些其它的回调函数


* 第三步调用 runStartupFcn 方法

该⽅法是 MyBalanceApp 中定义的⼀个 public ⽅法，该⽅法的框架由 App Designer ⽣

产，由⽤户⾃⾏添加需要的内容。作⽤包括⼀些额外的初始化⼯作。⽐如在账户提款存款的

例⼦中，我们需要在 GUI 刚开始的时候，⼀些栏⽬中就可以显⽰⼀些初始值，于是我们需

要修改 runStartupFcn 如下：

function startupFcn(app)app.Balance = 500;app.ViewRMB.Value = 0 ;app.ViewBalance.Value = app.Balance;

end

1.2.3 App 的析构函数在何时被调用MyBalanceApp 的析构函数的内容是关闭 GUI 的 Figure, 该函数是点击 GUI 的关闭窗

⼜按钮时的回调函数，于是 GUI 的窗⼜被关闭将触发该⽅法，关闭 MATLAB 的 UIFigure。% Code that executes before app deletionfunction delete(app)

% Delete UIFigure when app is deleteddelete(app.UIFigure)

end


图 1.10

1.2.4 如何得到 AppDesigner 生成的代码教程 1 中提到，本 Tutorial 的顺序是先介绍使⽤ App Designer 提供的拖拽的⽅式 GUI

编程，然后再进阶介绍如何⽤纯程序的⽅式结合 App Designer 进⾏ GUI 编程。如果要使⽤

纯程序的⽅式，我们需要得到 App Designer 帮我们⽣成的代码，但 App Designer 保存之后

是⼀个后缀为 mpapp 的⽂件，该如何打开得到其中的代码呢？有⼏种办法，最简单的就是

在 App Designer 的 Code View 中按下 Ctrl + A, 选定所有的代码，然后 Ctrl + C，这样就

把所有的代码赋值到剪贴板了。

图 1.11



读者可以做⼀个实验，假设你给 App 起的名字叫做 MyBalanceApp, 那么 App Designer帮你⾃动⽣成的类的名字也叫做 MyBalanceApp, 读者可以在任意⽬录中，新建⼀个 M ⽂件

叫做 MyBalanceApp，把拷贝出来的代码粘贴进去，然后在命令⾏中声明⼀个该类的对象

>> myBalanceApp

我们将看到，⼀个⼀摸⼀样的 GUI 产⽣了，并且每个 Button 所执⾏的功能都和原来⼀样！

这将是我们后续介绍 App Designer 和 MVC 模式结合的基础。


1.3 如何使用 Gauge,Knob,Lamp, 和 Toggle Switch打开 App Designer, 新增的最显眼的控件就是 Gauge, Knob,Lamp 和 Toggle Switch 了，

这节先学习它们的基本使⽤。

1.3.1 Gauge,Knob,Lamp 和 Toggle Switch 在 GUI 中有什么用处Gauge 是仪表盘，它是⼀个接受外部输⼊，并且在 GUI 中显⽰读数的控件。在实际 GUI

应⽤中，Knob 可以⽤来显⽰ MATLAB 从外界搜集的模拟 (Analog) 的或者数字 (Digital)的信号。

图 1.12

Knob 控件有两种旋钮，它们是输出控件，可以输出类似 Analog 或者 Digital 信号，在

实际 GUI 应⽤中,Knob ⽤来控制外部硬件输⼊。

图 1.13

Switch 也是输出装置，它对应现实中的按钮。Switch 只有两个状态：开和关。在实际

GUI 应⽤中,Switch 可以⽤来控制外部硬件的状态。

图 1.14



1.3.2 如何利用 Gauge,Knob,Lamp 和 Toggle Switch 设计一个简单的APP

本节为了简单起见，仅仅构造⼀个假想的 APP：

• ⽤ Knob 的输出来控制 Gauge 的读数，

• ⽤ Switch 来控制 Lamp 的颜⾊

在下节教程中，我们将举⼀个更实际的 MATLAB App Designer 和硬件结合的例⼦。

本例的设计如下：⾸先拖拽两个 Panel, 命名如图。从用户体验的角度出发，在 GUI 上进行明显的分组可以帮助用户理解控件的用处, 从视觉上可以看出，Gauge 和 Knob 是相互

关联的控件，⽽ Toggle Switch 和 Lamp 是相互关联。

图 1.15

并且注意到，这⾥修改了 Lamp 的初值颜⾊为⿊⾊，表⽰当开关的状态是’ 关’ 时，灯是⿊

⾊的。如果修改属性的初值在1.1.6中曾经提到过：需要在 Code View tab 中, 在 ComponentBrowser 中点选对应的控件，然后在 Property Browser 中寻找可以允许修改的属性，如图：


图 1.16



1.3.3 如何用 Knob 控制 Gauge, 用 Toggle Switch 控制 Lamp简单起见，不再修改类定义中属性的名字。直接给 Knob 添加 ValueChanged 的回调函

数

图 1.17

在其回调函数中，直接把得到的 Knob 的值再赋给 Gauge，达到控制仪表盘的⽬的：

function KnobValueChanged(app)value = app.Knob.Value;app.Gauge.Value = value ;

end

接下来再给 ToogleSwitch 添加回调函数：

图 1.18

在其回调函数中，⽐较 ToggleSwitch 的属性 Value，如果是’On’, 则把 Lamp 的颜⾊改

成红⾊，否则设成⿊⾊：

function ToggleSwitchValueChanged(app)value = app.ToggleSwitch.Value;


if strcmp(value,'On')app.Lamp.Color = [1,0,0] ;

elseapp.Lamp.Color = [0,0,0];

endend

最后实际效果如下，⿏标把 Knob 的值拖动到 16，Gauge 的值随即也改到 16；点击

Toggle Switch 成为 On 状态，Lamp 的颜⾊变成红⾊。

图 1.19

本节的例⼦仅为了简单说明 Knob,Gauage,Toggle Swith 和 Lamp 的简单使⽤，下节中

我们将把这些控件和实际的硬件结合起来。


matlab app designer 教程 · 2019-01-21 · 第1 章 matlab app desinger 教程 1.1...

Documents