手机APP开发之MIT Appinventor详细实战教程（十），标准登陆界面的逻辑设计和数据库的有效使用

（一）APP功能介绍

（二）设计流程

（三）知识点

（四）问题

（五）总结

（一）APP功能介绍

今天我们来学习设计一个登录界面的APP，虽然界面有些简陋，但其内在的逻辑设计却并不简单。我们首先来看一看它的基本功能：

第1个是登录和注册界面，也就是当我们点开APP的初始界面。第2个是注册界面，当注册完成后，我们返回登录界面重新登录。然后就生成了第3个界面，登录成功界面。

其中第2个注册界面包含有头像的功能，当你在注册时候设计了头像，那么在你登录成功后，你的头像就会正确的显示出来。

App内置数据库，用来保存你的账号和密码。

当然，如果你的账号和密码是错误的，是不能正常登录的。

同时还具备删除账号的功能，这就使得其内部的原理结构相对有些复杂了。我们来一起看一看，这是如何设计的吧。

这是我们设计的第1个uI屏幕，细心的同学可能会发现，这个界面和我们APP产品的界面有些不同。

（二）设计流程

这个界面相对于成品功能更加完善，按钮和排列也较多，这是因为在我们的成品APP界面中是隐藏了很多组件的。

实际上，在APP里面的第1个界面和第2个界面是一个界面。只不过是当不同的按钮触发后，将一部分组件隐藏起来了而已。所以就显示出我们所看到的两个界面。其本质是一个界面的隐藏组件来实现的。我们来看一看其内部的逻辑设计。

大家只需要找到那个真和假这两个字。真就代表显示假就代表不显示。

通过按钮的触发来使页面布局发生变化，这是我们在APP经常使用的一种方式。

通过这种方式，我们可以按照客户的需求来实现相应的界面。

如果还不是很明白，我可以将这个APP发给大家，大家根据操作来认真体会一下这个过程。

这个是页面初始化的相关逻辑设计。

（三）知识点

第1个知识点是：其中紫色部分是数据库的相关逻辑了，这是执行储存账号信息的第1个步骤。

第2个知识点是橙色模块。他把全局变量类型设置为1或者是0。是为了复选框的需求，这个以后会用到。

这个是图像选择框的一个简单逻辑。就是当我们在第2个注册界面的时候。我们要从手机本地相册选择自己的头像。当选择完成的时候，我们设置图像选择框的图像为我们选择的图像而已。相对来说比较好理解。

这是当确定按钮按下后，其内部所执行的所有逻辑过程。

也是我们最复杂的模块。由于一张图片无法证全部显示，所以我给大家添了三幅图片。其内在的逻辑设计和思路，我给大家简单的介绍一下。

因为是注册界面，所以我们首先要保持用户注册的账号不是空号。

（四）问题

这是第1个要注意到的问题。

第2个问题便是需要用户两次的密码输入保持一致。如果不一致，需要重新输入。

第3个要求便是以上的情况全部是正确的，我们将其保存在数据库中。方便用户下一次登录。

当用户第2次登录的时候，可能会出现账号输入错误的情况。

当账号输入错误或密码错误时候，我们要提示其错误情况，要求其改正，这就需要对话框的出现。

基于以上的要求，我们根据逻辑设计来实现相关的需求，就成了上图的逻辑设计了。

这是第2个uI界面的设计，功能是删除账号和显示头像和账号Id。内置数据库。我们来看一下其内部的逻辑设计。

这是其内部的逻辑设计了，我们来简单的了解一下。

首先我们设置全局变量为文本空变量。当屏幕二初始化的时候，我们显示其上一个界面中用户储存的账号和头像。当删除按钮被点击时。我们首先提示用户是否需要删除账号。如果需要则从数据库中清除标签和数据。

删除完毕后，我们打开第1个用户注册和登录的界面。这个相对比较直观，也从侧面为我们展示的数据库如何删除标签和如何打开屏幕的一些相关操作。

（五）总结

以上就是这个APP主要的制作流程和思路以及方法。感兴趣的小伙伴可以私聊我领取相关软件。这主要是培养我们一个逻辑思维和实际操作能力的一个小锻炼。在实际上其实并没有太大的实用价值。但是这可以作为一个比较优秀的软件的精美的包装。有了这个精美的包装，会让你的软件看起来更加的高端大气，当你有了服务器之后，还可以管理这些账号，让你更加的专业。有哪些不懂可以在下方评论。