MATLAB 之 App designer 小白学习（一）
本文使用的是MATLAB2019，可在公众号后台获取
一、前言
在MATLAB 2016版本后，不同于原来了GUI设计界面格式，增加了焕然一新的APP设计工具，大大提高了设计的便捷性。但是目前相关的教程和实例实在太少，只能亲自往上添凑一些内容。
目前的我还是小白一枚，将从零学起，并在这里做一个记录，如果你也是小白，那就跟着我一起学习，迅速蜕变为大咖！
二、基本界面
1.主页-新建-APP
2. 界面
在最左侧，有最近使用的App 和 打开 这两个内容，方便我们直接打开之前建立的APP文件或者本地文件中的APP。
在中间部分，有新建（空白、两栏和三栏式）、示例（快速入门和编程任务）
如下图
三、示例学习
1.交互式教程
点开示例中的交互式教程，教程会提示每一步的操作，这是基本的APP建立操作，一起学习一下。
（1）设计界面
在这个界面中可以看到，菜单栏有设计器和图布两大块，在图布一栏中，可以对图布上的控件进行保存、对其、大小、组合等排版功能；在设计器一栏中，对文件保存、新建、打开、共享等基本操作。
界面的最左侧是控件列表，可以在高频使用控件的右上角点五角星标识，将其放入收藏夹中，在之后设计中可以直接从收藏夹里调用。
最中间的部分便是图布设计部分，可以看到右上方有“设计视图”和“代码视图”两部分，设计视图是APP界面的设计界面，代码界面则是每个控件具体工作的代码。
最右侧一栏是组件浏览器、检查器、回调等，是对设计过程中相应的控件属性等进行操作的地方。
（2）交互式教程操作内容
第一步，从左侧的控件区找到坐标区，按住鼠标左键拖拽到界面中间的图布上，松开左键，如下图
可以看到，这个时候最右侧的组件浏览器app UIFigure下面出现了 app UIAxes,也就是代指坐标区这个控件。下面有标签、字体、刻度、标尺等，是对坐标区的外观属性进行设计，可以自行调整一下，观察一下变化。
第二步，将滑块拖拽到图布上。同第一步的操作。
操作结束后，可以看到组件浏览器中多了app Slider.也可以对滑块这个控件进行属性的编辑。
第三步，在图布上的滑块控件标签栏双击，键入 Amplitude
第四步，点开代码视图，进入代码区
在代码区，可以翻看一下所有的代码，我一行一行进行分析：
classdef tutorialApp < matlab.apps.AppBase
定义一个 叫做tutorialApp的类
% Properties that correspond to app components
properties (Access = public)
UIFigure matlab.ui.Figure
UIAxes matlab.ui.control.UIAxes
AmplitudeSliderLabel matlab.ui.control.Label
AmplitudeSlider matlab.ui.control.Slider
end
说明APP界面上拖拽的控件，这个代码中有四个控件，UIFigure是整个APP图布，UIAxes是坐标区，AmplitudeSliderLabel是滑块前面的标签框，AmplitudeSlider是滑块控件。
% Callbacks that handle component events
methods (Access = private)
% Value changed function: AmplitudeSlider
function AmplitudeSliderValueChanged(app, event)
value = app.AmplitudeSlider.Value;
plot(app.UIAxes,value*peaks)
app.UIAxes.YLim=[-1000 1000];
end
end
控件回调函数，其中，function部分内容是 AmplitudeSlider 的回调函数，也就是在界面上操作滑块时执行的程序。 value = app.AmplitudeSlider.Value; 是将滑块上的值赋给value。
黄色部分是我后面加上去的，程序内容后面解释。
% Component initialization
methods (Access = private)
% Create UIFigure and components
function createComponents(app)
% Create UIFigure and hide until all components are created
app.UIFigure = uifigure(\'Visible\', \'off\');
app.UIFigure.Position = [100 100 640 480];
app.UIFigure.Name = \'UI Figure\';
% Create UIAxes
app.UIAxes = uiaxes(app.UIFigure);
title(app.UIAxes, \'Title\')
xlabel(app.UIAxes, \'X\')
ylabel(app.UIAxes, \'Y\')
app.UIAxes.TitleFontWeight = \'bold\';
app.UIAxes.Position = [169 201 300 185];
% Create AmplitudeSliderLabel
app.AmplitudeSliderLabel = uilabel(app.UIFigure);
app.AmplitudeSliderLabel.HorizontalAlignment = \'right\';
app.AmplitudeSliderLabel.Position = [198 66 59 22];
app.AmplitudeSliderLabel.Text = \'Amplitude\';
% Create AmplitudeSlider
app.AmplitudeSlider = uislider(app.UIFigure);
app.AmplitudeSlider.ValueChangedFcn = createCallbackFcn(app, @AmplitudeSliderValueChanged, true);
app.AmplitudeSlider.Position = [278 75 150 3];
% Show the figure after all components are created
app.UIFigure.Visible = \'on\';
end
end
这部分是组件初始化的内容，在对每个组件拖放到图布中时，这些内容会自动生成，是控件属性，包括控件的位置、里面文字的格式等的定义。
可以通过在设计视图右侧的组件浏览器中修改属性，也可以在代码视图这部分键入代码进行修改。
% App creation and deletion
methods (Access = public)
% Construct app
function app = tutorialApp
% Create UIFigure and 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
这部分是APP的创建和退出。
由上述分析，可以看到APP DESIGNER的界面设计更简洁方便，能够手动点击鼠标完成的内容基本上不需要再用代码来编辑，很人性化。
第五步，添加回调函数。
刚刚一直提及回调函数，回调函数通俗说就是在界面上对控件进行操作时，希望这个动作完成的程序。
回调函数可以通过在界面上，鼠标选中控件，右键点击选择回调；也可以在组件浏览器中，选择某个控件（app.XXX），右键选择回调；还可以直接点击代码视图，寻找相应的回调函数。
第六、七步，添加程序。
在滑块控件的回调函数中，添加下面这两段程序，也就是第四步中我提及的黄色部分。
plot(app.UIAxes,value*peaks) app.UIAxes.YLim=[-1000 1000];
第一句 ，plot 是绘图指令， app.UIAxes代表在坐标区里， value*peaks，上文提到value是滑块上的值赋给的，也就是滑块上的值乘以peak。
第二句，app.UIAxes.YLim=[-1000 1000]; 定义纵坐标的范围。
第八步，运行
点击菜单栏上方的运行，会提示保存，选择保存路径，然后运行。
运行界面如下：，通过调整滑块的值，可以看到图像的幅值会随着滑块的值而正比变动。至此界面设计结束。
学到这里，相当于基础入门，可以做一个简单的APP，类似于每一个编程语言中的“Hello world !”这个程序一样。下面进一步学习，我另起一个文档。
请发表评论