（一）

三 示例学习

2.响应数值输入

（1）主页——新建——APP——响应数值输入

（2）知识点解读

　　这里将学习 数值输入  响应 图像的相关内容。界面如下，包括左面板：四个数值文本编辑框、一个按钮button、右面板：一个坐标区，坐标区内有网格布局，并相应地对控件的名称、属性进行了修改，这些内容可以自行尝试设计。

 　　我们进入代码视图，学习如何编程实现 界面输入数值 进行 绘图。我按顺次一段一段进行分析。

classdef Mortgage < matlab.apps.AppBase

    % Properties that correspond to app components
    properties (Access = public)
        MortgageCalculatorUIFigure     matlab.ui.Figure
        GridLayout                     matlab.ui.container.GridLayout
        LeftPanel                      matlab.ui.container.Panel
        LoanAmountEditFieldLabel       matlab.ui.control.Label
        LoanAmountEditField            matlab.ui.control.NumericEditField
        InterestRateEditFieldLabel     matlab.ui.control.Label
        InterestRateEditField          matlab.ui.control.NumericEditField
        LoanPeriodYearsEditFieldLabel  matlab.ui.control.Label
        LoanPeriodYearsEditField       matlab.ui.control.NumericEditField
        MonthlyPaymentButton           matlab.ui.control.Button
        MonthlyPaymentEditField        matlab.ui.control.NumericEditField
        RightPanel                     matlab.ui.container.Panel
        PrincipalInterestUIAxes        matlab.ui.control.UIAxes
    end

　　这段代码的作用： 定义APP类，类名称为 Mortgage，控件属性有 ：整个界面图布 MortgageCalculatorUIFigure、 网格布局GridLayout、LeftPanel 左面板、数值文本编辑框 及相应的文本框标签LoanAmountEditFieldLabel、LoanAmountEditField、 InterestRateEditFieldLabel、InterestRateEditField  ， LoanPeriodYearsEditFieldLabel 、LoanPeriodYearsEditField 、 MonthlyPaymentEditField ；按钮 MonthlyPaymentButton 、右面板 RightPanel、坐标区PrincipalInterestUIAxes

% Properties that correspond to apps with auto-reflow
    properties (Access = private)
        onePanelWidth = 576;
    end

　　界面自动重排刷新时的属性定义

　onePanelWidth = 576;

　　因为这个界面是分为左面板和右面板两个面板，所以这里只定义了一个面板宽度。意思就是，当你在运行程序的时候，程序界面可以最大化，也可以手动调整大小，为了自适应界面的大小变化，这里固定了一个面板的宽度，无论界面变大变小，这个面板的宽度始终为576.

　　可以对比一下，小界面为下图

 　　我拉大界面后，可以发现左面板的宽度始终不变，右面板宽度在随界面大小变化。

 　　类比一下，如果是三栏式的，就需要对其中两个进行控制，这样的话界面不容易崩溃报错，如下面黄色部分。

% Properties that correspond to apps with auto-reflow
    properties (Access = private)
        onePanelWidth = 576;
        twoPanelWidth = 768;
    end

　　但是这两个代码实际意义只是定义面板宽度值，给定这两个面板的宽度是确定值，方便后面对界面调整大小的操作。

　　我们继续分析接下来的代码

% Callbacks that handle component events
    methods (Access = private)

        % Changes arrangement of the app based on UIFigure width
        function updateAppLayout(app, event)
            currentFigureWidth = app.MortgageCalculatorUIFigure.Position(3);
            if(currentFigureWidth <= app.onePanelWidth)
                % Change to a 2x1 grid
                app.GridLayout.RowHeight = {316, 316};
                app.GridLayout.ColumnWidth = {‘1x‘};
                app.RightPanel.Layout.Row = 2;
                app.RightPanel.Layout.Column = 1;
            else
                % Change to a 1x2 grid
                app.GridLayout.RowHeight = {‘1x‘};
                app.GridLayout.ColumnWidth = {257, ‘1x‘};
                app.RightPanel.Layout.Row = 1;
                app.RightPanel.Layout.Column = 2;
            end
        end

        % Button pushed function: MonthlyPaymentButton
        function MonthlyPaymentButtonPushed(app, event)
                       
            % Calculate the monthly payment
            amount = app.LoanAmountEditField.Value ;
            rate = app.InterestRateEditField.Value/12/100 ;
            nper = 12*app.LoanPeriodYearsEditField.Value ;
            payment = (amount*rate)/(1-(1+rate)^-nper);
            app.MonthlyPaymentEditField.Value = payment;
            
            % pre allocating and initializing variables 
            interest = zeros(1,nper);
            principal = zeros(1,nper);
            balance = zeros (1,nper);
            
            balance(1) = amount;
            
            % Calculate the principal and interest over time
            for i = 1:nper
                interest(i)  = balance(i)*rate ;
                principal(i) = payment - interest(i) ;
                balance(i+1) = balance(i) - principal(i) ;
            end
            
            % Plot the principal and interest
            plot(app.PrincipalInterestUIAxes, (1:nper)‘, principal, ...
                (1:nper)‘, interest) ;
            legend(app.PrincipalInterestUIAxes,{‘Principal‘,‘Interest‘},‘Location‘,‘Best‘)
            xlim(app.PrincipalInterestUIAxes,[0 nper]) ; 
            
        end
    end

　　这部分是回调函数，内容相对较多，我们分两部分来看，我用不同颜色标识。

　　第一块的内容是调整界面大小：前文提到，定义了一个面板的宽度为固定值。当总界面的宽度比刚才一个面板的宽度还要小时，界面就变成了1×2 的布局，什么意思呢，看下图

　　相应的，当界面宽度大于一个面板宽度时，就是2×1的布局，也就是下面这种布局。而其他时候，则左面板宽度不变，右面板大小随界面变化。

 　第二大块是按钮的回调函数，也就是当运行时按下按钮希望执行的操作：

　　代码  amount = app.LoanAmountEditField.Value ; 执行的是读取LoanAmountEditField文本编辑框里的内容，赋值给value；

　　代码：rate = app.InterestRateEditField.Value/12/100 ;执行的是读取InterestRateEditField并进行/12/100 的数值运算，最后赋值给rate；

　　代码：nper = 12*app.LoanPeriodYearsEditField.Value可类比上面两行。

　　由此看出，欲读取文本框（数值）内容，可采用 变量=app.XX.value的方式，同时，还可以进行数值运算，数值运算可以前置也可以后置，和一般的数值运算表达式一致。

　　代码：payment = (amount*rate)/(1-(1+rate)^-nper); 对读取的数值进行计算。

　　代码：app.MonthlyPaymentEditField.Value = payment;将上面计算的结果赋值给 MonthlyPaymentEditField 文本框。

　　由此可以看出，文本编辑框既可以作为数值输入，也可以作为数值输出。

　　接下来的代码是初始化变量，zeros(1,nper)是建立1行nper列的零矩阵。balance(1) = amount，即将amount赋值给balance的第一个数。

　　再下面是计算过程。采用的for循环，i从1到nper，这里的nper也就是上文文本框输入值进行计算后赋值的一个数字。对三个变量分别迭代计算求解，并且用向量矩阵的方式，将每一次迭代的值保存在矩阵中。

　　for循环计算结束后，是画图区，代码：

plot(app.PrincipalInterestUIAxes, (1:nper)‘, principal, ...
　　(1:nper)‘, interest) ; 这里的...是续行符，用于多行输入代码； plot 是绘图指令，括号第一个变量app.PrincipalInterestUIAxes是指绘图的结果在这个绘图区显示；后面的变量分别是横坐标、纵坐标、横坐标、纵坐标。
　　legend(app.PrincipalInterestUIAxes,{‘Principal‘,‘Interest‘},‘Location‘,‘Best‘) 这和MATLAB的基本代码含义一样，定义图例名称
　　xlim(app.PrincipalInterestUIAxes,[0 nper]) ;定义横坐标范围

由此可以看到，欲在绘图区xxx里绘图，需要调用函数 plot (app.xxx,  x,y,x2,y2.）

　　　剩下的代码是对组件初始化的属性定义和APP创建/删除两部分，在之前设计界面是通过拖拽控件、在检查器里修改相应的属性参数，这部分会自动生成，所以一般不需要再修改。之后的学习中，为了篇幅，也不再对这部分内容进行分析，直接跳过。

% Component initialization
    methods (Access = private)

        % Create UIFigure and components
        function createComponents(app)

            % Create MortgageCalculatorUIFigure and hide until all components are created
            app.MortgageCalculatorUIFigure = uifigure(‘Visible‘, ‘off‘);
            app.MortgageCalculatorUIFigure.AutoResizeChildren = ‘off‘;
            app.MortgageCalculatorUIFigure.Position = [100 100 653 316];
            app.MortgageCalculatorUIFigure.Name = ‘Mortgage Calculator‘;
            app.MortgageCalculatorUIFigure.SizeChangedFcn = createCallbackFcn(app, @updateAppLayout, true);

            % Create GridLayout
            app.GridLayout = uigridlayout(app.MortgageCalculatorUIFigure);
            app.GridLayout.ColumnWidth = {257, ‘1x‘};
            app.GridLayout.RowHeight = {‘1x‘};
            app.GridLayout.ColumnSpacing = 0;
            app.GridLayout.RowSpacing = 0;
            app.GridLayout.Padding = [0 0 0 0];
            app.GridLayout.Scrollable = ‘on‘;

            % Create LeftPanel
            app.LeftPanel = uipanel(app.GridLayout);
            app.LeftPanel.Layout.Row = 1;
            app.LeftPanel.Layout.Column = 1;
            app.LeftPanel.Scrollable = ‘on‘;

            % Create LoanAmountEditFieldLabel
            app.LoanAmountEditFieldLabel = uilabel(app.LeftPanel);
            app.LoanAmountEditFieldLabel.HorizontalAlignment = ‘right‘;
            app.LoanAmountEditFieldLabel.Position = [50 230 77 22];
            app.LoanAmountEditFieldLabel.Text = ‘Loan Amount‘;

            % Create LoanAmountEditField
            app.LoanAmountEditField = uieditfield(app.LeftPanel, ‘numeric‘);
            app.LoanAmountEditField.Limits = [0 10000000];
            app.LoanAmountEditField.ValueDisplayFormat = ‘%8.f‘;
            app.LoanAmountEditField.Position = [142 230 100 22];
            app.LoanAmountEditField.Value = 300000;

            % Create InterestRateEditFieldLabel
            app.InterestRateEditFieldLabel = uilabel(app.LeftPanel);
            app.InterestRateEditFieldLabel.HorizontalAlignment = ‘right‘;
            app.InterestRateEditFieldLabel.Position = [39 177 88 22];
            app.InterestRateEditFieldLabel.Text = ‘Interest Rate %‘;

            % Create InterestRateEditField
            app.InterestRateEditField = uieditfield(app.LeftPanel, ‘numeric‘);
            app.InterestRateEditField.Limits = [0.001 100];
            app.InterestRateEditField.Position = [142 177 100 22];
            app.InterestRateEditField.Value = 4;

            % Create LoanPeriodYearsEditFieldLabel
            app.LoanPeriodYearsEditFieldLabel = uilabel(app.LeftPanel);
            app.LoanPeriodYearsEditFieldLabel.HorizontalAlignment = ‘right‘;
            app.LoanPeriodYearsEditFieldLabel.Position = [15 124 112 22];
            app.LoanPeriodYearsEditFieldLabel.Text = ‘Loan Period (Years)‘;

            % Create LoanPeriodYearsEditField
            app.LoanPeriodYearsEditField = uieditfield(app.LeftPanel, ‘numeric‘);
            app.LoanPeriodYearsEditField.Limits = [10 40];
            app.LoanPeriodYearsEditField.ValueDisplayFormat = ‘%.0f‘;
            app.LoanPeriodYearsEditField.Position = [142 124 100 22];
            app.LoanPeriodYearsEditField.Value = 30;

            % Create MonthlyPaymentButton
            app.MonthlyPaymentButton = uibutton(app.LeftPanel, ‘push‘);
            app.MonthlyPaymentButton.ButtonPushedFcn = createCallbackFcn(app, @MonthlyPaymentButtonPushed, true);
            app.MonthlyPaymentButton.Position = [19 71 108 22];
            app.MonthlyPaymentButton.Text = ‘Monthly Payment‘;

            % Create MonthlyPaymentEditField
            app.MonthlyPaymentEditField = uieditfield(app.LeftPanel, ‘numeric‘);
            app.MonthlyPaymentEditField.ValueDisplayFormat = ‘%7.2f‘;
            app.MonthlyPaymentEditField.Editable = ‘off‘;
            app.MonthlyPaymentEditField.Position = [142 71 100 22];

            % Create RightPanel
            app.RightPanel = uipanel(app.GridLayout);
            app.RightPanel.Layout.Row = 1;
            app.RightPanel.Layout.Column = 2;
            app.RightPanel.Scrollable = ‘on‘;

            % Create PrincipalInterestUIAxes
            app.PrincipalInterestUIAxes = uiaxes(app.RightPanel);
            title(app.PrincipalInterestUIAxes, ‘Principal and Interest‘)
            xlabel(app.PrincipalInterestUIAxes, ‘Time (Months)‘)
            ylabel(app.PrincipalInterestUIAxes, ‘Amount‘)
            app.PrincipalInterestUIAxes.Position = [30 36 326 250];

            % Show the figure after all components are created
            app.MortgageCalculatorUIFigure.Visible = ‘on‘;
        end
    end

    % App creation and deletion
    methods (Access = public)

        % Construct app
        function app = Mortgage

            % Create UIFigure and components
            createComponents(app)

            % Register the app with App Designer
            registerApp(app, app.MortgageCalculatorUIFigure)

            if nargout == 0
                clear app
            end
        end

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

            % Delete UIFigure when app is deleted
            delete(app.MortgageCalculatorUIFigure)
        end
    end
end

　　至此，我们了解了界面大小调整的程序含义，同时学习了如何 利用识别文本框的输入值、并且如何输出结果值在文本框中；另外还学习了如何在指定的绘图区中绘图。

　　下面我们学习第三个教程，我另起第三个文档，跟紧哦！