0. 写作初衷

通过实现一个简单的任务学习app designer的基础使用方法
提供一个满足日常需要的登录界面

注：大家需要更多app designer的进阶技能，可以通过下面链接寻找资源。

原作者youtube主页
国内搬运视频

1. 成品展示

视频

2. 原代码

百度云盘
链接：https://pan.baidu.com/s/1EddtaDXmklFvqTrcZVrLlQ
提取码：1vol

3. 详细步骤（从打开MATLAB开始）

注：演示使用的MATLAB版本为2021a

3.1 设计篇

点击APP
点击“设计App”
点击“空白App”
点击一下空白页面
设置“标识符”：更改名字（Name）和图标（Icon）

注：此步骤完成之后，可以运行一下，保存该app，并查看效果图（如下），然后关闭运行的app，进入下一步。
从组件库拖拽一个“图像”到设计视图
单击“Browse”，插入图片。（光标停在图像控件上才会显示“Browse”）
调整图像大小

注：此步骤完成之后，可以运行查看效果图（如下），然后关闭运行的app，进入下一步。

9. 在界面中插入Logo，方法同步骤6，7，8

注：运行后，界面如下。
插入标题：拖动“标签”到合适位置
编辑标题内容，并调整为合适的格式。（需要单击一下“Label”，然后进行设置）

注：运行后，界面如下。
设置提醒，方法同步骤9，10
设置账号输入框：拖动“编辑字段（文本）”
删去“Edit Field”（要有间隔的点击两下，然后delete），并对矩形框大小进行合适地调整
选中空白框，复制粘贴，并调整位置
设计提示：在两个空白框中插入“账号”和“密码”，方法同步骤9，10，也可以把“请登录您的账号”复制过来。
插入登录按钮：拖动“状态按钮”到合适位置，并编辑文字和调整格式
插入登录提醒框，方法同9，10，并删除所有文本。
对控件进行中线对齐：先选中需要对齐的控件，然后点击“对齐”中的“居中对齐”（快捷键：Ctrl+Alt+2）。
对一些控件进行组合，方便后面调整间距：同时选择需要组合的控件，然后右击进行组合设置。（本设计中，组合了3对控件）
等间距分布：先把头尾控件相对于页面的位置固定到合适位置，然后选中所有需要调整的控件，利用"间距"中”垂直应用“进行设置。
把组合的控件再全部取消组合（方便后续点击控件直接在组件浏览器中显示控件名称）

效果图

3.2 功能篇

3.2.1 当输入账号时，隐藏“账号”提醒

注：当输入密码时，隐藏“密码”提醒，操作步骤相同，不再进行介绍。
功能演示：

实现步骤：

选中”“账号”对应的空白框，右击，选择“ing”回调。（app运行后，如果空白框得到输入，程序内部则会转到“ing”回调代码）
将“账号”提醒对应的label文本置空

        function EditFieldValueChanging(app, event)changingValue = event.Value;app.Label_3.Text = ' '; % 置空Label_3的文本end

3.2.2 当输入密码时，把文本转化为“*”

功能演示：

方法说明：
将输入的密码在程序内部使用一个变量储存起来，检测密码有多少位，直接在密码框输出多少个“*”。

实现步骤：

定义全局变量，用来储存保存的密码：在“代码视图”界面，利用“属性”中的“私有属性”完成定义。

    properties (Access = private)password % 保存密码end

进入密码框的“ing”回调
保存密码

            % 保存密码if size(changingValue,2)>1 % 密码框中的字符多于1个if size(changingValue,2)-size(app.password,2) == 1     % 手动输入了1个字符app.password = [app.password,changingValue(:,end)];elseif size(changingValue,2)-size(app.password,2) > 1  % 粘贴输入了多个字符app.password = changingValue;else % 删除了字符app.password = app.password(1,1:size(changingValue,2));endelseif size(changingValue,2) == 0 % 密码框中的字符为0个app.password = [];elseif size(changingValue,2) == 1 % 密码框中的字符为1个app.password = [app.password,changingValue(:,end)];end

密码星号表示

            % 密码星号表示if size(changingValue,2)>1s = '*';for i = 2:size(changingValue,2)s = [s,'*'];endapp.EditField_2.Value = s;elseif size(changingValue,2)==1app.EditField_2.Value = '*';end

结束

3.2.3 判断账号和密码是否匹配

方法说明：
在程序内提前设置好账号和密码，直接和输入的账号和密码做字符匹配。