MATLAB App Designer学习之旅（一）

一、概述

基于矩阵的MATLAB语言是世界上进行计算数学最自然的方式，许多工程师和科学家都在使用 MATLAB开展分析和设计工作。MATLAB的可视化功能，可轻松可视化数据、深入了解数据并利用数据。

MATLAB中，构建App的方法目前有三种，一是直接用编程工作流进行App开发，二是使用GUIDE设计工具开发，三是使用App Designer设计工具开发。

编程工作流：使用MATLAB函数创建一个传统图窗，并以编程方式在该图窗中放置交互式组件。生成的App所支持的功能与GUIDE、App Designer所支持的功能一样。

GUIDE设计工具：这是一个拖放式环境，已在多个版本中推出。使用GUIDE创建的App与几乎所有其他版本兼容，并且支持MATLAB中的所有图形功能。

App Designer工具：这是一个丰富的开发环境，其中提供大量的交互式控件，包括仪表、旋钮和开关等，且支持大多数图形功能。目前，提议使用此方法构建大多数App。

App Designer工具是自包含式MATLAB子程序，可为大家新建的代码提供一个简单的点选式接口。App Designer工具包含交互式控件，如菜单、按钮、滑块等，当大家与这些控件交互时它们将执行特定的指令。App Designer工具可以用于数据可视化或交互式数据探查绘图。当然，最终大家可以将构建的App打包并与其他MATLAB用户共享，或者使用MATLAB Compiler™ 以独立应用程序形式分发自己的App，这显然很酷，很令人期待。

接下来，让我们一起启动App Designer学习之旅。

二、基础知识及设计准备

（一）新建文件

MATLAB提供了至少两种新建App的办法，一是直接在主程序命令行窗口输入“appdesigner”,然后回车，启动App Designer设计软件；二是点击主程序菜单的“新建”，在弹出的下接菜单中选择“App”，也能启动App Designer设计软件，见图1。App Designer支持多文件设计编辑，这为高效设计提供了更多便利，见图2。

图1 App Designer新建文件

（二）App Designer布局及组件库

App Designer界面布局简洁，见图2。软件上端是菜单及常用工具栏。左侧是设计所用组件库。中间是画布，视图布局设计将在此区域进行。右侧的上半部分为组件浏览器，用以显示设计时所用到的组件，分类树状显示。右侧的下半部分为组件属性区，设计时，我们将可以很方便地在这块区域编辑组件属性特征值，如字体、文本、颜色等。画布上端有“设计视图”和“代码视图”两个按键，设计时可以很方便地在设计视图和代码视图间切换。

图2 App Designer界面布局

作为设计所用原材料，App Designer包含了大量组件，用于设计功能齐全的现代化应用程序，见图3，包括常用组件（红）、容器和图窗工具（蓝）及仪表（绿）。设计时，以鼠标点选所需组件至画布上（鼠标左键选中组件，摁住鼠标左键不放松，将组件拖至画布上）。

图3 App Designer组件

（三）设计准备——调整画布

App Designer新建App时，系统自动生成了app.UIFigure用户界面（可以理解为上述所说的画布——图2中的UI设计区域，这也应视为一个组件），视图设计时，所有组件均应放置在这个用户界面内。设计前，应根据设计需要，对app.UIFigure的属性参数进行编辑，具体见图4、图5、图6。

图4 app.UIFigure中调整画布颜色及位置、尺寸大小

图5 选择需要的UIFigure背景颜色

图6 修改UIFigure位置及大小（宽、高）

接下来，我们就可以在App Designer中正式开展设计工作了。