一、 Matlab App Designer简介

    Matlab App Designer是 Matlab的一个交互式应用开发环境，可以轻松的帮助用户快速的建立用户界面，Matlab App Designer具有以下优点。

1、界面友好，无需专业编程知识，就可以快速建立应用程序；

2、高度可定制性，可根据需求，应用自定义选项轻松对应用程序进行修改和更新；

3、支持代码重用，最大限度提高编程效率

Matlab App Design提供了一个快速、灵活、易使用的开发环境，可以帮助用户快速建立应用程序，实现数据分析的可视化。

二、Matlab App Designer入门介绍

打开Matlab App Designer，其页面如下图所示，左侧为组件库，中间 为设计视图和代码视图，右侧为组件浏览器和组件属性

将组件拖入到设计视图中即可进行用户界面的设计，并可通过组件属性对组件的标签、字体的型式、大小，组件的位置进行修改。

同时可通过代码视图进行代码的查看和代码的编写。

三、利用Matlab App Designer进行应用App界面及程序设计

本案例采用Matlab App Designer进行一个银行一年期存款利息的App界面及程序设计

1、将“编辑字段（数值）”组件拖入到设计视图中，并进行属性需改，如下图所示

2、将Botton按钮组件拖入到设计视图中，并将名称更改为计算

3、点击计算组件按钮，选择组件属性中的回调，添加回调属性，即可转到代码视图，进行代码编写

转到代码视图

并对在组件浏览器中对编辑字段（数值）组件进行名称修改

4、代码编写

Pr=app.PrEditField.Value;%对本金进行赋值

Ra=app.RaEditField.Value;%对一年期利息进行赋值

INT_1=Pr*Ra;%对一年期利息进行计算

app.INTEditField.Value=INT_1;%将利息显示在设计视图

Totle=Pr+INT_1;%本金+利息总额计算

app.TotleEditField.Value=Totle;%将本金+利息总额显示在设计视图

5、点击左上角保存，对文件进行保存，然后点击运行，即可运行该程序

输入本金和利率，点击计算，即可进行相关计算，并在软件界面中显示计算利息以及本金+利息总额，如下图所示。

6、详细程序代码如下图所示

<code>classdef user_interface_app < matlab.apps.AppBase

% Properties that correspond to app components

properties (Access = public)

UIFigure matlab.ui.Figure

EditFieldLabel matlab.ui.control.Label

PrEditField matlab.ui.control.NumericEditField

Label matlab.ui.control.Label

RaEditField matlab.ui.control.NumericEditField

Label_2 matlab.ui.control.Label

TotleEditField matlab.ui.control.NumericEditField

EditField_4Label matlab.ui.control.Label

INTEditField matlab.ui.control.NumericEditField

Button matlab.ui.control.Button

Label_3 matlab.ui.control.Label

Label_4 matlab.ui.control.Label

Label_5 matlab.ui.control.Label

end

methods (Access = private)

% Button pushed function: Button

function ButtonPushed(app, event)

Pr=app.PrEditField.Value;%对本金进行赋值

Ra=app.RaEditField.Value;%对一年期利息进行赋值

INT_1=Pr*Ra;%对一年期利息进行计算

app.INTEditField.Value=INT_1;%将利息显示在设计视图

Totle=Pr+INT_1;%本金+利息总额计算

app.TotleEditField.Value=Totle;%将本金+利息总额显示在设计视图

end

end

% App initialization and construction

methods (Access = private)

% Create UIFigure and components

function createComponents(app)

% Create UIFigure

app.UIFigure = uifigure;

app.UIFigure.Position = [100 100 640 480];

app.UIFigure.Name = 'UI Figure';

% Create EditFieldLabel

app.EditFieldLabel = uilabel(app.UIFigure);

app.EditFieldLabel.HorizontalAlignment = 'right';

app.EditFieldLabel.FontName = 'Times New Roman';

app.EditFieldLabel.FontSize = 15;

app.EditFieldLabel.FontWeight = 'bold';

app.EditFieldLabel.Position = [123 353 35 22];

app.EditFieldLabel.Text = '本金';

% Create PrEditField

app.PrEditField = uieditfield(app.UIFigure, 'numeric');

app.PrEditField.FontName = 'Times New Roman';

app.PrEditField.FontSize = 15;

app.PrEditField.FontWeight = 'bold';

app.PrEditField.Position = [173 353 112 22];

% Create Label

app.Label = uilabel(app.UIFigure);

app.Label.HorizontalAlignment = 'right';

app.Label.FontName = 'Times New Roman';

app.Label.FontSize = 15;

app.Label.FontWeight = 'bold';

app.Label.Position = [78 311 80 22];

app.Label.Text = '一年期利率';

% Create RaEditField

app.RaEditField = uieditfield(app.UIFigure, 'numeric');

app.RaEditField.FontName = 'Times New Roman';

app.RaEditField.FontSize = 15;

app.RaEditField.FontWeight = 'bold';

app.RaEditField.Position = [173 311 112 22];

% Create Label_2

app.Label_2 = uilabel(app.UIFigure);

app.Label_2.HorizontalAlignment = 'right';

app.Label_2.FontName = 'Times New Roman';

app.Label_2.FontSize = 15;

app.Label_2.FontWeight = 'bold';

app.Label_2.Position = [54 230 104 22];

app.Label_2.Text = '本金+利息总额';

% Create TotleEditField

app.TotleEditField = uieditfield(app.UIFigure, 'numeric');

app.TotleEditField.FontName = 'Times New Roman';

app.TotleEditField.FontSize = 15;

app.TotleEditField.FontWeight = 'bold';

app.TotleEditField.Position = [173 230 112 22];

% Create EditField_4Label

app.EditField_4Label = uilabel(app.UIFigure);

app.EditField_4Label.HorizontalAlignment = 'right';

app.EditField_4Label.FontName = 'Times New Roman';

app.EditField_4Label.FontSize = 15;

app.EditField_4Label.FontWeight = 'bold';

app.EditField_4Label.Position = [93 271 65 22];

app.EditField_4Label.Text = '计算利息';

% Create INTEditField

app.INTEditField = uieditfield(app.UIFigure, 'numeric');

app.INTEditField.FontName = 'Times New Roman';

app.INTEditField.FontSize = 15;

app.INTEditField.FontWeight = 'bold';

app.INTEditField.Position = [173 271 112 22];

% Create Button

app.Button = uibutton(app.UIFigure, 'push');

app.Button.ButtonPushedFcn = createCallbackFcn(app, @ButtonPushed, true);

app.Button.BackgroundColor = [0.0745 0.6235 1];

app.Button.Position = [173 178 123 24];

app.Button.Text = '计算';

% Create Label_3

app.Label_3 = uilabel(app.UIFigure);

app.Label_3.FontSize = 13;

app.Label_3.FontWeight = 'bold';

app.Label_3.Position = [109 392 31 22];

app.Label_3.Text = '项目';

% Create Label_4

app.Label_4 = uilabel(app.UIFigure);

app.Label_4.FontSize = 13;

app.Label_4.FontWeight = 'bold';

app.Label_4.Position = [213 392 31 22];

app.Label_4.Text = '数值';

% Create Label_5

app.Label_5 = uilabel(app.UIFigure);

app.Label_5.FontSize = 18;

app.Label_5.FontWeight = 'bold';

app.Label_5.Position = [218 433 113 24];

app.Label_5.Text = '利率计算程序';

end

end

methods (Access = public)

% Construct app

function app = user_interface_app

% Create and configure components

createComponents(app)

% Register the app with App Designer

registerApp(app, app.UIFigure)

if nargout == 0

clear app

end

end

% Code that executes before app deletion

function delete(app)

% Delete UIFigure when app is deleted

delete(app.UIFigure)

end

end

end

四、总结

Matlab App Designer作为交互式应用开发环境，为用户提供了简单易学的应用App界面及程序设计工具，方便用户快速进行快速建立应用程序，实现数据计算的可视化。