本文使用的是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 !”這個程序一樣。下面進一步學習，我另起一個文檔。