使用matlab设计交互界面（App Designer）

Matlab的App Designer可以帮助我们快速编写简易的用户界面程序。本文是一个笔记，记录利用App Designer开发交互界面的一些tips。

1. 主体流程

1.1 一个最简单的DemoApp

在matlab主界面里面新建App（保存为DemoApp.mlapp），就可以进入App Designer。App Designer给我们提供了设计视图和代码视图。设计视图方便我们拖放各种控件，像按钮、文本框、坐标轴啊之类。代码视图是用来编写具体函数，按钮响应，交互逻辑之类。设计视图不用过多介绍，下面我们再看看代码视图里面的东西。

在matlab中，一个app就是一个类。我们打开代码视图，可以看到该类继承了matlab.apps.AppBase，它的主体结构如下

classdef DemoApp < matlab.apps.AppBase
    % Properties that correspond to app components
    properties (Access = public)
        ....
    end

    % Component initialization
    methods (Access = private)

        % Create UIFigure and components
        function createComponents(app)
            ....
        end
    end

    % App creation and deletion
    methods (Access = public)

        % Construct app
        function app = DemoApp
            ...
        end

        % Code that executes before app deletion
        function delete(app)
            ...
        end
    end
end

主要有四块

• properties：UI组建的属性。自动生成，不允许更改。
• function createComponents(app)：创建UI组建的函数，自动生成，不允许更改。
• function app = DemoApp：构造函数，自动生成，不允许更改。
• function delete(app)：析构函数，自动生成，不允许更改。

有了这四个部分，app类就可以顺利运行。

1.2 属性，函数，回调

属性。类似于任何面向对象语言的成员变量，我们可以再类中任何函数更改属性的值。也有私有和公共之分。

函数。这里的函数，就是普通的函数，也有私有和公共之分。

回调。回调是AppDesigner里面最重要的了，这里的回调就相当于MFC里面的响应函数，它是我们和界面交互的接口。比如我们给按钮NextButton添加了回调ValueChangedFcn，matlab会自动给我们生成一个函数：

        % Value changed function: NextButton
        function NextButtonValueChanged(app, event)
            value = app.NextButton.Value;
            
        end

当我们运行app时，点击了NextButton，则会进入这个函数。

2. 控件使用实例

2.1 matlab.ui.control.UIAxes

如果想在UIAxes里面画图，需要传入UIAxes的句柄给绘制图像的函数。matlab里面绘图相关函数都可以接受句柄作为第一个参数。

cla(app.UIAxes)                        % 清空绘图区
plot(app.UIAxes, x, y)                 % plot函数
hold(app.UIAxes, 'on')                 % hold on
axis(app.UIAxes, [-1, 1, -2, 3])       % 更改坐标轴范围
app.UIAxes.Title.String = 'demo'       % 更改标题

2.2 matlab.ui.control.DropDown

下拉列表也是很常用的控件，以下是下拉列表常用的函数

value = app.demoDropDown.Value;        % 拿到选中的值。默认选中第一个。

2.3 matlab.ui.control.EditField

编辑框有两种，一种是数值框，一种是文本框。它们的用法相似

value = app.EditField.Value;           % 获取编辑框内的值
app.EditField.Value = value;           % 设置编辑框内的值

2.4 matlab.ui.control.Label

标签框一般用来显示文本

app.demoLabel.Text = 'This is a label';  % 设置label的文字
text = app.demoLabel.Text;               % 获取label的文字

 

 

3 其他涉及到用户交互的函数

3.1 文件/文件夹选择

文件选择用 uigetfile 函数，文件夹选择用 uigetdir 函数。

[filename, path] = uigetfile('*.m');          % 用户选择文件
if isequal(filename,0)
    disp('User selected Cancel');
end

path = uigetdir();                            % 用户选择文件夹，取消返回0


fullpath = fullfile(path, filename);          % 合并成全路径
[path, name, surffix] = fileparts(fullpath);  % 拆分。

当需要保存文件时，用 uiputfile 函数。另外，uisave函数可用于保存matlab变量。

3.2 弹出消息框

msgbox('Here is a message!')

3.3 输入对话框

prompt = {'Enter matrix size:','Enter colormap name:'};   % 提示
title = 'Input';                                          % 标题
dims = [1 35];                                            % 输入框尺寸
definput = {'20','hsv'};                                  % 默认输入
answer = inputdlg(prompt,title,dims,definput)